@olenbetong/appframe-ds 1.3.0 → 1.3.3

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @olenbetong/appframe-ds
 
+## 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
+
+- 2c2ed02: `DataEditToolbar`: the previous/next buttons no longer stack (Designsystemet buttons are `display: flex`, so the navigation group is a flex row now), and the toolbar is a tinted bar with a bottom border in the theme's tokens instead of black-at-12% top and bottom borders, which were invisible in dark mode and doubled up against a tab list above it.
+- c28f772: `InputAdornments`: the hover style is drawn on the wrapper like the focus style (Designsystemet's inner outline, on the whole control), and the inner input no longer shows its own hover outline.
+- Updated dependencies [a4158e8]
+  - @olenbetong/appframe-react@2.2.2
+
 ## 1.3.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olenbetong/appframe-ds",
-  "version": "1.3.0",
+  "version": "1.3.3",
   "description": "Components that bind Designsystemet components to Appframe data objects",
   "type": "module",
   "types": "./es/index.d.ts",
@@ -63,17 +63,17 @@
     "@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.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",
     "mitt": "^3.0.1",
     "react": "19.3.0",
     "react-dom": "19.3.0",
-    "react-window": "2.3.1",
-    "temporal-polyfill": "1.0.5",
-    "@olenbetong/appframe-react": "2.2.1",
-    "@olenbetong/appframe-core": "2.14.0",
-    "@olenbetong/appframe-data": "1.7.2"
+    "react-window": "2.3.3",
+    "temporal-polyfill": "1.0.5"
   },
   "devDependencies": {
     "@digdir/designsystemet-react": "1.22.0",
@@ -90,7 +90,7 @@
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
     "happy-dom": "20.14.5",
-    "react-error-boundary": "6.1.5",
+    "react-error-boundary": "6.1.6",
     "react-router": "8.4.0",
     "typescript": "7.0.2"
   },

package/src/binding/DataEditToolbar.css

@@ -0,0 +1,23 @@
+/*
+ * A toolbar bar above a record form: tinted, so it reads as chrome rather than as part of the
+ * form below it. Designsystemet buttons are `display: flex`, so every group of them must be a
+ * flex row of its own or the buttons stack.
+ */
+@layer ds {
+	.DataEditToolbar-root {
+		display: flex;
+		align-items: center;
+		gap: var(--ds-size-1);
+		min-height: 48px;
+		padding-inline: var(--ds-size-2);
+		background: var(--ds-color-neutral-background-tinted);
+		border-block-end: var(--ds-border-width-default) solid var(--ds-color-neutral-border-subtle);
+	}
+
+	.DataEditToolbar-navigation {
+		display: flex;
+		align-items: center;
+		gap: var(--ds-size-1);
+		margin-inline-start: auto;
+	}
+}

package/src/binding/DataEditToolbar.tsx

@@ -1,3 +1,5 @@
+import "./DataEditToolbar.css";
+
 import { Button, Tooltip } from "@digdir/designsystemet-react";
 import { ChevronLeftIcon, ChevronRightIcon } from "@navikt/aksel-icons";
 import type { DataObject } from "@olenbetong/appframe-data";
@@ -55,23 +57,13 @@ export function DataEditToolbar({
 	children,
 	navigationDataObject,
 	showNavigation,
-	style,
+	className,
 	...props
 }: DataEditToolbarProps) {
 	let dataObject = useDataObject();
 
 	return (
-		<div
-			style={{
-				display: "flex",
-				alignItems: "center",
-				minHeight: "48px",
-				borderBottom: "1px solid rgb(0 0 0 / 0.12)",
-				borderTop: "1px solid rgb(0 0 0 / 0.12)",
-				...style,
-			}}
-			{...props}
-		>
+		<div className={className ? `DataEditToolbar-root ${className}` : "DataEditToolbar-root"} {...props}>
 			<Tooltip content={getLocalizedString("Save changes")}>
 				<SaveIconButton />
 			</Tooltip>
@@ -83,7 +75,7 @@ export function DataEditToolbar({
 			</Tooltip>
 			{children}
 			{showNavigation && (
-				<div style={{ marginLeft: "auto" }}>
+				<div className="DataEditToolbar-navigation">
 					<IndexNavigator dataObject={navigationDataObject ?? dataObject} />
 				</div>
 			)}

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/input/InputAdornments.css

@@ -40,8 +40,13 @@
 	--obInputAdornments-fontSize: var(--ds-font-size-4, 1.125rem);
 }
 
-.ObInputAdornments-root:hover:not(:focus-within) {
-	border-color: var(--ds-color-neutral-border-strong, #767676);
+/* The Designsystemet input hover (an inner outline doubling the border), drawn on the wrapper */
+.ObInputAdornments-root:hover:not(
+		:focus-within,
+		:has(.ObInputAdornments-field:disabled, .ObInputAdornments-field[readonly])
+	) {
+	outline: var(--ds-border-width-default, 1px) solid var(--ds-color-neutral-border-default, #b3b3b3);
+	outline-offset: -0.1px;
 }
 
 .ObInputAdornments-root:has(.ObInputAdornments-field:focus-visible) {
@@ -68,6 +73,10 @@
 	opacity: 1;
 }
 
+.ObInputAdornments-root .ObInputAdornments-field:hover {
+	outline: none;
+}
+
 .ObInputAdornments-root .ObInputAdornments-field:focus-visible {
 	box-shadow: none;
 	outline: none;