@olenbetong/appframe-ds 0.6.0 → 0.7.0

package/src/autocomplete/Autocomplete.tsx

@@ -0,0 +1,316 @@
+import "./Autocomplete.css";
+
+import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete";
+import { ChipRemovable } from "@digdir/designsystemet-react";
+import { ChevronDownIcon } from "@navikt/aksel-icons";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import { useId, useMemo, useRef } from "react";
+
+import { AutocompleteFrame } from "./AutocompleteFrame.js";
+import type { AutocompleteBaseProps, AutocompleteChangeReason, AutocompleteValue } from "./types.js";
+import {
+	areOptionsEqual,
+	defaultFilterOptions,
+	defaultGetOptionLabel,
+	groupOptions,
+	handleInputValueChange,
+	useControlled,
+} from "./utils.js";
+
+export interface AutocompleteProps<
+	Option,
+	Multiple extends boolean | undefined = false,
+	FreeSolo extends boolean | undefined = false,
+> extends AutocompleteBaseProps<Option, Multiple> {
+	/**
+	 * The selected option(s). Use together with `onChange` for a controlled
+	 * component.
+	 */
+	value?: AutocompleteValue<Option, Multiple, FreeSolo>;
+	/**
+	 * The initially selected option(s) when uncontrolled.
+	 */
+	defaultValue?: AutocompleteValue<Option, Multiple, FreeSolo>;
+	/**
+	 * Called when the selection changes.
+	 */
+	onChange?: (
+		event: Event | undefined,
+		value: AutocompleteValue<Option, Multiple, FreeSolo>,
+		reason: AutocompleteChangeReason,
+	) => void;
+	/**
+	 * Allows the value to be arbitrary text that is not part of `options`.
+	 * Pressing <kbd>Enter</kbd> without a highlighted option commits the text.
+	 * @default false
+	 */
+	freeSolo?: FreeSolo;
+}
+
+/**
+ * A text input with suggestions, built on Base UI's `Autocomplete` and styled
+ * with Designsystemet tokens. The options are suggestions: with `freeSolo` the
+ * user may commit any text.
+ *
+ * The API follows MUI's `Autocomplete`: `options`, `value`/`onChange`,
+ * `inputValue`/`onInputChange`, `getOptionLabel`, `filterOptions`,
+ * `renderOption`, `groupBy`, `multiple` and `freeSolo` all behave the same way.
+ * Designsystemet field props (`label`, `description`, `error`, `data-size`,
+ * `data-color`) are supported on top.
+ *
+ * Use `Combobox` instead when the user must pick one of the options.
+ *
+ * @example
+ * ```jsx
+ * <Autocomplete
+ *   freeSolo
+ *   label="Search"
+ *   options={suggestions}
+ *   inputValue={query}
+ *   onInputChange={(_event, value) => setQuery(value)}
+ *   onChange={(_event, value) => runSearch(value)}
+ * />
+ * ```
+ */
+export function Autocomplete<
+	Option,
+	Multiple extends boolean | undefined = false,
+	FreeSolo extends boolean | undefined = false,
+>(props: AutocompleteProps<Option, Multiple, FreeSolo>) {
+	let {
+		options,
+		multiple,
+		freeSolo,
+		value: valueProp,
+		defaultValue,
+		onChange,
+		inputValue: inputValueProp,
+		onInputChange,
+		getOptionLabel = defaultGetOptionLabel,
+		getOptionKey,
+		getOptionDisabled,
+		isOptionEqualToValue,
+		groupBy,
+		filterOptions,
+		renderOption,
+		renderChipLabel,
+		noOptionsText,
+		loadingText,
+		loading,
+		limit = -1,
+		autoHighlight,
+		openOnFocus = false,
+		open,
+		defaultOpen,
+		onOpenChange,
+		modal,
+		disabled,
+		readOnly,
+		required,
+		name,
+		id: idProp,
+		className,
+		style,
+		controlClassName,
+		popupClassName,
+		fullWidth,
+		disableClearable,
+		placeholder,
+		inputRef,
+		"data-size": size,
+		"data-color": color,
+	} = props;
+
+	type Value = AutocompleteValue<Option, Multiple, FreeSolo>;
+
+	let generatedId = useId();
+	let id = idProp ?? generatedId;
+
+	let emptyValue = (multiple ? [] : null) as Value;
+	let [value, setValue] = useControlled(valueProp, defaultValue ?? emptyValue);
+	let initialInputValue = multiple || value == null ? "" : getOptionLabel(value as Option);
+	let [inputValue, setInputValue] = useControlled(inputValueProp, initialInputValue);
+	let highlightedRef = useRef<Option | undefined>(undefined);
+
+	let filteredOptions = useMemo(() => {
+		let filter = (filterOptions ?? defaultFilterOptions) as (
+			options: readonly Option[],
+			state: { inputValue: string; getOptionLabel: (option: Option) => string },
+		) => Option[];
+
+		return filter(options, { inputValue, getOptionLabel });
+	}, [options, inputValue, filterOptions, getOptionLabel]);
+
+	let filteredItems = useMemo(
+		() => (groupBy ? groupOptions(filteredOptions, groupBy) : filteredOptions),
+		[filteredOptions, groupBy],
+	);
+
+	let selectedOptions = useMemo(() => (multiple ? ((value ?? []) as Option[]) : []), [multiple, value]);
+
+	function commit(next: Value, reason: AutocompleteChangeReason, event?: Event) {
+		setValue(next);
+		onChange?.(event, next, reason);
+	}
+
+	function handleSelectOption(option: Option, event?: Event) {
+		if (multiple) {
+			let alreadySelected = selectedOptions.some((item) => areOptionsEqual(item, option, isOptionEqualToValue));
+			if (alreadySelected) return;
+
+			commit([...selectedOptions, option] as Value, "selectOption", event);
+			setInputValue("");
+			onInputChange?.(event, "", "reset");
+		} else {
+			commit(option as unknown as Value, "selectOption", event);
+		}
+	}
+
+	function handleRemoveChip(option: Option) {
+		let next = selectedOptions.filter((item) => !areOptionsEqual(item, option, isOptionEqualToValue));
+		commit(next as Value, "removeOption");
+	}
+
+	function handleInputKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
+		if (event.key !== "Enter" || !freeSolo || highlightedRef.current !== undefined) return;
+
+		let text = inputValue.trim();
+		if (!text) return;
+
+		if (multiple) {
+			commit([...selectedOptions, text] as Value, "createOption", event.nativeEvent);
+			setInputValue("");
+			onInputChange?.(event.nativeEvent, "", "reset");
+		} else {
+			commit(text as unknown as Value, "createOption", event.nativeEvent);
+		}
+	}
+
+	function handleInputBlur(event: React.FocusEvent<HTMLInputElement>) {
+		if (freeSolo) return;
+
+		// Without free text, the input only makes sense as a reflection of the
+		// current selection, so anything the user typed is discarded.
+		let text = multiple || value == null ? "" : getOptionLabel(value as Option);
+		if (text !== inputValue) {
+			setInputValue(text);
+			onInputChange?.(event.nativeEvent, text, "reset");
+		}
+	}
+
+	let chips =
+		multiple && selectedOptions.length > 0
+			? selectedOptions.map((option) => (
+					<ChipRemovable
+						key={getOptionKey?.(option) ?? getOptionLabel(option)}
+						data-size={size}
+						disabled={disabled || readOnly}
+						onClick={() => handleRemoveChip(option)}
+					>
+						{renderChipLabel?.(option) ?? getOptionLabel(option)}
+					</ChipRemovable>
+				))
+			: undefined;
+
+	function renderItem(option: Option, index: number) {
+		let selected = multiple
+			? selectedOptions.some((item) => areOptionsEqual(item, option, isOptionEqualToValue))
+			: value != null && areOptionsEqual(value as Option, option, isOptionEqualToValue);
+
+		return (
+			<BaseAutocomplete.Item
+				key={getOptionKey?.(option) ?? getOptionLabel(option)}
+				className="ObAutocomplete-item"
+				value={option}
+				index={index}
+				disabled={getOptionDisabled?.(option)}
+				data-selected={selected || undefined}
+				onClick={(event) => handleSelectOption(option, event.nativeEvent)}
+			>
+				<span>{renderOption?.(option, { index, inputValue, selected }) ?? getOptionLabel(option)}</span>
+			</BaseAutocomplete.Item>
+		);
+	}
+
+	function renderListItem(item: any, index: number) {
+		if (!groupBy) return renderItem(item as Option, index);
+
+		return (
+			<BaseAutocomplete.Group key={item.value} items={item.items}>
+				<BaseAutocomplete.GroupLabel className="ObAutocomplete-groupLabel">{item.value}</BaseAutocomplete.GroupLabel>
+				<BaseAutocomplete.Collection>
+					{(option: Option, optionIndex: number) => renderItem(option, optionIndex)}
+				</BaseAutocomplete.Collection>
+			</BaseAutocomplete.Group>
+		);
+	}
+
+	return (
+		<BaseAutocomplete.Root
+			items={options as any}
+			filteredItems={filteredItems as any}
+			filter={null}
+			value={inputValue}
+			onValueChange={(next, details) => {
+				handleInputValueChange(next, details, setInputValue, onInputChange);
+
+				if (details.reason === "clear-press" || details.reason === "input-clear") {
+					commit(emptyValue, "clear", details.event);
+				}
+			}}
+			itemToStringValue={getOptionLabel as (option: unknown) => string}
+			onItemHighlighted={(item) => {
+				highlightedRef.current = item as Option | undefined;
+			}}
+			disabled={disabled}
+			readOnly={readOnly}
+			required={required}
+			name={name}
+			id={id}
+			open={open}
+			defaultOpen={defaultOpen}
+			onOpenChange={(nextOpen) => onOpenChange?.(nextOpen)}
+			openOnInputClick={openOnFocus}
+			autoHighlight={autoHighlight}
+			limit={limit}
+			modal={modal}
+		>
+			<AutocompleteFrame
+				id={id}
+				label={props.label}
+				description={props.description}
+				error={props.error}
+				className={className}
+				style={style}
+				controlClassName={controlClassName}
+				popupClassName={popupClassName}
+				fullWidth={fullWidth}
+				size={size}
+				color={color}
+				disabled={disabled}
+				readOnly={readOnly}
+				required={required}
+				placeholder={placeholder}
+				loading={loading}
+				disableClearable={disableClearable}
+				inputRef={inputRef}
+				chips={chips}
+				trigger={
+					<BaseAutocomplete.Trigger
+						className="ObAutocomplete-button ObAutocomplete-trigger"
+						disabled={disabled || readOnly}
+						aria-label={getLocalizedString("Open")}
+					>
+						<ChevronDownIcon aria-hidden fontSize="1.25em" />
+					</BaseAutocomplete.Trigger>
+				}
+				emptyContent={
+					loading ? (loadingText ?? getLocalizedString("Loading")) : (noOptionsText ?? getLocalizedString("No options"))
+				}
+				renderListItem={renderListItem}
+				onInputKeyDown={handleInputKeyDown}
+				onInputBlur={handleInputBlur}
+			/>
+		</BaseAutocomplete.Root>
+	);
+}

package/src/autocomplete/AutocompleteFrame.tsx

@@ -0,0 +1,149 @@
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
+import { FieldDescription, Label, Spinner, ValidationMessage } from "@digdir/designsystemet-react";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import { XMarkIcon } from "@navikt/aksel-icons";
+import clsx from "clsx";
+import type { ReactNode, Ref } from "react";
+
+import type { AutocompleteSize } from "./types.js";
+
+export interface AutocompleteFrameProps {
+	id?: string;
+	label?: ReactNode;
+	description?: ReactNode;
+	error?: ReactNode;
+	className?: string;
+	style?: React.CSSProperties;
+	controlClassName?: string;
+	popupClassName?: string;
+	fullWidth?: boolean;
+	size?: AutocompleteSize;
+	color?: string;
+	disabled?: boolean;
+	readOnly?: boolean;
+	required?: boolean;
+	placeholder?: string;
+	loading?: boolean;
+	disableClearable?: boolean;
+	inputRef?: Ref<HTMLInputElement>;
+	/**
+	 * Chips for the selected values, rendered above the input.
+	 */
+	chips?: ReactNode;
+	/**
+	 * The trigger button, which differs between `Autocomplete` and `Combobox`.
+	 */
+	trigger?: ReactNode;
+	/**
+	 * Rendered in the popup when the filtered list is empty.
+	 */
+	emptyContent?: ReactNode;
+	/**
+	 * Renders an entry of the filtered list. Receives either an option or, when
+	 * `groupBy` is used, a group.
+	 */
+	renderListItem: (item: any, index: number) => ReactNode;
+	onInputKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+	onInputBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+}
+
+/**
+ * Shared chrome for `Autocomplete` and `Combobox`: the Designsystemet field
+ * (label, description, validation message), the bordered control holding the
+ * chips and the input, and the popup with the option list.
+ *
+ * All the parts used here are shared between the Base UI `Autocomplete` and
+ * `Combobox` namespaces, so they can be imported from `combobox` regardless of
+ * which root the caller renders.
+ */
+export function AutocompleteFrame({
+	id,
+	label,
+	description,
+	error,
+	className,
+	style,
+	controlClassName,
+	popupClassName,
+	fullWidth = true,
+	size,
+	color,
+	disabled,
+	readOnly,
+	required,
+	placeholder,
+	loading,
+	disableClearable,
+	inputRef,
+	chips,
+	trigger,
+	emptyContent,
+	renderListItem,
+	onInputKeyDown,
+	onInputBlur,
+}: AutocompleteFrameProps) {
+	return (
+		// Designsystemet's `Field` is a custom element that expects to own the
+		// layout, so the root here is a plain grid instead.
+		<div
+			className={clsx("ObAutocomplete-root", className)}
+			style={style}
+			data-size={size}
+			data-color={color}
+			data-full-width={fullWidth}
+		>
+			{label && (
+				<Label htmlFor={id} data-size={size}>
+					{label}
+					{required && <span aria-hidden> *</span>}
+				</Label>
+			)}
+			{description && <FieldDescription data-size={size}>{description}</FieldDescription>}
+			<div
+				className={clsx("ObAutocomplete-control", controlClassName)}
+				data-invalid={error ? true : undefined}
+				data-disabled={disabled ? true : undefined}
+			>
+				{chips && <div className="ObAutocomplete-chips">{chips}</div>}
+				<BaseCombobox.InputGroup className="ObAutocomplete-inputGroup">
+					<BaseCombobox.Input
+						id={id}
+						ref={inputRef}
+						className="ObAutocomplete-input"
+						placeholder={placeholder}
+						disabled={disabled}
+						readOnly={readOnly}
+						required={required}
+						aria-invalid={error ? true : undefined}
+						onKeyDown={onInputKeyDown}
+						onBlur={onInputBlur}
+					/>
+					{loading && (
+						<span className="ObAutocomplete-spinner">
+							<Spinner aria-label={getLocalizedString("Loading")} data-size="xs" />
+						</span>
+					)}
+					{!disableClearable && (
+						<BaseCombobox.Clear
+							className="ObAutocomplete-button ObAutocomplete-clear"
+							disabled={disabled || readOnly}
+							aria-label={getLocalizedString("Clear")}
+						>
+							<XMarkIcon aria-hidden fontSize="1.25em" />
+						</BaseCombobox.Clear>
+					)}
+					{trigger}
+				</BaseCombobox.InputGroup>
+			</div>
+			{error && <ValidationMessage data-size={size}>{error}</ValidationMessage>}
+			<BaseCombobox.Portal>
+				<BaseCombobox.Positioner className="ObAutocomplete-positioner" sideOffset={4}>
+					<BaseCombobox.Popup className={clsx("ObAutocomplete-popup", popupClassName)} data-size={size}>
+						<BaseCombobox.Empty className="ObAutocomplete-empty">{emptyContent}</BaseCombobox.Empty>
+						<BaseCombobox.List className="ObAutocomplete-list">{renderListItem}</BaseCombobox.List>
+					</BaseCombobox.Popup>
+				</BaseCombobox.Positioner>
+			</BaseCombobox.Portal>
+		</div>
+	);
+}