@olenbetong/appframe-ds 0.6.0 → 0.7.0

package/src/autocomplete/Combobox.tsx

@@ -0,0 +1,260 @@
+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 { useId, useMemo } 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,
+		"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);
+	let [inputValue, setInputValue] = useControlled(inputValueProp, "");
+
+	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>{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}
+				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

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

package/src/autocomplete/types.ts

@@ -0,0 +1,200 @@
+import type { ReactNode, Ref } from "react";
+
+export type AutocompleteSize = "sm" | "md" | "lg";
+
+/**
+ * Resolved type of the `value`/`onChange` payload, mirroring MUI's
+ * `AutocompleteValue`.
+ */
+export type AutocompleteValue<
+	Option,
+	Multiple extends boolean | undefined,
+	FreeSolo extends boolean | undefined = false,
+> = Multiple extends true
+	? Array<FreeSolo extends true ? Option | string : Option>
+	: (FreeSolo extends true ? Option | string : Option) | null;
+
+export type AutocompleteChangeReason = "selectOption" | "removeOption" | "createOption" | "clear" | "blur";
+
+export type AutocompleteInputChangeReason = "input" | "reset" | "clear";
+
+export interface AutocompleteRenderOptionState {
+	/**
+	 * Index of the option in the filtered list.
+	 */
+	index: number;
+	/**
+	 * Current text in the input.
+	 */
+	inputValue: string;
+	/**
+	 * Whether the option is part of the current value.
+	 */
+	selected: boolean;
+}
+
+export interface AutocompleteFilterOptionsState<Option> {
+	inputValue: string;
+	getOptionLabel: (option: Option) => string;
+}
+
+/**
+ * Props shared by `Autocomplete` and `Combobox`. Modelled on the MUI
+ * `Autocomplete` API, with Designsystemet field props (`label`,
+ * `description`, `error`, `data-size`, `data-color`) on top.
+ */
+export interface AutocompleteBaseProps<Option, Multiple extends boolean | undefined> {
+	/**
+	 * The options to choose from.
+	 */
+	options: readonly Option[];
+	/**
+	 * Whether several options can be selected. Selected options are rendered
+	 * as chips above the input.
+	 * @default false
+	 */
+	multiple?: Multiple;
+	/**
+	 * Text rendered in the input when it is empty.
+	 */
+	placeholder?: string;
+	/**
+	 * Label for the field.
+	 */
+	label?: ReactNode;
+	/**
+	 * Description rendered below the label.
+	 */
+	description?: ReactNode;
+	/**
+	 * Validation message rendered below the input. Also puts the field in an
+	 * invalid state.
+	 */
+	error?: ReactNode;
+	/**
+	 * Returns the string used as the label of an option, both in the list and
+	 * in the input.
+	 * @default (option) => option.label ?? String(option)
+	 */
+	getOptionLabel?: (option: Option) => string;
+	/**
+	 * Returns the React key for an option.
+	 * @default getOptionLabel
+	 */
+	getOptionKey?: (option: Option) => React.Key;
+	/**
+	 * Returns whether an option should be unselectable.
+	 */
+	getOptionDisabled?: (option: Option) => boolean;
+	/**
+	 * Compares an option to a value. Required when the value is not
+	 * referentially equal to the option.
+	 * @default Object.is
+	 */
+	isOptionEqualToValue?: (option: Option, value: Option) => boolean;
+	/**
+	 * Groups the options under headers. Options must already be sorted by
+	 * group, the same way MUI's `groupBy` works.
+	 */
+	groupBy?: (option: Option) => string;
+	/**
+	 * Filters the options against the current input value. Use
+	 * `createFilterOptions` to tweak the default behaviour.
+	 */
+	filterOptions?: (options: readonly Option[], state: AutocompleteFilterOptionsState<Option>) => Option[];
+	/**
+	 * Renders the content of an option in the list.
+	 * @default getOptionLabel
+	 */
+	renderOption?: (option: Option, state: AutocompleteRenderOptionState) => ReactNode;
+	/**
+	 * Renders the label of a selected chip when `multiple` is set.
+	 * @default getOptionLabel
+	 */
+	renderChipLabel?: (option: Option) => ReactNode;
+	/**
+	 * Rendered in the popup when there are no options to show.
+	 */
+	noOptionsText?: ReactNode;
+	/**
+	 * Rendered in the popup instead of `noOptionsText` while `loading` is set
+	 * and there are no options.
+	 */
+	loadingText?: ReactNode;
+	/**
+	 * Shows a loading indicator in the input.
+	 * @default false
+	 */
+	loading?: boolean;
+	/**
+	 * Hides the clear button.
+	 * @default false
+	 */
+	disableClearable?: boolean;
+	/**
+	 * The maximum number of options rendered in the list. `-1` renders all.
+	 * @default -1
+	 */
+	limit?: number;
+	/**
+	 * Highlights the first option as the user types.
+	 * @default false
+	 */
+	autoHighlight?: boolean;
+	/**
+	 * Opens the popup when the input is clicked.
+	 * @default true
+	 */
+	openOnFocus?: boolean;
+	/**
+	 * Makes the control fill the width of its container.
+	 * @default true
+	 */
+	fullWidth?: boolean;
+	/**
+	 * The input value. Use together with `onInputChange` for a controlled input.
+	 */
+	inputValue?: string;
+	/**
+	 * Called when the text in the input changes.
+	 */
+	onInputChange?: (event: Event | undefined, value: string, reason: AutocompleteInputChangeReason) => void;
+	/**
+	 * Whether the popup is open. Use together with `onOpenChange`.
+	 */
+	open?: boolean;
+	/**
+	 * Whether the popup is open initially when uncontrolled.
+	 */
+	defaultOpen?: boolean;
+	/**
+	 * Called when the popup opens or closes.
+	 */
+	onOpenChange?: (open: boolean) => void;
+	/**
+	 * Traps interaction inside the popup while it is open.
+	 * @default false
+	 */
+	modal?: boolean;
+	disabled?: boolean;
+	readOnly?: boolean;
+	required?: boolean;
+	/**
+	 * Name used when the field is submitted as part of a form.
+	 */
+	name?: string;
+	id?: string;
+	className?: string;
+	style?: React.CSSProperties;
+	/**
+	 * Classes for the bordered control that wraps the chips and the input.
+	 */
+	controlClassName?: string;
+	/**
+	 * Classes for the popup element.
+	 */
+	popupClassName?: string;
+	inputRef?: Ref<HTMLInputElement>;
+	"data-size"?: AutocompleteSize;
+	"data-color"?: string;
+}

package/src/autocomplete/utils.ts

@@ -0,0 +1,183 @@
+import { useCallback, useRef, useState } from "react";
+
+import type {
+	AutocompleteChangeReason,
+	AutocompleteFilterOptionsState,
+	AutocompleteInputChangeReason,
+} from "./types.js";
+
+/**
+ * Default label resolver: uses `label`, then `name`, then the value itself.
+ */
+export function defaultGetOptionLabel(option: unknown): string {
+	if (option == null) return "";
+	if (typeof option === "string") return option;
+	if (typeof option === "object") {
+		let record = option as Record<string, unknown>;
+		if (typeof record.label === "string") return record.label;
+		if (typeof record.name === "string") return record.name;
+	}
+
+	return String(option);
+}
+
+export interface CreateFilterOptionsConfig<Option> {
+	/**
+	 * Removes diacritics before matching.
+	 * @default true
+	 */
+	ignoreAccents?: boolean;
+	/**
+	 * Matches case insensitively.
+	 * @default true
+	 */
+	ignoreCase?: boolean;
+	/**
+	 * Where in the option label the query has to match.
+	 * @default "any"
+	 */
+	matchFrom?: "any" | "start";
+	/**
+	 * The maximum number of options returned.
+	 */
+	limit?: number;
+	/**
+	 * Trims the query before matching.
+	 * @default false
+	 */
+	trim?: boolean;
+	/**
+	 * Returns the string the query is matched against.
+	 */
+	stringify?: (option: Option) => string;
+}
+
+/**
+ * Creates a filter function for the `filterOptions` prop, equivalent to MUI's
+ * `createFilterOptions`.
+ *
+ * @example
+ * ```jsx
+ * let filterOptions = createFilterOptions({ matchFrom: "start", limit: 20 });
+ * <Combobox options={options} filterOptions={filterOptions} />
+ * ```
+ */
+export function createFilterOptions<Option>(config: CreateFilterOptionsConfig<Option> = {}) {
+	let { ignoreAccents = true, ignoreCase = true, limit, matchFrom = "any", stringify, trim = false } = config;
+
+	return (options: readonly Option[], state: AutocompleteFilterOptionsState<Option>) => {
+		let input = trim ? state.inputValue.trim() : state.inputValue;
+		if (ignoreCase) input = input.toLowerCase();
+		if (ignoreAccents) input = stripDiacritics(input);
+
+		let filtered = input
+			? options.filter((option) => {
+					let candidate = (stringify ?? state.getOptionLabel)(option);
+					if (ignoreCase) candidate = candidate.toLowerCase();
+					if (ignoreAccents) candidate = stripDiacritics(candidate);
+
+					return matchFrom === "start" ? candidate.startsWith(input) : candidate.includes(input);
+				})
+			: [...options];
+
+		return typeof limit === "number" ? filtered.slice(0, limit) : filtered;
+	};
+}
+
+function stripDiacritics(value: string) {
+	return value.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
+}
+
+export const defaultFilterOptions = createFilterOptions<unknown>();
+
+export interface OptionGroup<Option> {
+	/**
+	 * Group header text. Named `value` because Base UI uses it as the group key.
+	 */
+	value: string;
+	items: Option[];
+	[key: string]: unknown;
+}
+
+/**
+ * Splits an already sorted list of options into consecutive groups, the same
+ * way MUI's `groupBy` works.
+ */
+export function groupOptions<Option>(options: readonly Option[], groupBy: (option: Option) => string) {
+	let groups: OptionGroup<Option>[] = [];
+
+	for (let option of options) {
+		let group = groupBy(option);
+		let last = groups[groups.length - 1];
+
+		if (last && last.value === group) {
+			last.items.push(option);
+		} else {
+			groups.push({ value: group, items: [option] });
+		}
+	}
+
+	return groups;
+}
+
+/**
+ * State that is controlled when `controlled` is not `undefined`, and
+ * uncontrolled otherwise.
+ */
+export function useControlled<T>(controlled: T | undefined, defaultValue: T) {
+	let [uncontrolled, setUncontrolled] = useState(defaultValue);
+	let isControlled = useRef(controlled !== undefined).current;
+	let value = isControlled ? (controlled as T) : uncontrolled;
+
+	let setValue = useCallback(
+		(next: T) => {
+			if (!isControlled) setUncontrolled(next);
+		},
+		[isControlled],
+	);
+
+	return [value, setValue] as const;
+}
+
+/**
+ * Compares two options, falling back to reference equality like MUI does.
+ */
+export function areOptionsEqual<Option>(
+	a: Option,
+	b: Option,
+	isOptionEqualToValue?: (option: Option, value: Option) => boolean,
+) {
+	return isOptionEqualToValue ? isOptionEqualToValue(a, b) : Object.is(a, b);
+}
+
+/**
+ * Maps a Base UI change reason to the MUI-style reason.
+ */
+export function mapChangeReason(reason: string, next: unknown): AutocompleteChangeReason {
+	if (reason === "clear-press" || reason === "input-clear") return "clear";
+	if (reason === "chip-remove-press") return "removeOption";
+	if (next == null || (Array.isArray(next) && next.length === 0)) return "clear";
+
+	return "selectOption";
+}
+
+function mapInputChangeReason(reason: string): AutocompleteInputChangeReason {
+	if (reason === "input-change") return "input";
+	if (reason === "input-clear" || reason === "clear-press") return "clear";
+
+	return "reset";
+}
+
+/**
+ * Keeps the input value state in sync and forwards the change to
+ * `onInputChange` with a MUI-style reason.
+ */
+export function handleInputValueChange(
+	next: string,
+	details: { event?: Event; reason: string },
+	setInputValue: (value: string) => void,
+	onInputChange?: (event: Event | undefined, value: string, reason: AutocompleteInputChangeReason) => void,
+) {
+	setInputValue(next);
+	onInputChange?.(details.event, next, mapInputChangeReason(details.reason));
+}

package/src/index.ts

@@ -1,4 +1,5 @@
 export * from "./AfLookup/index.js";
+export * from "./autocomplete/index.js";
 export * from "./binding/index.js";
 export * from "./input/index.js";
 export * from "./layout/index.js";
@@ -6,3 +7,4 @@ export * from "./list/index.js";
 export * from "./page/index.js";
 export * from "./paper/index.js";
 export * from "./progress/index.js";
+export * from "./sortable/index.js";

package/src/sortable/DropIndicator.css

@@ -0,0 +1,51 @@
+:root {
+	--ob-drop-indicator-thickness: 0.125rem;
+	--ob-drop-indicator-color: #3f3fa3;
+	--ob-drop-indicator-terminal-size: 0.75rem;
+}
+
+.ObDropIndicator-root {
+	position: absolute;
+	z-index: 10;
+
+	display: flex;
+	align-items: center;
+
+	pointer-events: none;
+
+	&::before {
+		content: "";
+
+		border: var(--ob-drop-indicator-thickness) solid var(--ob-drop-indicator-color);
+		border-radius: 50%;
+
+		width: var(--ob-drop-indicator-terminal-size);
+		height: var(--ob-drop-indicator-terminal-size);
+	}
+
+	&::after {
+		content: "";
+
+		height: var(--ob-drop-indicator-thickness);
+		flex-grow: 1;
+		background-color: var(--ob-drop-indicator-color);
+	}
+
+	&.ObDropIndicator-top,
+	&.ObDropIndicator-bottom {
+		height: var(--ob-drop-indicator-thickness);
+
+		left: calc(-1 * var(--ob-drop-indicator-terminal-size) / 2);
+		width: calc(100% + var(--ob-drop-indicator-terminal-size) / 2);
+	}
+
+	&.ObDropIndicator-top {
+		top: var(--ob-drop-indicator-gap, 0rem);
+		transform: translateY(calc(var(--ob-drop-indicator-thickness) / -2));
+	}
+
+	&.ObDropIndicator-bottom {
+		bottom: var(--ob-drop-indicator-gap, 0rem);
+		transform: translateY(calc(var(--ob-drop-indicator-thickness) / 2));
+	}
+}