@olenbetong/appframe-ds 1.6.1 → 1.7.0

package/src/AfLookup/LookupEdit.tsx

@@ -1,130 +1,130 @@
-import "./Lookup.css";
-
-import { Button, Textfield, type TextfieldProps } from "@digdir/designsystemet-react";
-import { MagnifyingGlassIcon, XMarkIcon } from "@navikt/aksel-icons";
-import type { DistributiveOmit } from "@olenbetong/appframe-react";
-
-import clsx from "clsx";
-import type React from "react";
-
-import type { LookupComboboxProps } from "./LookupCombobox.js";
-import { useLookup } from "./Lookup.js";
-import { getLocalizedString } from "../i18n.js";
-
-export type AfLookupEditProps<T extends Record<string, unknown>> = DistributiveOmit<
-	LookupComboboxProps<T>,
-	"value" | "onChange"
-> & {
-	/**
-	 * Allows the user to enter a value manually that might not be in the list.
-	 */
-	editable?: boolean;
-	fullWidth?: boolean;
-	label?: string;
-	value?: string | null;
-	lookupField: keyof T;
-	onChange?: (evt: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
-	slotProps?: {
-		dialog?: Partial<React.HTMLProps<HTMLDialogElement>>;
-		textField?: Partial<TextfieldProps>;
-	};
-};
-
-export function AfLookupEdit<T extends Record<string, unknown>>({
-	fullWidth = false,
-	label,
-	onChange,
-	slotProps,
-	nullable,
-	lookupField,
-	value,
-	...props
-}: AfLookupEditProps<T>) {
-	let { inputId, dialog, anchorName, openDialog, onKeyDown } = useLookup<T>({
-		...props,
-		nullable,
-		slotProps: { dialog: slotProps?.dialog },
-		onChange: (item) => applyValue(item),
-	});
-
-	// The popup selects a single value from the dataset: the item's lookupField
-	// is written to the input through the native value setter so the same
-	// change event fires whether the user types or picks from the list/grid.
-	function applyValue(item: T | null) {
-		let input = document.getElementById(inputId) as HTMLInputElement;
-		let nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set;
-
-		if (input && nativeInputValueSetter) {
-			nativeInputValueSetter.call(input, item ? String(item[lookupField]) : "");
-			input.dispatchEvent(new Event("input", { bubbles: true }));
-		}
-	}
-
-	function handleKeyDown(event: React.KeyboardEvent<HTMLElement>) {
-		if (event.key === "Enter") {
-			event.preventDefault();
-			event.stopPropagation();
-			openDialog();
-		} else {
-			onKeyDown(event);
-		}
-	}
-
-	let hasClear = !!(nullable && value && onChange);
-
-	return (
-		<div style={{ anchorName } as React.CSSProperties}>
-			<div
-				className="ObLookup-inputWrap"
-				style={
-					{
-						display: fullWidth ? "block" : "inline-block",
-						"--ObLookup-buttons-width": hasClear ? "5.5rem" : "3rem",
-					} as React.CSSProperties
-				}
-			>
-				<Textfield
-					id={inputId}
-					value={value ?? ""}
-					label={label}
-					onChange={onChange}
-					onKeyDown={handleKeyDown}
-					className={clsx(slotProps?.textField?.className, "ObLookup-input")}
-					{...(slotProps?.textField as any)}
-					style={{ width: fullWidth ? "100%" : undefined, ...slotProps?.textField?.style }}
-				/>
-				<div className="ObLookup-buttons">
-					{hasClear && (
-						<Button
-							icon
-							variant="tertiary"
-							data-size="sm"
-							aria-label={getLocalizedString("Clear")}
-							onKeyDown={(evt) => evt.stopPropagation()}
-							onClick={(evt) => {
-								evt.stopPropagation();
-								applyValue(null);
-								document.getElementById(inputId)?.focus();
-							}}
-						>
-							<XMarkIcon />
-						</Button>
-					)}
-					<Button
-						icon
-						variant="tertiary"
-						data-size="sm"
-						aria-label={getLocalizedString("Search")}
-						onClick={(evt) => {
-							evt.stopPropagation();
-							openDialog();
-						}}
-					>
-						<MagnifyingGlassIcon />
-					</Button>
-				</div>
-			</div>
-			{dialog}
-		</div>
-	);
-}
+import "./Lookup.css";
+
+import { Button, Textfield, type TextfieldProps } from "@digdir/designsystemet-react";
+import { MagnifyingGlassIcon, XMarkIcon } from "@navikt/aksel-icons";
+import type { DistributiveOmit } from "@olenbetong/appframe-react";
+
+import clsx from "clsx";
+import type React from "react";
+
+import type { LookupComboboxProps } from "./LookupCombobox.js";
+import { useLookup } from "./Lookup.js";
+import { getLocalizedString } from "../i18n.js";
+
+export type AfLookupEditProps<T extends Record<string, unknown>> = DistributiveOmit<
+	LookupComboboxProps<T>,
+	"value" | "onChange"
+> & {
+	/**
+	 * Allows the user to enter a value manually that might not be in the list.
+	 */
+	editable?: boolean;
+	fullWidth?: boolean;
+	label?: string;
+	value?: string | null;
+	lookupField: keyof T;
+	onChange?: (evt: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+	slotProps?: {
+		dialog?: Partial<React.HTMLProps<HTMLDialogElement>>;
+		textField?: Partial<TextfieldProps>;
+	};
+};
+
+export function AfLookupEdit<T extends Record<string, unknown>>({
+	fullWidth = false,
+	label,
+	onChange,
+	slotProps,
+	nullable,
+	lookupField,
+	value,
+	...props
+}: AfLookupEditProps<T>) {
+	let { inputId, dialog, anchorName, openDialog, onKeyDown } = useLookup<T>({
+		...props,
+		nullable,
+		slotProps: { dialog: slotProps?.dialog },
+		onChange: (item) => applyValue(item),
+	});
+
+	// The popup selects a single value from the dataset: the item's lookupField
+	// is written to the input through the native value setter so the same
+	// change event fires whether the user types or picks from the list/grid.
+	function applyValue(item: T | null) {
+		let input = document.getElementById(inputId) as HTMLInputElement;
+		let nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set;
+
+		if (input && nativeInputValueSetter) {
+			nativeInputValueSetter.call(input, item ? String(item[lookupField]) : "");
+			input.dispatchEvent(new Event("input", { bubbles: true }));
+		}
+	}
+
+	function handleKeyDown(event: React.KeyboardEvent<HTMLElement>) {
+		if (event.key === "Enter") {
+			event.preventDefault();
+			event.stopPropagation();
+			openDialog();
+		} else {
+			onKeyDown(event);
+		}
+	}
+
+	let hasClear = !!(nullable && value && onChange);
+
+	return (
+		<div style={{ anchorName } as React.CSSProperties}>
+			<div
+				className="ObLookup-inputWrap"
+				style={
+					{
+						display: fullWidth ? "block" : "inline-block",
+						"--ObLookup-buttons-width": hasClear ? "5.5rem" : "3rem",
+					} as React.CSSProperties
+				}
+			>
+				<Textfield
+					id={inputId}
+					value={value ?? ""}
+					label={label}
+					onChange={onChange}
+					onKeyDown={handleKeyDown}
+					className={clsx(slotProps?.textField?.className, "ObLookup-input")}
+					{...(slotProps?.textField as any)}
+					style={{ width: fullWidth ? "100%" : undefined, ...slotProps?.textField?.style }}
+				/>
+				<div className="ObLookup-buttons">
+					{hasClear && (
+						<Button
+							icon
+							variant="tertiary"
+							data-size="sm"
+							aria-label={getLocalizedString("Clear")}
+							onKeyDown={(evt) => evt.stopPropagation()}
+							onClick={(evt) => {
+								evt.stopPropagation();
+								applyValue(null);
+								document.getElementById(inputId)?.focus();
+							}}
+						>
+							<XMarkIcon />
+						</Button>
+					)}
+					<Button
+						icon
+						variant="tertiary"
+						data-size="sm"
+						aria-label={getLocalizedString("Search")}
+						onClick={(evt) => {
+							evt.stopPropagation();
+							openDialog();
+						}}
+					>
+						<MagnifyingGlassIcon />
+					</Button>
+				</div>
+			</div>
+			{dialog}
+		</div>
+	);
+}

package/src/AfLookup/LookupGrid.css

@@ -1,145 +1,145 @@
-.ObLookupGrid-root {
-	height: 100%;
-	overflow: hidden;
-	overscroll-behavior: contain;
-	border: 1px solid var(--ds-color-neutral-border-subtle);
-}
-
-/* No text selection while a column is being dragged */
-.ObLookupGrid-root[data-resizing] {
-	user-select: none;
-	cursor: col-resize;
-}
-
-/*
- * The header does not scroll itself: the list is the only scroll container, and the header
- * row inside is moved sideways with a transform to follow it.
- */
-.ObLookupGrid-header {
-	height: 40px;
-	overflow: hidden;
-	border-bottom: 1px solid var(--ds-color-neutral-border-default);
-	background-color: var(--ds-color-neutral-background-tinted);
-	font-weight: 600;
-}
-
-.ObLookupGrid-headerRow {
-	display: grid;
-	align-items: center;
-	height: 100%;
-	box-sizing: border-box;
-}
-
-.ObLookupGrid-headerCell {
-	position: relative;
-	display: flex;
-	align-items: center;
-	height: 100%;
-	padding: 0 8px;
-	overflow: hidden;
-}
-
-.ObLookupGrid-headerText {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-/* A sortable header: the whole cell text is the button, the arrow shows on hover and when sorted */
-.ObLookupGrid-sortButton {
-	display: flex;
-	align-items: center;
-	gap: var(--ds-size-1, 0.25rem);
-	min-width: 0;
-	max-width: 100%;
-	padding: 0;
-	border: 0;
-	background: none;
-	color: inherit;
-	font: inherit;
-	cursor: pointer;
-	text-align: start;
-
-	.ObLookupGrid-sortIcon {
-		flex-shrink: 0;
-		font-size: 1.125em;
-		opacity: 0;
-		transition: opacity 0.15s ease-out;
-	}
-
-	&:hover .ObLookupGrid-sortIcon {
-		opacity: 0.5;
-	}
-
-	&.sorted .ObLookupGrid-sortIcon {
-		opacity: 1;
-	}
-}
-
-/* The drag handle: a wide hit area at the end of the cell with a thin line drawn in it */
-.ObLookupGrid-resizer {
-	position: absolute;
-	inset-block: 0;
-	inset-inline-end: 0;
-	width: 9px;
-	cursor: col-resize;
-	touch-action: none;
-
-	&::after {
-		content: "";
-		position: absolute;
-		inset-block: 25%;
-		inset-inline-end: 4px;
-		width: 1px;
-		background-color: var(--ds-color-neutral-border-default);
-	}
-
-	&:hover::after {
-		inset-block: 15%;
-		width: 2px;
-		background-color: var(--ds-color-neutral-border-strong);
-	}
-}
-
-/* Keeps the client width stable whether or not there are enough rows for a scrollbar */
-.ObLookupGrid-list {
-	scrollbar-gutter: stable;
-}
-
-.ObLookupGrid-row {
-	display: grid;
-	align-items: center;
-	box-sizing: border-box;
-	cursor: pointer;
-	border-bottom: 1px solid var(--ds-color-neutral-border-subtle);
-
-	&.active {
-		background-color: var(--ds-color-neutral-surface-active);
-	}
-
-	&:hover {
-		background-color: var(--ds-color-neutral-surface-hover);
-	}
-}
-
-.ObLookupGrid-cell {
-	padding: 0 8px;
-	height: 100%;
-	display: flex;
-	align-items: center;
-	overflow: hidden;
-	white-space: nowrap;
-
-	&.active {
-		outline: 2px solid var(--ds-color-neutral-border-strong);
-		outline-offset: -2px;
-	}
-}
-
-/* text-overflow does not apply to text directly inside a flex container, so it sits on this span */
-.ObLookupGrid-cellText {
-	min-width: 0;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
+.ObLookupGrid-root {
+	height: 100%;
+	overflow: hidden;
+	overscroll-behavior: contain;
+	border: 1px solid var(--ds-color-neutral-border-subtle);
+}
+
+/* No text selection while a column is being dragged */
+.ObLookupGrid-root[data-resizing] {
+	user-select: none;
+	cursor: col-resize;
+}
+
+/*
+ * The header does not scroll itself: the list is the only scroll container, and the header
+ * row inside is moved sideways with a transform to follow it.
+ */
+.ObLookupGrid-header {
+	height: 40px;
+	overflow: hidden;
+	border-bottom: 1px solid var(--ds-color-neutral-border-default);
+	background-color: var(--ds-color-neutral-background-tinted);
+	font-weight: 600;
+}
+
+.ObLookupGrid-headerRow {
+	display: grid;
+	align-items: center;
+	height: 100%;
+	box-sizing: border-box;
+}
+
+.ObLookupGrid-headerCell {
+	position: relative;
+	display: flex;
+	align-items: center;
+	height: 100%;
+	padding: 0 8px;
+	overflow: hidden;
+}
+
+.ObLookupGrid-headerText {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+/* A sortable header: the whole cell text is the button, the arrow shows on hover and when sorted */
+.ObLookupGrid-sortButton {
+	display: flex;
+	align-items: center;
+	gap: var(--ds-size-1, 0.25rem);
+	min-width: 0;
+	max-width: 100%;
+	padding: 0;
+	border: 0;
+	background: none;
+	color: inherit;
+	font: inherit;
+	cursor: pointer;
+	text-align: start;
+
+	.ObLookupGrid-sortIcon {
+		flex-shrink: 0;
+		font-size: 1.125em;
+		opacity: 0;
+		transition: opacity 0.15s ease-out;
+	}
+
+	&:hover .ObLookupGrid-sortIcon {
+		opacity: 0.5;
+	}
+
+	&.sorted .ObLookupGrid-sortIcon {
+		opacity: 1;
+	}
+}
+
+/* The drag handle: a wide hit area at the end of the cell with a thin line drawn in it */
+.ObLookupGrid-resizer {
+	position: absolute;
+	inset-block: 0;
+	inset-inline-end: 0;
+	width: 9px;
+	cursor: col-resize;
+	touch-action: none;
+
+	&::after {
+		content: "";
+		position: absolute;
+		inset-block: 25%;
+		inset-inline-end: 4px;
+		width: 1px;
+		background-color: var(--ds-color-neutral-border-default);
+	}
+
+	&:hover::after {
+		inset-block: 15%;
+		width: 2px;
+		background-color: var(--ds-color-neutral-border-strong);
+	}
+}
+
+/* Keeps the client width stable whether or not there are enough rows for a scrollbar */
+.ObLookupGrid-list {
+	scrollbar-gutter: stable;
+}
+
+.ObLookupGrid-row {
+	display: grid;
+	align-items: center;
+	box-sizing: border-box;
+	cursor: pointer;
+	border-bottom: 1px solid var(--ds-color-neutral-border-subtle);
+
+	&.active {
+		background-color: var(--ds-color-neutral-surface-active);
+	}
+
+	&:hover {
+		background-color: var(--ds-color-neutral-surface-hover);
+	}
+}
+
+.ObLookupGrid-cell {
+	padding: 0 8px;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	overflow: hidden;
+	white-space: nowrap;
+
+	&.active {
+		outline: 2px solid var(--ds-color-neutral-border-strong);
+		outline-offset: -2px;
+	}
+}
+
+/* text-overflow does not apply to text directly inside a flex container, so it sits on this span */
+.ObLookupGrid-cellText {
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}