@olenbetong/appframe-ds 1.0.3 → 1.2.0

package/src/AfLookup/Lookup.tsx

@@ -1,162 +1,184 @@
-import "./Lookup.css";
-
-import { Button, Textfield, type TextfieldProps } from "@digdir/designsystemet-react";
-import { MagnifyingGlassIcon, XMarkIcon } from "@navikt/aksel-icons";
-import { getLocalizedString } from "@olenbetong/appframe-core";
-import { type DistributiveOmit, useLookupState } from "@olenbetong/appframe-react";
-
-import clsx from "clsx";
-import { useRef } from "react";
-import { createPortal } from "react-dom";
-
-import { LookupCombobox, type LookupComboboxProps } from "./LookupCombobox.js";
-
-export type AfLookupProps<T extends Record<string, unknown>> = DistributiveOmit<LookupComboboxProps<T>, "value"> & {
-	/**
-	 * Allows the user to enter a value manually that might not be in the list.
-	 */
-	editable?: boolean;
-	fullWidth?: boolean;
-	label?: string;
-	value?: string | null;
-	onChange?: (item: T | null) => void;
-	slotProps?: {
-		dialog?: Partial<React.HTMLProps<HTMLDialogElement>>;
-		textField?: Partial<TextfieldProps>;
-	};
-};
-
-export type LookupProps<T extends Record<string, unknown>> = DistributiveOmit<LookupComboboxProps<T>, "value"> & {
-	slotProps?: {
-		dialog?: Partial<React.HTMLProps<HTMLDialogElement>>;
-	};
-	getAnchorElement?: () => Element | null;
-};
-
-export function useLookup<T extends Record<string, unknown>>({
-	getAnchorElement,
-	slotProps,
-	...props
-}: LookupProps<T>) {
-	let { open, openDialog, onKeyDown, dialogRef, anchorName, inputId } = useLookupState({
-		getAnchorElement,
-		scrollParentSelector: "[data-virtualized-scroller]",
-	});
-	let initialSearchValueRef = useRef<string | undefined>(undefined);
-
-	function handleChange(item: T | null) {
-		props.onChange?.(item);
-		dialogRef.current?.close();
-	}
-
-	function handleOpenDialog(searchValue?: string) {
-		initialSearchValueRef.current = searchValue;
-		openDialog();
-	}
-
-	return {
-		open,
-		openDialog: handleOpenDialog,
-		onKeyDown,
-		onChange: handleChange,
-		dialogRef,
-		anchorName,
-		inputId,
-		dialog: createPortal(
-			<dialog
-				ref={dialogRef}
-				className={clsx("ObLookup-dialog", slotProps?.dialog?.className)}
-				onKeyDown={(evt) => evt.stopPropagation()}
-				style={{ positionAnchor: anchorName, ...slotProps?.dialog?.style } as React.CSSProperties}
-			>
-				{open && (
-					<LookupCombobox
-						{...props}
-						initialSearchValue={initialSearchValueRef.current}
-						onClose={() => dialogRef.current?.close()}
-						onChange={handleChange}
-					/>
-				)}
-			</dialog>,
-			document.body,
-			inputId,
-		),
-	};
-}
-
-export function AfLookup<T extends Record<string, unknown>>({
-	fullWidth = false,
-	label,
-	slotProps,
-	value,
-	...props
-}: AfLookupProps<T>) {
-	let { inputId, open: _open, dialog, anchorName, openDialog, onKeyDown } = useLookup<T>(props);
-
-	let hasClear = !!(props.nullable && value && props.onChange);
-
-	function handleInputKeyDown(event: React.KeyboardEvent<HTMLElement>) {
-		let hasModifier = event.ctrlKey || event.altKey || event.metaKey;
-		let isTypeaheadKey = event.key.length === 1 && !hasModifier && !event.nativeEvent.isComposing;
-		if (isTypeaheadKey) {
-			event.preventDefault();
-			event.stopPropagation();
-			openDialog(event.key);
-			return;
-		}
-		onKeyDown(event);
-	}
-
-	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}
-					onClick={() => openDialog()}
-					onKeyDown={handleInputKeyDown}
-					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();
-								props.onChange?.(null);
-								document.getElementById(inputId)?.focus();
-							}}
-						>
-							<XMarkIcon />
-						</Button>
-					)}
-					<Button
-						icon
-						variant="tertiary"
-						data-size="sm"
-						aria-label={getLocalizedString("Search")}
-						onClick={() => openDialog()}
-					>
-						<MagnifyingGlassIcon />
-					</Button>
-				</div>
-			</div>
-			{dialog}
-		</div>
-	);
-}
+import "./Lookup.css";
+
+import { Button, Tag, Textfield, type TextfieldProps } from "@digdir/designsystemet-react";
+import { MagnifyingGlassIcon, XMarkIcon } from "@navikt/aksel-icons";
+import { type DistributiveOmit, useLookupState } from "@olenbetong/appframe-react";
+
+import clsx from "clsx";
+import { useRef } from "react";
+import { createPortal } from "react-dom";
+
+import { LookupCombobox, type LookupComboboxProps } from "./LookupCombobox.js";
+import { getLocalizedString } from "../i18n.js";
+
+export type LabelTag = "optional" | "required";
+
+const LABEL_TAG_COLOR: Record<LabelTag, string> = { optional: "info", required: "warning" };
+const LABEL_TAG_TEXT: Record<LabelTag, string> = { optional: "Optional", required: "Required" };
+
+function labelWithTag(label: string | undefined, labelTag: LabelTag | undefined) {
+	if (!labelTag) {
+		return label;
+	}
+
+	return (
+		<>
+			{label}
+			<Tag className="ObLookup-labelTag" data-color={LABEL_TAG_COLOR[labelTag]} data-size="sm">
+				{getLocalizedString(LABEL_TAG_TEXT[labelTag])}
+			</Tag>
+		</>
+	);
+}
+
+export type AfLookupProps<T extends Record<string, unknown>> = DistributiveOmit<LookupComboboxProps<T>, "value"> & {
+	/**
+	 * Allows the user to enter a value manually that might not be in the list.
+	 */
+	editable?: boolean;
+	fullWidth?: boolean;
+	label?: string;
+	labelTag?: LabelTag;
+	value?: string | null;
+	onChange?: (item: T | null) => void;
+	slotProps?: {
+		dialog?: Partial<React.HTMLProps<HTMLDialogElement>>;
+		textField?: Partial<TextfieldProps>;
+	};
+};
+
+export type LookupProps<T extends Record<string, unknown>> = DistributiveOmit<LookupComboboxProps<T>, "value"> & {
+	slotProps?: {
+		dialog?: Partial<React.HTMLProps<HTMLDialogElement>>;
+	};
+	getAnchorElement?: () => Element | null;
+};
+
+export function useLookup<T extends Record<string, unknown>>({
+	getAnchorElement,
+	slotProps,
+	...props
+}: LookupProps<T>) {
+	let { open, openDialog, onKeyDown, dialogRef, anchorName, inputId } = useLookupState({
+		getAnchorElement,
+		scrollParentSelector: "[data-virtualized-scroller]",
+	});
+	let initialSearchValueRef = useRef<string | undefined>(undefined);
+
+	function handleChange(item: T | null) {
+		props.onChange?.(item);
+		dialogRef.current?.close();
+	}
+
+	function handleOpenDialog(searchValue?: string) {
+		initialSearchValueRef.current = searchValue;
+		openDialog();
+	}
+
+	return {
+		open,
+		openDialog: handleOpenDialog,
+		onKeyDown,
+		onChange: handleChange,
+		dialogRef,
+		anchorName,
+		inputId,
+		dialog: createPortal(
+			<dialog
+				ref={dialogRef}
+				className={clsx("ObLookup-dialog", slotProps?.dialog?.className)}
+				onKeyDown={(evt) => evt.stopPropagation()}
+				style={{ positionAnchor: anchorName, ...slotProps?.dialog?.style } as React.CSSProperties}
+			>
+				{open && (
+					<LookupCombobox
+						{...props}
+						initialSearchValue={initialSearchValueRef.current}
+						onClose={() => dialogRef.current?.close()}
+						onChange={handleChange}
+					/>
+				)}
+			</dialog>,
+			document.body,
+			inputId,
+		),
+	};
+}
+
+export function AfLookup<T extends Record<string, unknown>>({
+	fullWidth = false,
+	label,
+	labelTag,
+	slotProps,
+	value,
+	...props
+}: AfLookupProps<T>) {
+	let { inputId, open: _open, dialog, anchorName, openDialog, onKeyDown } = useLookup<T>(props);
+
+	let hasClear = !!(props.nullable && value && props.onChange);
+
+	function handleInputKeyDown(event: React.KeyboardEvent<HTMLElement>) {
+		let hasModifier = event.ctrlKey || event.altKey || event.metaKey;
+		let isTypeaheadKey = event.key.length === 1 && !hasModifier && !event.nativeEvent.isComposing;
+		if (isTypeaheadKey) {
+			event.preventDefault();
+			event.stopPropagation();
+			openDialog(event.key);
+			return;
+		}
+		onKeyDown(event);
+	}
+
+	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={labelWithTag(label, labelTag)}
+					onClick={() => openDialog()}
+					onKeyDown={handleInputKeyDown}
+					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();
+								props.onChange?.(null);
+								document.getElementById(inputId)?.focus();
+							}}
+						>
+							<XMarkIcon />
+						</Button>
+					)}
+					<Button
+						icon
+						variant="tertiary"
+						data-size="sm"
+						aria-label={getLocalizedString("Search")}
+						onClick={() => openDialog()}
+					>
+						<MagnifyingGlassIcon />
+					</Button>
+				</div>
+			</div>
+			{dialog}
+		</div>
+	);
+}

package/src/AfLookup/LookupCombobox.css

@@ -1,78 +1,78 @@
-.ObCombobox-root {
-	height: 100%;
-	display: grid;
-	grid-template-rows: min-content auto 1fr;
-	gap: 0.5rem;
-
-	overscroll-behavior: contain;
-}
-
-.ObCombobox-actions {
-	display: flex;
-	justify-content: space-between;
-}
-
-.ObCombobox-listWrap {
-	overflow: hidden;
-	min-height: 0;
-	border: 1px solid rgb(0 0 0 / 0.12);
-	border-radius: 0.25rem;
-	background-color: white;
-}
-
-.ObCombobox-list {
-	border: 1px solid rgb(0 0 0 / 0.06);
-	height: 100%;
-	overflow-y: hidden;
-	overscroll-behavior: contain;
-	list-style: none;
-	margin: 0;
-	padding: 0;
-}
-
-.ObCombobox-input {
-	background-color: white;
-}
-
-.ObCombobox-listItem {
-	--active-color: oklch(from var(--brand-secondary, #999) l c h / 50%);
-	cursor: pointer;
-
-	&.active {
-		background-color: var(--active-color);
-	}
-
-	&:hover {
-		background-color: rgb(0 0 0 / 0.06);
-	}
-
-	&.active:hover {
-		background-color: oklch(from var(--active-color) calc(l + 0.1) calc(c - 0.04) h);
-	}
-}
-
-.ObCombobox-progress {
-	position: relative;
-	height: 4px;
-	overflow: hidden;
-	background-color: rgb(0 0 0 / 0.08);
-}
-
-.ObCombobox-progress-bar {
-	position: absolute;
-	top: 0;
-	left: -100%;
-	height: 100%;
-	width: 50%;
-	background-color: var(--ds-color-brand-base-default);
-	animation: ObCombobox-progress-anim 1.5s ease-in-out infinite;
-}
-
-@keyframes ObCombobox-progress-anim {
-	0% {
-		left: -100%;
-	}
-	100% {
-		left: 200%;
-	}
-}
+.ObCombobox-root {
+	height: 100%;
+	display: grid;
+	grid-template-rows: min-content auto 1fr;
+	gap: 0.5rem;
+
+	overscroll-behavior: contain;
+}
+
+.ObCombobox-actions {
+	display: flex;
+	justify-content: space-between;
+}
+
+.ObCombobox-listWrap {
+	overflow: hidden;
+	min-height: 0;
+	border: 1px solid rgb(0 0 0 / 0.12);
+	border-radius: 0.25rem;
+	background-color: white;
+}
+
+.ObCombobox-list {
+	border: 1px solid rgb(0 0 0 / 0.06);
+	height: 100%;
+	overflow-y: hidden;
+	overscroll-behavior: contain;
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+.ObCombobox-input {
+	background-color: white;
+}
+
+.ObCombobox-listItem {
+	--active-color: oklch(from var(--brand-secondary, #999) l c h / 50%);
+	cursor: pointer;
+
+	&.active {
+		background-color: var(--active-color);
+	}
+
+	&:hover {
+		background-color: rgb(0 0 0 / 0.06);
+	}
+
+	&.active:hover {
+		background-color: oklch(from var(--active-color) calc(l + 0.1) calc(c - 0.04) h);
+	}
+}
+
+.ObCombobox-progress {
+	position: relative;
+	height: 4px;
+	overflow: hidden;
+	background-color: rgb(0 0 0 / 0.08);
+}
+
+.ObCombobox-progress-bar {
+	position: absolute;
+	top: 0;
+	left: -100%;
+	height: 100%;
+	width: 50%;
+	background-color: var(--ds-color-brand-base-default);
+	animation: ObCombobox-progress-anim 1.5s ease-in-out infinite;
+}
+
+@keyframes ObCombobox-progress-anim {
+	0% {
+		left: -100%;
+	}
+	100% {
+		left: 200%;
+	}
+}