@olenbetong/appframe-ds 1.0.3 → 1.2.0

package/src/autocomplete/Combobox.tsx

@@ -1,286 +1,286 @@
-import "./Autocomplete.css";
-
-import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
-import { ChipRemovable } from "@digdir/designsystemet-react";
-import { ChevronDownIcon } from "@navikt/aksel-icons";
-import { getLocalizedString } from "@olenbetong/appframe-core";
-import { useEffect, useId, useMemo, useRef } from "react";
-
-import { AutocompleteFrame } from "./AutocompleteFrame.js";
-import type { AutocompleteBaseProps, AutocompleteChangeReason, AutocompleteValue } from "./types.js";
-import {
-	areOptionsEqual,
-	defaultFilterOptions,
-	defaultGetOptionLabel,
-	groupOptions,
-	handleInputValueChange,
-	mapChangeReason,
-	useControlled,
-} from "./utils.js";
-
-export interface ComboboxProps<Option, Multiple extends boolean | undefined = false> extends AutocompleteBaseProps<
-	Option,
-	Multiple
-> {
-	/**
-	 * The selected option(s). Use together with `onChange` for a controlled
-	 * component.
-	 */
-	value?: AutocompleteValue<Option, Multiple>;
-	/**
-	 * The initially selected option(s) when uncontrolled.
-	 */
-	defaultValue?: AutocompleteValue<Option, Multiple>;
-	/**
-	 * Called when the selection changes.
-	 */
-	onChange?: (
-		event: Event | undefined,
-		value: AutocompleteValue<Option, Multiple>,
-		reason: AutocompleteChangeReason,
-	) => void;
-}
-
-/**
- * A select-from-a-list input built on Base UI's `Combobox`, styled with
- * Designsystemet tokens. The user must pick one of the options — free text is
- * only used to filter the list.
- *
- * The API follows MUI's `Autocomplete`: `options`, `value`/`onChange`,
- * `getOptionLabel`, `isOptionEqualToValue`, `filterOptions`, `renderOption`,
- * `groupBy` and `multiple` all behave the same way. Designsystemet field props
- * (`label`, `description`, `error`, `data-size`, `data-color`) are supported on
- * top.
- *
- * Use `Autocomplete` instead when the input should accept free text and the
- * options are only suggestions.
- *
- * @example
- * ```jsx
- * <Combobox
- *   label="Country"
- *   options={countries}
- *   getOptionLabel={(country) => country.name}
- *   isOptionEqualToValue={(a, b) => a.id === b.id}
- *   value={country}
- *   onChange={(_event, value) => setCountry(value)}
- * />
- * ```
- */
-export function Combobox<Option, Multiple extends boolean | undefined = false>(props: ComboboxProps<Option, Multiple>) {
-	let {
-		options,
-		multiple,
-		value: valueProp,
-		defaultValue,
-		onChange,
-		inputValue: inputValueProp,
-		onInputChange,
-		getOptionLabel = defaultGetOptionLabel,
-		getOptionKey,
-		getOptionDisabled,
-		isOptionEqualToValue,
-		groupBy,
-		filterOptions,
-		renderOption,
-		renderChipLabel,
-		noOptionsText,
-		loadingText,
-		loading,
-		limit = -1,
-		autoHighlight,
-		openOnFocus = true,
-		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;
-
-	let generatedId = useId();
-	let id = idProp ?? generatedId;
-
-	let emptyValue = (multiple ? [] : null) as AutocompleteValue<Option, Multiple>;
-	let [value, setValue] = useControlled(valueProp, defaultValue ?? emptyValue);
-	// The input shows the selected option's label. Base UI keeps it in sync while
-	// the user interacts, but not when the selection is set from the outside.
-	let selectedLabel = multiple || value == null ? "" : getOptionLabel(value as Option);
-	let [inputValue, setInputValue] = useControlled(inputValueProp, selectedLabel);
-	// `null` until the first sync, so a value that is already set on mount is synced too.
-	let previousLabel = useRef<string | null>(null);
-
-	useEffect(() => {
-		if (previousLabel.current === selectedLabel) return;
-
-		let firstSync = previousLabel.current === null;
-		previousLabel.current = selectedLabel;
-
-		// Nothing to correct on mount when no option is selected, and blanking the input would
-		// throw away an initial `inputValue` the caller set deliberately.
-		if (firstSync && selectedLabel === "") return;
-
-		setInputValue(selectedLabel);
-		// `setInputValue` is a no-op when the caller controls `inputValue`, so the label has to
-		// be reported instead — otherwise a controlled input stays empty next to a selected
-		// value. Mirrors MUI, which reports the same thing with the reason `"reset"`.
-		onInputChange?.(undefined, selectedLabel, "reset");
-	}, [selectedLabel, setInputValue, onInputChange]);
-
-	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]) as Option[];
-
-	function handleValueChange(next: any, details: { event?: Event; reason: string }) {
-		let deselected = multiple && Array.isArray(next) && next.length < selectedOptions.length;
-		let reason = deselected ? "removeOption" : mapChangeReason(details.reason, next);
-
-		setValue(next as AutocompleteValue<Option, Multiple>);
-		onChange?.(details.event, next as AutocompleteValue<Option, Multiple>, reason);
-	}
-
-	function handleRemoveChip(option: Option) {
-		let next = selectedOptions.filter((item) => !areOptionsEqual(item, option, isOptionEqualToValue));
-		setValue(next as AutocompleteValue<Option, Multiple>);
-		onChange?.(undefined, next as AutocompleteValue<Option, Multiple>, "removeOption");
-	}
-
-	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 (
-			<BaseCombobox.Item
-				key={getOptionKey?.(option) ?? getOptionLabel(option)}
-				className="ObAutocomplete-item"
-				value={option}
-				index={index}
-				disabled={getOptionDisabled?.(option)}
-			>
-				{multiple && (
-					<BaseCombobox.ItemIndicator className="ObAutocomplete-itemIndicator">✓</BaseCombobox.ItemIndicator>
-				)}
-				<span className="ObAutocomplete-itemContent">
-					{renderOption?.(option, { index, inputValue, selected }) ?? getOptionLabel(option)}
-				</span>
-			</BaseCombobox.Item>
-		);
-	}
-
-	function renderListItem(item: any, index: number) {
-		if (!groupBy) return renderItem(item as Option, index);
-
-		return (
-			<BaseCombobox.Group key={item.value} items={item.items}>
-				<BaseCombobox.GroupLabel className="ObAutocomplete-groupLabel">{item.value}</BaseCombobox.GroupLabel>
-				<BaseCombobox.Collection>
-					{(option: Option, optionIndex: number) => renderItem(option, optionIndex)}
-				</BaseCombobox.Collection>
-			</BaseCombobox.Group>
-		);
-	}
-
-	return (
-		<BaseCombobox.Root
-			items={options as any}
-			filteredItems={filteredItems as any}
-			filter={null}
-			multiple={multiple as any}
-			value={value as any}
-			onValueChange={handleValueChange}
-			inputValue={inputValue}
-			onInputValueChange={(next, details) => handleInputValueChange(next, details, setInputValue, onInputChange)}
-			itemToStringLabel={getOptionLabel as (option: unknown) => string}
-			isItemEqualToValue={isOptionEqualToValue as ((option: unknown, value: unknown) => boolean) | 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={
-					<BaseCombobox.Trigger
-						className="ObAutocomplete-button ObAutocomplete-trigger"
-						disabled={disabled || readOnly}
-						aria-label={getLocalizedString("Open")}
-					>
-						<ChevronDownIcon aria-hidden fontSize="1.25em" />
-					</BaseCombobox.Trigger>
-				}
-				emptyContent={
-					loading ? (loadingText ?? getLocalizedString("Loading")) : (noOptionsText ?? getLocalizedString("No options"))
-				}
-				renderListItem={renderListItem}
-			/>
-		</BaseCombobox.Root>
-	);
-}
+import "./Autocomplete.css";
+
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
+import { ChipRemovable } from "@digdir/designsystemet-react";
+import { ChevronDownIcon } from "@navikt/aksel-icons";
+import { useEffect, useId, useMemo, useRef } from "react";
+
+import { AutocompleteFrame } from "./AutocompleteFrame.js";
+import type { AutocompleteBaseProps, AutocompleteChangeReason, AutocompleteValue } from "./types.js";
+import {
+	areOptionsEqual,
+	defaultFilterOptions,
+	defaultGetOptionLabel,
+	groupOptions,
+	handleInputValueChange,
+	mapChangeReason,
+	useControlled,
+} from "./utils.js";
+import { getLocalizedString } from "../i18n.js";
+
+export interface ComboboxProps<Option, Multiple extends boolean | undefined = false> extends AutocompleteBaseProps<
+	Option,
+	Multiple
+> {
+	/**
+	 * The selected option(s). Use together with `onChange` for a controlled
+	 * component.
+	 */
+	value?: AutocompleteValue<Option, Multiple>;
+	/**
+	 * The initially selected option(s) when uncontrolled.
+	 */
+	defaultValue?: AutocompleteValue<Option, Multiple>;
+	/**
+	 * Called when the selection changes.
+	 */
+	onChange?: (
+		event: Event | undefined,
+		value: AutocompleteValue<Option, Multiple>,
+		reason: AutocompleteChangeReason,
+	) => void;
+}
+
+/**
+ * A select-from-a-list input built on Base UI's `Combobox`, styled with
+ * Designsystemet tokens. The user must pick one of the options — free text is
+ * only used to filter the list.
+ *
+ * The API follows MUI's `Autocomplete`: `options`, `value`/`onChange`,
+ * `getOptionLabel`, `isOptionEqualToValue`, `filterOptions`, `renderOption`,
+ * `groupBy` and `multiple` all behave the same way. Designsystemet field props
+ * (`label`, `description`, `error`, `data-size`, `data-color`) are supported on
+ * top.
+ *
+ * Use `Autocomplete` instead when the input should accept free text and the
+ * options are only suggestions.
+ *
+ * @example
+ * ```jsx
+ * <Combobox
+ *   label="Country"
+ *   options={countries}
+ *   getOptionLabel={(country) => country.name}
+ *   isOptionEqualToValue={(a, b) => a.id === b.id}
+ *   value={country}
+ *   onChange={(_event, value) => setCountry(value)}
+ * />
+ * ```
+ */
+export function Combobox<Option, Multiple extends boolean | undefined = false>(props: ComboboxProps<Option, Multiple>) {
+	let {
+		options,
+		multiple,
+		value: valueProp,
+		defaultValue,
+		onChange,
+		inputValue: inputValueProp,
+		onInputChange,
+		getOptionLabel = defaultGetOptionLabel,
+		getOptionKey,
+		getOptionDisabled,
+		isOptionEqualToValue,
+		groupBy,
+		filterOptions,
+		renderOption,
+		renderChipLabel,
+		noOptionsText,
+		loadingText,
+		loading,
+		limit = -1,
+		autoHighlight,
+		openOnFocus = true,
+		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;
+
+	let generatedId = useId();
+	let id = idProp ?? generatedId;
+
+	let emptyValue = (multiple ? [] : null) as AutocompleteValue<Option, Multiple>;
+	let [value, setValue] = useControlled(valueProp, defaultValue ?? emptyValue);
+	// The input shows the selected option's label. Base UI keeps it in sync while
+	// the user interacts, but not when the selection is set from the outside.
+	let selectedLabel = multiple || value == null ? "" : getOptionLabel(value as Option);
+	let [inputValue, setInputValue] = useControlled(inputValueProp, selectedLabel);
+	// `null` until the first sync, so a value that is already set on mount is synced too.
+	let previousLabel = useRef<string | null>(null);
+
+	useEffect(() => {
+		if (previousLabel.current === selectedLabel) return;
+
+		let firstSync = previousLabel.current === null;
+		previousLabel.current = selectedLabel;
+
+		// Nothing to correct on mount when no option is selected, and blanking the input would
+		// throw away an initial `inputValue` the caller set deliberately.
+		if (firstSync && selectedLabel === "") return;
+
+		setInputValue(selectedLabel);
+		// `setInputValue` is a no-op when the caller controls `inputValue`, so the label has to
+		// be reported instead — otherwise a controlled input stays empty next to a selected
+		// value. Mirrors MUI, which reports the same thing with the reason `"reset"`.
+		onInputChange?.(undefined, selectedLabel, "reset");
+	}, [selectedLabel, setInputValue, onInputChange]);
+
+	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]) as Option[];
+
+	function handleValueChange(next: any, details: { event?: Event; reason: string }) {
+		let deselected = multiple && Array.isArray(next) && next.length < selectedOptions.length;
+		let reason = deselected ? "removeOption" : mapChangeReason(details.reason, next);
+
+		setValue(next as AutocompleteValue<Option, Multiple>);
+		onChange?.(details.event, next as AutocompleteValue<Option, Multiple>, reason);
+	}
+
+	function handleRemoveChip(option: Option) {
+		let next = selectedOptions.filter((item) => !areOptionsEqual(item, option, isOptionEqualToValue));
+		setValue(next as AutocompleteValue<Option, Multiple>);
+		onChange?.(undefined, next as AutocompleteValue<Option, Multiple>, "removeOption");
+	}
+
+	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 (
+			<BaseCombobox.Item
+				key={getOptionKey?.(option) ?? getOptionLabel(option)}
+				className="ObAutocomplete-item"
+				value={option}
+				index={index}
+				disabled={getOptionDisabled?.(option)}
+			>
+				{multiple && (
+					<BaseCombobox.ItemIndicator className="ObAutocomplete-itemIndicator">✓</BaseCombobox.ItemIndicator>
+				)}
+				<span className="ObAutocomplete-itemContent">
+					{renderOption?.(option, { index, inputValue, selected }) ?? getOptionLabel(option)}
+				</span>
+			</BaseCombobox.Item>
+		);
+	}
+
+	function renderListItem(item: any, index: number) {
+		if (!groupBy) return renderItem(item as Option, index);
+
+		return (
+			<BaseCombobox.Group key={item.value} items={item.items}>
+				<BaseCombobox.GroupLabel className="ObAutocomplete-groupLabel">{item.value}</BaseCombobox.GroupLabel>
+				<BaseCombobox.Collection>
+					{(option: Option, optionIndex: number) => renderItem(option, optionIndex)}
+				</BaseCombobox.Collection>
+			</BaseCombobox.Group>
+		);
+	}
+
+	return (
+		<BaseCombobox.Root
+			items={options as any}
+			filteredItems={filteredItems as any}
+			filter={null}
+			multiple={multiple as any}
+			value={value as any}
+			onValueChange={handleValueChange}
+			inputValue={inputValue}
+			onInputValueChange={(next, details) => handleInputValueChange(next, details, setInputValue, onInputChange)}
+			itemToStringLabel={getOptionLabel as (option: unknown) => string}
+			isItemEqualToValue={isOptionEqualToValue as ((option: unknown, value: unknown) => boolean) | 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={
+					<BaseCombobox.Trigger
+						className="ObAutocomplete-button ObAutocomplete-trigger"
+						disabled={disabled || readOnly}
+						aria-label={getLocalizedString("Open")}
+					>
+						<ChevronDownIcon aria-hidden fontSize="1.25em" />
+					</BaseCombobox.Trigger>
+				}
+				emptyContent={
+					loading ? (loadingText ?? getLocalizedString("Loading")) : (noOptionsText ?? getLocalizedString("No options"))
+				}
+				renderListItem={renderListItem}
+			/>
+		</BaseCombobox.Root>
+	);
+}

package/src/autocomplete/index.ts

@@ -1,4 +1,4 @@
-export * from "./Autocomplete.js";
-export * from "./Combobox.js";
-export type * from "./types.js";
-export { createFilterOptions, type CreateFilterOptionsConfig } from "./utils.js";
+export * from "./Autocomplete.js";
+export * from "./Combobox.js";
+export type * from "./types.js";
+export { createFilterOptions, type CreateFilterOptionsConfig } from "./utils.js";