@olenbetong/appframe-ds 1.5.0 → 1.6.1

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @olenbetong/appframe-ds
 
+## 1.6.1
+
+### Patch Changes
+
+- bd4a806: AfGrid edits `date` and `dateTime` columns in UTC, matching how it displays wall-clock dates. MUI's own editors used local time, so a date entered in Norway was saved as 22:00 the day before (and then shown as the previous day). Columns holding real UTC instants, such as Created/Updated in newer tables, can set `storedAsUtc: true` to be shown and edited in local time instead. A column's own `renderEditCell` still takes precedence.
+
+## 1.6.0
+
+### Minor Changes
+
+- 3cd79b7: New `NumberInput` and `BoundNumberInput`: a number edited as text and shown in the user's culture (`culture` prop, defaulting to `af.userSession.culture` and to `nb-NO` outside a session), with stepper buttons and arrow keys that round to `decimalDigits`, `min`/`max` clamping, and the whole value selected on focus. Typed text is parsed the same way whatever the culture: both `,` and `.` are the decimal separator and whitespace the only thousands separator, so a Norwegian user typing `1.5` gets 1,5. It is built on `InputAdornments` inside a Designsystemet `Field`, so `label`, `description` and `error` work as on `Textfield`. `BoundNumberInput` binds it to a number field through `useField`. The `formatNumber`, `parseNumber` and `getDefaultCulture` helpers behind it are exported too.
+
+### Patch Changes
+
+- dc1945b: `LinearProgress` indeterminate animation is Material Design's again: two bars chase each other across the track in a 2.1 s cycle, the first growing from 35% to 90% of the track, the second starting 1.15 s later with a sharper easing and shrinking to a sliver, both holding off-screen from 60% of the cycle. The previous single bar never paused and barely changed width, so it read as a bar moving at varying speed. The bars are still moved with transforms, so the animation stays on the compositor. The lookup popup's loading bar now uses this component as an overlay instead of a bar of its own.
+- 96f6bb3: The lookup popup (`AfLookup`, `AfLookupEdit`) is laid out the conventional way: the search field on top, where the focus is, the list filling the middle, and Clear and Close as a footer. On desktop the popup renders at `data-size="sm"`, so the search field, the rows and the buttons are compact next to the field; the mobile bottom sheet keeps `md` for touch. List rows now get a subtle divider plus the hover and active states from the component, so a `renderItem` only lays out its content. The dialog padding is tightened, and on mobile the bottom sheet really sits on the bottom edge of the viewport: the user agent's modal max-height and auto margins had left a gap under it, and the height now follows the browser chrome (`dvh`).
+
+  The grid variant's header now follows the rows when the columns are wider than the popup and the list scrolls sideways; before, only the rows moved. Columns can be resized by dragging the handle at the end of a header cell (double click restores the configured width), and the header row is given the list's inner width so `1fr` columns line up with the rows whether or not there is a vertical scrollbar. Clicking a header sorts by that column (again to flip the direction) through the data object's sort order, so the server sorts and every page follows; a column sets `sortable: false` to opt out. Truncated cell text now ends in an ellipsis; the cell is a flex container, which never applied one to its own text. The loading bar is laid over the top edge of the list instead of being inserted above it, so the rows no longer jump by its height while a search runs.
+
+- 3cd79b7: `InputAdornments` and `Autocomplete` drop their `data-size="xs"` rules. Designsystemet components come in `sm`, `md` and `lg` only (`xs` and `xl` are typography sizes), so the rules never matched a working size and `xs` rendered as `md`.
+- 56fb84d: The lookup dialog flips above or to the left of its input when there is no room below or to the right, instead of opening outside the viewport.
+
 ## 1.5.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olenbetong/appframe-ds",
-  "version": "1.5.0",
+  "version": "1.6.1",
   "description": "Components that bind Designsystemet components to Appframe data objects",
   "type": "module",
   "types": "./es/index.d.ts",
@@ -62,37 +62,38 @@
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "4.0.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "3.0.0",
-    "@base-ui/react": "1.8.0",
+    "@base-ui/react": "1.9.0",
     "@olenbetong/appframe-core": "^2.15.2",
-    "@olenbetong/appframe-data": "^1.8.2",
-    "@olenbetong/appframe-react": "^2.2.7",
+    "@olenbetong/appframe-data": "^1.8.4",
+    "@olenbetong/appframe-react": "^2.2.8",
     "clsx": "^2.1.1",
-    "dockview-react": "8.3.1",
+    "dockview-react": "8.6.1",
     "localforage": "^1.10.0",
     "mitt": "^3.0.1",
-    "react": "19.3.0",
-    "react-dom": "19.3.0",
-    "react-window": "2.3.3",
-    "temporal-polyfill": "1.0.5"
+    "react": "19.3.1",
+    "react-dom": "19.3.1",
+    "react-window": "2.5.0",
+    "temporal-polyfill": "1.0.6"
   },
   "devDependencies": {
     "@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/material": "9.5.0",
+    "@mui/x-data-grid-premium": "8.29.5",
     "@mui/x-license": "8.29.3",
-    "@navikt/aksel-icons": "8.17.2",
+    "@navikt/aksel-icons": "8.19.2",
     "@testing-library/dom": "^10.4.2",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "16.3.3",
-    "@testing-library/user-event": "^14.6.7",
+    "@testing-library/user-event": "^14.6.8",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
-    "happy-dom": "20.14.5",
+    "happy-dom": "21.0.4",
     "react-error-boundary": "6.1.6",
-    "react-router": "8.4.0",
-    "typescript": "7.0.2"
+    "react-router": "8.5.0",
+    "typescript": "7.0.2",
+    "vitest": "5.0.5"
   },
   "scripts": {
     "build": "pnpm run build:tsc && pnpm test && pnpm run build:css",

package/scripts/copyAssets.mjs

@@ -1,27 +1,27 @@
-/*
- * tsc emits the JavaScript into es/ but not the stylesheets the components import next to
- * themselves. Copy every .css under src/ to the same path under es/, so a new component's
- * stylesheet is published without anyone remembering a list.
- */
-import { cpSync, mkdirSync, readdirSync } from "node:fs";
-import { dirname, join, relative } from "node:path";
-
-function* cssFiles(dir) {
-	for (let entry of readdirSync(dir, { withFileTypes: true })) {
-		let path = join(dir, entry.name);
-		if (entry.isDirectory()) {
-			yield* cssFiles(path);
-		} else if (entry.name.endsWith(".css")) {
-			yield path;
-		}
-	}
-}
-
-let count = 0;
-for (let src of cssFiles("src")) {
-	let dest = join("es", relative("src", src));
-	mkdirSync(dirname(dest), { recursive: true });
-	cpSync(src, dest);
-	count++;
-}
-console.log(`Copied ${count} stylesheets from src/ to es/`);
+/*
+ * tsc emits the JavaScript into es/ but not the stylesheets the components import next to
+ * themselves. Copy every .css under src/ to the same path under es/, so a new component's
+ * stylesheet is published without anyone remembering a list.
+ */
+import { cpSync, mkdirSync, readdirSync } from "node:fs";
+import { dirname, join, relative } from "node:path";
+
+function* cssFiles(dir) {
+	for (let entry of readdirSync(dir, { withFileTypes: true })) {
+		let path = join(dir, entry.name);
+		if (entry.isDirectory()) {
+			yield* cssFiles(path);
+		} else if (entry.name.endsWith(".css")) {
+			yield path;
+		}
+	}
+}
+
+let count = 0;
+for (let src of cssFiles("src")) {
+	let dest = join("es", relative("src", src));
+	mkdirSync(dirname(dest), { recursive: true });
+	cpSync(src, dest);
+	count++;
+}
+console.log(`Copied ${count} stylesheets from src/ to es/`);

package/src/AfLookup/Lookup.css

@@ -1,130 +1,147 @@
-.ObLookup-inputWrap {
-	position: relative;
-
-	.ds-input {
-		padding-inline-end: var(--ObLookup-buttons-width, 3rem);
-	}
-}
-
-.ObLookup-labelTag {
-	margin-inline-start: var(--ds-size-2, 0.5rem);
-}
-
-.ObLookup-buttons {
-	position: absolute;
-	inset-inline-end: 0;
-	inset-block-end: 0;
-	/* Match the .ds-input height so the buttons center on the input row,
-	   also when a label or description is rendered above the input */
-	height: var(--ds-size-12, 3rem);
-	display: flex;
-	align-items: center;
-	padding-inline-end: var(--ds-size-1, 0.25rem);
-}
-
-.ObLookup-dialog {
-	border: 0;
-	margin-block-start: 0;
-	padding: 1rem;
-	overflow: hidden;
-
-	background-color: var(--ds-color-neutral-background-tinted);
-	color: var(--ds-color-neutral-text-default);
-
-	transition:
-		display 0.2s allow-discrete,
-		transform 0.2s ease-out,
-		scale 0.2s ease-out,
-		opacity 0.2s ease-out;
-
-	&::backdrop {
-		opacity: 0;
-		background: rgb(0 0 0 / 0.2);
-		transition:
-			display 0.2s allow-discrete,
-			opacity 0.2s ease-out;
-	}
-
-	&[open]::backdrop {
-		opacity: 1;
-
-		@starting-style {
-			opacity: 0;
-		}
-	}
-
-	@media (width < 768px) {
-		inset: 10vh 0.5rem 0;
-
-		border-radius: 1rem 1rem 0 0;
-		height: 90vh;
-		width: calc(100vw - 1rem);
-		max-width: 100vw;
-		transform: translateY(100%);
-		z-index: 1500;
-
-		opacity: 0;
-
-		&[open] {
-			transform: translateY(0);
-			opacity: 1;
-
-			@starting-style {
-				transform: translateY(100%);
-				opacity: 0;
-			}
-		}
-	}
-
-	@media (width >= 768px) {
-		inset-block-start: 50%;
-		inset-inline-start: 50%;
-		translate: -50% -50%;
-		scale: 1 0;
-		opacity: 0;
-
-		border-radius: 0.25rem;
-
-		height: clamp(300px, 80vh, 500px);
-		min-width: 320px;
-		width: var(--default-width, 400px);
-
-		&[open] {
-			scale: 1;
-			opacity: 1;
-
-			@starting-style {
-				scale: 1 0;
-				opacity: 0;
-			}
-		}
-	}
-
-	@supports (inset-block-start: anchor(bottom)) {
-		@media (width < 768px) or (pointer: coarse) {
-			anchor-name: unset !important;
-		}
-
-		@media screen and (width >= 768px) and (pointer: fine) {
-			inset-block-start: anchor(bottom);
-			inset-block-end: unset;
-
-			inset-inline-start: anchor(left);
-			inset-inline-end: unset;
-
-			translate: unset;
-			transform-origin: top left;
-
-			resize: both;
-		}
-	}
-
-	&[data-anchor="manual"] {
-		inset: unset;
-		position: fixed;
-		inset-inline-start: var(--lookup-anchor-inline-start, 50%);
-		inset-block-start: var(--lookup-anchor-block-start, 50%);
-		translate: unset;
-		transform: none;
-	}
-}
+.ObLookup-inputWrap {
+	position: relative;
+
+	.ds-input {
+		padding-inline-end: var(--ObLookup-buttons-width, 3rem);
+	}
+}
+
+.ObLookup-labelTag {
+	margin-inline-start: var(--ds-size-2, 0.5rem);
+}
+
+.ObLookup-buttons {
+	position: absolute;
+	inset-inline-end: 0;
+	inset-block-end: 0;
+	/* Match the .ds-input height so the buttons center on the input row,
+	   also when a label or description is rendered above the input */
+	height: var(--ds-size-12, 3rem);
+	display: flex;
+	align-items: center;
+	padding-inline-end: var(--ds-size-1, 0.25rem);
+}
+
+.ObLookup-dialog {
+	border: 0;
+	margin-block-start: 0;
+	/* Tight: the search field sits at the top edge and the footer buttons carry their own padding */
+	padding: var(--ds-size-3, 0.75rem) var(--ds-size-2, 0.5rem) var(--ds-size-1, 0.25rem);
+	overflow: hidden;
+
+	background-color: var(--ds-color-neutral-background-tinted);
+	color: var(--ds-color-neutral-text-default);
+
+	transition:
+		display 0.2s allow-discrete,
+		transform 0.2s ease-out,
+		scale 0.2s ease-out,
+		opacity 0.2s ease-out;
+
+	&::backdrop {
+		opacity: 0;
+		background: rgb(0 0 0 / 0.2);
+		transition:
+			display 0.2s allow-discrete,
+			opacity 0.2s ease-out;
+	}
+
+	&[open]::backdrop {
+		opacity: 1;
+
+		@starting-style {
+			opacity: 0;
+		}
+	}
+
+	@media (width < 768px) {
+		/*
+		 * A bottom sheet. The UA stylesheet caps a modal dialog at calc(100% - 6px - 2em) and
+		 * centres it with auto margins, which left a gap under the sheet; drop both so the box
+		 * really sits on the bottom edge. dvh follows the mobile browser chrome.
+		 */
+		inset: auto 0.5rem 0;
+		margin: 0;
+		max-height: none;
+
+		border-radius: 1rem 1rem 0 0;
+		height: 90vh;
+		height: 90dvh;
+		width: auto;
+		max-width: 100vw;
+		transform: translateY(100%);
+		z-index: 1500;
+
+		opacity: 0;
+
+		&[open] {
+			transform: translateY(0);
+			opacity: 1;
+
+			@starting-style {
+				transform: translateY(100%);
+				opacity: 0;
+			}
+		}
+	}
+
+	@media (width >= 768px) {
+		inset-block-start: 50%;
+		inset-inline-start: 50%;
+		translate: -50% -50%;
+		scale: 1 0;
+		opacity: 0;
+
+		border-radius: 0.25rem;
+
+		height: clamp(300px, 80vh, 500px);
+		min-width: 320px;
+		width: var(--default-width, 400px);
+
+		&[open] {
+			scale: 1;
+			opacity: 1;
+
+			@starting-style {
+				scale: 1 0;
+				opacity: 0;
+			}
+		}
+	}
+
+	@supports (inset-block-start: anchor(bottom)) {
+		@media (width < 768px) or (pointer: coarse) {
+			anchor-name: unset !important;
+		}
+
+		@media screen and (width >= 768px) and (pointer: fine) {
+			inset-block-start: anchor(bottom);
+			inset-block-end: unset;
+
+			inset-inline-start: anchor(left);
+			inset-inline-end: unset;
+
+			/* Below and to the right of the input when there is room; otherwise above it, or
+			   aligned to its right edge, so an input near the bottom or the right edge of the
+			   viewport still gets a visible dialog. */
+			position-try-fallbacks:
+				flip-block,
+				flip-inline,
+				flip-block flip-inline;
+
+			translate: unset;
+			transform-origin: top left;
+
+			resize: both;
+		}
+	}
+
+	&[data-anchor="manual"] {
+		inset: unset;
+		position: fixed;
+		inset-inline-start: var(--lookup-anchor-inline-start, 50%);
+		inset-block-start: var(--lookup-anchor-block-start, 50%);
+		translate: unset;
+		transform: none;
+	}
+}