@olenbetong/appframe-ds 1.9.0 → 1.9.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @olenbetong/appframe-ds
 
+## 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.1",
   "description": "Components that bind Designsystemet components to Appframe data objects",
   "type": "module",
   "types": "./es/index.d.ts",

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/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}