@olenbetong/appframe-ds 1.9.0 → 1.9.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @olenbetong/appframe-ds
 
+## 1.9.2
+
+### Patch Changes
+
+- 2f1516a: AfGrid and the lookup grid take their row height from `--ds-size-11` instead of `--ds-size-10`, so the text no longer crowds the row (about 34px at sm, 28px at xs). AfGrid's text is one step below the size mode's body text, as MUI's compact grid was, except at xs, and inputs in the grid follow it.
+
+## 1.9.1
+
+### Patch Changes
+
+- 0f57479: Lookups: the dialog lines up with the input instead of the label beside or above it, grows upwards when it is placed above the field, and follows the field's size mode also when opened with ArrowDown or F4. `GridEditLookup` takes `editable`, so a value can be typed into the cell.
+
 ## 1.9.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olenbetong/appframe-ds",
-  "version": "1.9.0",
+  "version": "1.9.2",
   "description": "Components that bind Designsystemet components to Appframe data objects",
   "type": "module",
   "types": "./es/index.d.ts",

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

@@ -3,6 +3,8 @@
 
 	.ds-input {
 		padding-inline-end: var(--ObLookup-buttons-width, var(--ds-size-12, 3rem));
+		/* Set by AfLookup and AfLookupEdit; the dialog lines up with the input, not its label. */
+		anchor-name: var(--ObLookup-anchor);
 	}
 }
 
@@ -144,6 +146,11 @@
 		}
 	}
 
+	/* Placed above the field (see useLookup): grow upwards from it. */
+	&[data-above] {
+		transform-origin: bottom left;
+	}
+
 	&[data-anchor="manual"] {
 		inset: unset;
 		position: fixed;

package/src/AfLookup/Lookup.tsx

@@ -78,12 +78,38 @@ export function useLookup<T extends Record<string, unknown>>({
 		// mounts with the search value already set.
 		setInitialSearchValue(searchValue);
 		openDialog();
+		setGrowDirection();
+		// A manually anchored dialog (in a virtualized grid) is placed in the next frame.
+		requestAnimationFrame(setGrowDirection);
+	}
+
+	// When there is no room below the field, the dialog is placed above it; it then grows upwards
+	// from the field instead of down towards it. Its bottom edge tells, whatever the opening scale.
+	function setGrowDirection() {
+		let $dialog = dialogRef.current;
+		let anchor = document.getElementById(inputId) ?? getAnchorElement?.();
+		if (!$dialog || !anchor) return;
+
+		let above = $dialog.getBoundingClientRect().bottom <= anchor.getBoundingClientRect().top + 1;
+		$dialog.toggleAttribute("data-above", above);
+	}
+
+	// useLookupState opens the dialog on ArrowDown and F4 itself, which would skip the size mode and
+	// the grow direction above; every way of opening it goes through handleOpenDialog instead.
+	function handleKeyDown(event: React.KeyboardEvent<HTMLElement>) {
+		if (event.key === "ArrowDown" || event.key === "F4") {
+			event.preventDefault();
+			event.stopPropagation();
+			handleOpenDialog();
+			return;
+		}
+		onKeyDown(event);
 	}
 
 	return {
 		open,
 		openDialog: handleOpenDialog,
-		onKeyDown,
+		onKeyDown: handleKeyDown,
 		onChange: handleChange,
 		dialogRef,
 		anchorName,
@@ -135,7 +161,8 @@ export function AfLookup<T extends Record<string, unknown>>({
 	}
 
 	return (
-		<div style={{ anchorName } as React.CSSProperties}>
+		// The dialog anchors to the input itself (see Lookup.css), not to the label beside or above it.
+		<div style={{ "--ObLookup-anchor": anchorName } as React.CSSProperties}>
 			<div
 				className="ObLookup-inputWrap"
 				style={

package/src/AfLookup/LookupEdit.tsx

@@ -73,7 +73,8 @@ export function AfLookupEdit<T extends Record<string, unknown>>({
 	let hasClear = !!(nullable && value && onChange);
 
 	return (
-		<div style={{ anchorName } as React.CSSProperties}>
+		// The dialog anchors to the input itself (see Lookup.css), not to the label beside or above it.
+		<div style={{ "--ObLookup-anchor": anchorName } as React.CSSProperties}>
 			<div
 				className="ObLookup-inputWrap"
 				style={

package/src/AfLookup/LookupGrid.tsx

@@ -9,7 +9,7 @@ import { List, type RowComponentProps, useListRef } from "react-window";
 import { getLocalizedString } from "../i18n.js";
 import { useDsSize } from "../theme/sizeMode.js";
 
-/** The row and header height until `--ds-size-10` is measured, which follows the size mode like AfGrid's rows. */
+/** The row and header height until `--ds-size-11` is measured, which follows the size mode like AfGrid's rows. */
 const ROW_HEIGHT = 40;
 /** Narrowest a column can be made, and what a flexible column counts for in the minimum width */
 const MIN_COLUMN_WIDTH = 80;
@@ -192,7 +192,7 @@ export function LookupGrid<T extends Record<string, unknown>>({
 	let listRef = useListRef(null);
 	let headerRowRef = useRef<HTMLDivElement>(null);
 	let rootRef = useRef<HTMLDivElement>(null);
-	let rowHeight = useDsSize(rootRef, 10, ROW_HEIGHT);
+	let rowHeight = useDsSize(rootRef, 11, ROW_HEIGHT);
 	let [resizedWidths, setResizedWidths] = useState<Partial<Record<string, number>>>({});
 	let [resizing, setResizing] = useState<{ field: string; startWidth: number } | null>(null);
 	let [listInnerWidth, setListInnerWidth] = useState<number>();

package/src/grid/GridEditLookup.tsx

@@ -22,7 +22,8 @@ export type GridEditLookupProps<
 
 /**
  * A lookup as a grid cell editor: a read-only input with a search button that opens the
- * lookup dialog anchored to the cell, and a clear button when the field is nullable. Give it
+ * lookup dialog anchored to the cell, and a clear button when the field is nullable. With
+ * `editable` the value can be typed into the cell as well, such as a username. Give it
  * to a column's `renderEditCell`. Equivalent of `GridEditLookup` in `@olenbetong/appframe-mui`.
  */
 export function GridEditLookup<
@@ -77,7 +78,7 @@ export function GridEditLookup<
 				slotProps={{
 					root: {
 						// @ts-expect-error: typed as HTMLElement, but it is the input
-						readOnly: true,
+						readOnly: !props.editable,
 					},
 				}}
 				onKeyDown={onKeyDown}

package/src/grid/index.css

@@ -4,11 +4,33 @@
 
 /*
  * The grid follows the Designsystemet size mode it sits in instead of MUI's density and type
- * scale: its text is the size mode's body text, like the inputs around it, and its row and header
- * heights come from the same mode (`useAfSizeMode`).
+ * scale, and its row and header heights come from the same mode (`useAfSizeMode`). Its text is
+ * one step below the mode's body text - at sm that is MUI's compact grid text - except at xs,
+ * where the body text is already that small. The size is picked on the element that sets the
+ * mode, so the closest one wins; the components that use `data-size` for a variant of their own
+ * are left out, as in `getSizeMode`. Without a size mode the grid inherits the page's text.
  */
+[data-size]:not(.ds-heading, .ds-paragraph, .ds-spinner, .ds-avatar) {
+	--AfGrid-font-size: var(--ds-body-sm-font-size);
+}
+
+[data-size="xs"]:not(.ds-heading, .ds-paragraph, .ds-spinner, .ds-avatar) {
+	--AfGrid-font-size: var(--ds-body-md-font-size);
+}
+
 .AfGrid-root .MuiDataGrid-root {
-	font-size: inherit;
+	font-size: var(--AfGrid-font-size, inherit);
+}
+
+/*
+ * Inputs in the grid - cell editors, header filters - take the grid's text size rather than the
+ * mode's body text. Only where there is a mouse, so a touch device keeps Designsystemet's floor
+ * that stops iOS zooming in on a focused field (see the site's xs rule).
+ */
+@media (hover: hover) and (pointer: fine) {
+	.AfGrid-root .MuiDataGrid-root .ds-input {
+		--dsc-input-font-size: 1em;
+	}
 }
 
 /*
@@ -30,13 +52,13 @@
 
 /*
  * Controls in a data cell - editors, lookup buttons, the row's action buttons - fit the row, which
- * is `--ds-size-10` tall, rather than taking Designsystemet's `--ds-size-12` control height, which
+ * is `--ds-size-11` tall, rather than taking Designsystemet's `--ds-size-12` control height, which
  * would overflow it at every size. The custom properties are set on the components themselves,
  * so they are overridden there and not on the cell.
  */
 .AfGrid-root .MuiDataGrid-cell {
 	.ds-input {
-		--dsc-input-size: var(--ds-size-10, 2.25rem);
+		--dsc-input-size: var(--ds-size-11, 2.25rem);
 		--dsc-input-padding-block: 0;
 	}
 

package/src/grid/useAfSizeMode.ts

@@ -7,13 +7,14 @@ const FALLBACK_HEIGHT = 36;
 
 /**
  * Row and header heights from the Designsystemet size mode the grid sits in, in place of MUI's
- * density: `--ds-size-10`, which is 25px at xs, 31px at sm, 35px at md and 41px at lg with the
- * site's 14px root. The grid renders at the standard density, so these are the heights as they
- * are. The text, toolbar and footer follow the same size mode through the stylesheet and by
+ * density: `--ds-size-11`, which is about 28px at xs, 34px at sm, 39px at md and 45px at lg with
+ * the site's 14px root - close to Designsystemet's own table at each size. `--ds-size-10` left the
+ * text crowded in its row. The grid renders at the standard density, so these are the heights as
+ * they are. The text, toolbar and footer follow the same size mode through the stylesheet and by
  * inheriting `data-size`.
  */
 export function useAfSizeMode(rootRef: RefObject<HTMLElement | null>) {
-	let height = useDsSize(rootRef, 10, FALLBACK_HEIGHT);
+	let height = useDsSize(rootRef, 11, FALLBACK_HEIGHT);
 
 	return { rowHeight: height, columnHeaderHeight: height };
 }

package/tsconfig.build.json

@@ -1,9 +1,9 @@
-{
-	"extends": "../tsconfig.build.base.json",
-	"compilerOptions": {
-		"rootDir": "./src",
-		"outDir": "./es"
-	},
-	"include": ["src"],
-	"exclude": ["es", "node_modules"]
-}
+{
+	"extends": "../tsconfig.build.base.json",
+	"compilerOptions": {
+		"rootDir": "./src",
+		"outDir": "./es"
+	},
+	"include": ["src"],
+	"exclude": ["es", "node_modules"]
+}

package/tsconfig.json

@@ -1,8 +1,8 @@
-{
-	"extends": "../tsconfig.build.base.json",
-	"compilerOptions": {
-		"rootDir": "./src",
-		"outDir": "./es"
-	},
-	"include": ["src"]
-}
+{
+	"extends": "../tsconfig.build.base.json",
+	"compilerOptions": {
+		"rootDir": "./src",
+		"outDir": "./es"
+	},
+	"include": ["src"]
+}

package/vitest.config.ts

@@ -1,10 +1,10 @@
-import { defineConfig } from "vitest/config";
-
-export default defineConfig({
-	test: {
-		include: ["src/**/*.test.tsx", "src/**/*.test.ts"],
-		environment: "happy-dom",
-		setupFiles: ["src/test/setup.ts"],
-		env: { NODE_ENV: "test" },
-	},
-});
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+	test: {
+		include: ["src/**/*.test.tsx", "src/**/*.test.ts"],
+		environment: "happy-dom",
+		setupFiles: ["src/test/setup.ts"],
+		env: { NODE_ENV: "test" },
+	},
+});