@olenbetong/appframe-ds 1.2.0 → 1.3.0

package/src/autocomplete/Autocomplete.tsx

@@ -1,320 +1,320 @@
-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 { 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";
-import { getLocalizedString } from "../i18n.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,
-		"aria-label": ariaLabel,
-		"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 className="ObAutocomplete-itemContent">
-					{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}
-				aria-label={ariaLabel}
-				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>
-	);
-}
+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 { 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";
+import { getLocalizedString } from "../i18n.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,
+		"aria-label": ariaLabel,
+		"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 className="ObAutocomplete-itemContent">
+					{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}
+				aria-label={ariaLabel}
+				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>
+	);
+}