@puzzle-ui/ui 0.0.0-stage → 0.1.0

package/dist/components/forms/autocomplete/index.js

@@ -0,0 +1,532 @@
+"use client";
+import { Popout } from "../../overlays/popout/index.js";
+import { filterAutocompleteOptions, findEnabledAutocompleteIndex, groupAutocompleteOptions, normalizeAutocompleteText } from "./autocomplete.utils.js";
+import "./autocomplete.css";
+import { cn, resolveResponsiveValue } from "@puzzle-ui/core";
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/forms/autocomplete/index.tsx
+const areSelectionsEqual = (previous, next, multiple) => {
+	if (!multiple) return Object.is(previous, next);
+	if (!Array.isArray(previous) || !Array.isArray(next)) return Object.is(previous, next);
+	return previous.length === next.length && previous.every((value, index) => Object.is(value, next[index]));
+};
+const Autocomplete = (props) => {
+	const { options, label, description, error, disabled = false, required = false, readOnly = false, freeSolo = false, name, form, serializeValue, isOptionEqualToValue, filterOptions, renderOption, value, defaultValue, onChange, inputValue, defaultInputValue, onInputChange, open, defaultOpen = false, onOpenChange, openOnFocus = false, autoHighlight = false, clearOnBlur: clearOnBlurProp, clearOnEscape = false, clearable = true, clearLabel = "Clear selection", removeOptionLabel = "Remove", loading = false, loadingText = "Loading options...", noOptionsText = "No options found", requiredMessage = "Please select an option.", closeOnSelect: closeOnSelectProp, maxSelected, filterSelectedOptions, maxOptions, position = "bottom", align = "start", offset = 8, collisionPadding = 8, matchTriggerWidth = true, menuMaxHeight = "18rem", size = "md", fullWidth = false, className, inputClassName, popoverClassName, menuClassName, optionClassName, id, ref, onFocus, onBlur, onKeyDown, autoComplete = "off", placeholder = "Search options", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...inputProps } = props;
+	const multiple = props.multiple === true;
+	const controlledValue = Object.prototype.hasOwnProperty.call(props, "value");
+	const controlledInputValue = inputValue !== void 0;
+	const controlledOpen = open !== void 0;
+	const baseId = useId();
+	const inputId = id ?? `${baseId}-input`;
+	const labelId = `${baseId}-label`;
+	const descriptionId = `${baseId}-description`;
+	const errorId = `${baseId}-error`;
+	const listboxId = `${baseId}-listbox`;
+	const initialValue = multiple ? defaultValue ?? [] : defaultValue;
+	const initialSingleValue = controlledValue ? value : defaultValue;
+	const initialOption = initialSingleValue === void 0 ? void 0 : options.find((option) => isOptionEqualToValue ? isOptionEqualToValue(option, initialSingleValue) : Object.is(option.value, initialSingleValue));
+	const [internalValue, setInternalValue] = useState(initialValue);
+	const [internalInputValue, setInternalInputValue] = useState(() => defaultInputValue ?? (multiple ? "" : initialOption?.label ?? (initialSingleValue === void 0 ? "" : String(initialSingleValue))));
+	const [internalOpen, setInternalOpen] = useState(defaultOpen);
+	const [activeIndex, setActiveIndex] = useState(-1);
+	const inputRef = useRef(null);
+	const listboxRef = useRef(null);
+	const previousValueRef = useRef(controlledValue ? value : initialValue);
+	const handleInputRef = useCallback((node) => {
+		inputRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [ref]);
+	const selectedValue = controlledValue ? value : internalValue;
+	const selectedValues = multiple ? selectedValue ?? [] : selectedValue === void 0 ? [] : [selectedValue];
+	const resolvedInputValue = controlledInputValue ? inputValue ?? "" : internalInputValue;
+	const isOpen = disabled ? false : open ?? internalOpen;
+	const closeOnSelect = closeOnSelectProp ?? !multiple;
+	const clearOnBlur = clearOnBlurProp ?? !freeSolo;
+	const hasError = error !== void 0 && error !== null && error !== false;
+	const isInvalid = hasError || ariaInvalid !== void 0 && ariaInvalid !== false && ariaInvalid !== "false";
+	const errorContent = error === true ? "Invalid value" : error;
+	const responsiveSize = resolveResponsiveValue(size, "md");
+	const responsiveFullWidth = resolveResponsiveValue(fullWidth, false);
+	const isEqual = useCallback((option, selected) => isOptionEqualToValue ? isOptionEqualToValue(option, selected) : Object.is(option.value, selected), [isOptionEqualToValue]);
+	const getValueLabel = useCallback((selected) => {
+		return options.find((candidate) => isEqual(candidate, selected))?.label ?? String(selected);
+	}, [options, isEqual]);
+	const isOptionSelected = useCallback((option) => selectedValues.some((selected) => isEqual(option, selected)), [selectedValues, isEqual]);
+	const changeInputValue = useCallback((nextValue, reason) => {
+		if (!controlledInputValue) setInternalInputValue(nextValue);
+		onInputChange?.(nextValue, reason);
+	}, [controlledInputValue, onInputChange]);
+	const changeOpenState = useCallback((nextOpen) => {
+		if (disabled && nextOpen) return;
+		if (!controlledOpen) setInternalOpen(nextOpen);
+		onOpenChange?.(nextOpen);
+	}, [
+		controlledOpen,
+		disabled,
+		onOpenChange
+	]);
+	const updateValue = useCallback((nextValue) => {
+		previousValueRef.current = nextValue;
+		if (!controlledValue) setInternalValue(nextValue);
+		if (multiple) onChange?.([...nextValue]);
+		else onChange?.(nextValue);
+	}, [
+		controlledValue,
+		multiple,
+		onChange
+	]);
+	useEffect(() => {
+		if (areSelectionsEqual(previousValueRef.current, selectedValue, multiple)) return;
+		previousValueRef.current = selectedValue;
+		if (controlledInputValue) return;
+		const nextInputValue = multiple ? "" : selectedValues.length > 0 ? getValueLabel(selectedValues[0]) : "";
+		changeInputValue(nextInputValue, "reset");
+	}, [
+		selectedValue,
+		selectedValues,
+		multiple,
+		controlledInputValue,
+		getValueLabel,
+		changeInputValue
+	]);
+	const filteredOptions = useMemo(() => {
+		const candidates = filterOptions ? filterOptions(options, resolvedInputValue) : filterAutocompleteOptions(options, resolvedInputValue);
+		const visibleOptions = filterSelectedOptions ?? multiple ? candidates.filter((option) => !isOptionSelected(option)) : [...candidates];
+		return maxOptions === void 0 ? visibleOptions : visibleOptions.slice(0, Math.max(0, maxOptions));
+	}, [
+		options,
+		resolvedInputValue,
+		filterOptions,
+		filterSelectedOptions,
+		multiple,
+		isOptionSelected,
+		maxOptions
+	]);
+	const navigationOptions = useMemo(() => filteredOptions.map((option) => ({
+		...option,
+		disabled: option.disabled === true || multiple && maxSelected !== void 0 && selectedValues.length >= maxSelected && !isOptionSelected(option)
+	})), [
+		filteredOptions,
+		multiple,
+		maxSelected,
+		selectedValues.length,
+		isOptionSelected
+	]);
+	const groupedOptions = useMemo(() => groupAutocompleteOptions(filteredOptions), [filteredOptions]);
+	const findEnabledIndex = (startIndex, direction, wrap = true) => findEnabledAutocompleteIndex(navigationOptions, startIndex, direction, wrap);
+	const isRequiredSatisfied = selectedValues.length > 0 || freeSolo && resolvedInputValue.trim().length > 0;
+	useEffect(() => {
+		inputRef.current?.setCustomValidity(required && !disabled && !isRequiredSatisfied ? requiredMessage : "");
+	}, [
+		required,
+		disabled,
+		isRequiredSatisfied,
+		requiredMessage
+	]);
+	useEffect(() => {
+		if (!isOpen) {
+			if (activeIndex !== -1) setActiveIndex(-1);
+			return;
+		}
+		if (activeIndex >= 0 && (!navigationOptions[activeIndex] || navigationOptions[activeIndex].disabled)) {
+			setActiveIndex(-1);
+			return;
+		}
+		if (activeIndex === -1 && autoHighlight) {
+			const firstIndex = findEnabledIndex(-1, 1, false);
+			if (firstIndex !== -1) setActiveIndex(firstIndex);
+		}
+	}, [
+		isOpen,
+		activeIndex,
+		navigationOptions,
+		autoHighlight
+	]);
+	const activeOptionId = activeIndex >= 0 && navigationOptions[activeIndex] && !navigationOptions[activeIndex].disabled ? `${listboxId}-option-${activeIndex}` : void 0;
+	useEffect(() => {
+		if (!isOpen || !activeOptionId) return;
+		(listboxRef.current?.ownerDocument.getElementById(activeOptionId))?.scrollIntoView?.({ block: "nearest" });
+	}, [isOpen, activeOptionId]);
+	const moveActive = (direction, amount = 1, wrap = true) => {
+		let nextIndex = activeIndex;
+		for (let step = 0; step < amount; step++) {
+			const startIndex = nextIndex === -1 ? direction === 1 ? -1 : navigationOptions.length : nextIndex;
+			const candidateIndex = findEnabledIndex(startIndex, direction, wrap);
+			if (candidateIndex === -1) break;
+			nextIndex = candidateIndex;
+		}
+		if (nextIndex !== -1) setActiveIndex(nextIndex);
+	};
+	const isAtSelectionLimit = (option) => multiple && maxSelected !== void 0 && selectedValues.length >= maxSelected && !isOptionSelected(option);
+	const handleOptionSelect = (option) => {
+		if (disabled || option.disabled || isAtSelectionLimit(option)) return;
+		if (multiple) {
+			const nextValues = isOptionSelected(option) ? selectedValues.filter((selected) => !isEqual(option, selected)) : [...selectedValues, option.value];
+			updateValue(nextValues);
+			changeInputValue("", "select");
+			if (closeOnSelect) changeOpenState(false);
+			else {
+				setActiveIndex(-1);
+				changeOpenState(true);
+			}
+		} else {
+			updateValue(option.value);
+			changeInputValue(option.label, "select");
+			changeOpenState(false);
+		}
+		inputRef.current?.focus({ preventScroll: true });
+	};
+	const handleFreeSoloCommit = () => {
+		const nextValue = resolvedInputValue.trim();
+		if (!freeSolo || !nextValue || disabled || readOnly) return;
+		if (multiple) {
+			if (maxSelected !== void 0 && selectedValues.length >= maxSelected) return;
+			if (!selectedValues.some((selected) => selected === nextValue)) updateValue([...selectedValues, nextValue]);
+			changeInputValue("", "select");
+			if (closeOnSelect) changeOpenState(false);
+			else setActiveIndex(-1);
+		} else {
+			updateValue(nextValue);
+			changeInputValue(nextValue, "select");
+			changeOpenState(false);
+		}
+	};
+	const handleClear = () => {
+		if (disabled || readOnly) return;
+		updateValue(multiple ? [] : void 0);
+		changeInputValue("", "clear");
+		setActiveIndex(-1);
+		inputRef.current?.focus({ preventScroll: true });
+	};
+	const handleRemoveSelected = (selectedIndex) => {
+		if (!multiple || disabled || readOnly) return;
+		const nextValues = selectedValues.filter((_, index) => index !== selectedIndex);
+		updateValue(nextValues);
+		inputRef.current?.focus({ preventScroll: true });
+	};
+	const handleInputChange = (event) => {
+		if (readOnly) return;
+		changeInputValue(event.currentTarget.value, "input");
+		setActiveIndex(-1);
+		changeOpenState(true);
+	};
+	const handleInputFocus = (event) => {
+		onFocus?.(event);
+		if (openOnFocus && !disabled) {
+			setActiveIndex(-1);
+			changeOpenState(true);
+		}
+	};
+	const handleInputBlur = (event) => {
+		onBlur?.(event);
+	};
+	const handleControlBlur = (event) => {
+		const relatedTarget = event.relatedTarget;
+		if (relatedTarget && event.currentTarget.contains(relatedTarget)) return;
+		changeOpenState(false);
+		if (clearOnBlur) {
+			const nextInputValue = multiple ? "" : selectedValues.length > 0 ? getValueLabel(selectedValues[0]) : "";
+			changeInputValue(nextInputValue, "reset");
+		}
+	};
+	const handleInputKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented || disabled || event.nativeEvent.isComposing) return;
+		switch (event.key) {
+			case "ArrowDown":
+				event.preventDefault();
+				if (!isOpen) {
+					setActiveIndex(findEnabledIndex(-1, 1, false));
+					changeOpenState(true);
+				} else moveActive(1);
+				return;
+			case "ArrowUp":
+				event.preventDefault();
+				if (!isOpen) {
+					setActiveIndex(findEnabledIndex(navigationOptions.length, -1, false));
+					changeOpenState(true);
+				} else moveActive(-1);
+				return;
+			case "Home":
+				if (isOpen) {
+					event.preventDefault();
+					setActiveIndex(findEnabledIndex(-1, 1, false));
+				}
+				return;
+			case "End":
+				if (isOpen) {
+					event.preventDefault();
+					setActiveIndex(findEnabledIndex(navigationOptions.length, -1, false));
+				}
+				return;
+			case "PageDown":
+				if (isOpen) {
+					event.preventDefault();
+					moveActive(1, 10, false);
+				}
+				return;
+			case "PageUp":
+				if (isOpen) {
+					event.preventDefault();
+					moveActive(-1, 10, false);
+				}
+				return;
+			case "Enter":
+				if (isOpen && activeIndex >= 0) {
+					const option = filteredOptions[activeIndex];
+					if (option && !navigationOptions[activeIndex]?.disabled) {
+						event.preventDefault();
+						handleOptionSelect(option);
+						return;
+					}
+				}
+				if (freeSolo && resolvedInputValue.trim()) {
+					const normalizedInput = normalizeAutocompleteText(resolvedInputValue.trim());
+					const exactMatch = filteredOptions.find((option, index) => !navigationOptions[index]?.disabled && normalizeAutocompleteText(option.label) === normalizedInput);
+					event.preventDefault();
+					if (exactMatch) handleOptionSelect(exactMatch);
+					else handleFreeSoloCommit();
+				}
+				return;
+			case "Escape":
+				if (isOpen) {
+					event.preventDefault();
+					event.stopPropagation();
+					changeOpenState(false);
+					const nextInputValue = multiple ? "" : selectedValues.length > 0 ? getValueLabel(selectedValues[0]) : "";
+					changeInputValue(nextInputValue, "reset");
+				} else if (clearOnEscape && (selectedValues.length > 0 || resolvedInputValue)) {
+					event.preventDefault();
+					handleClear();
+				}
+				return;
+			case "Tab":
+				changeOpenState(false);
+				return;
+			case "Backspace":
+				if (multiple && !readOnly && resolvedInputValue.length === 0 && selectedValues.length > 0) {
+					event.preventDefault();
+					handleRemoveSelected(selectedValues.length - 1);
+				}
+				return;
+			default: return;
+		}
+	};
+	const resolvedLabelledBy = ariaLabelledBy ?? (label != null ? labelId : void 0);
+	const resolvedDescribedBy = [
+		ariaDescribedBy,
+		description != null ? descriptionId : void 0,
+		hasError ? errorId : void 0
+	].filter(Boolean).join(" ") || void 0;
+	const hasClearableValue = selectedValues.length > 0 || resolvedInputValue.length > 0;
+	const formValues = selectedValues.length > 0 ? selectedValues : freeSolo && resolvedInputValue.trim() ? [resolvedInputValue.trim()] : [];
+	const renderOptionElement = (option, index) => {
+		const selected = isOptionSelected(option);
+		const active = activeIndex === index;
+		const optionDisabled = navigationOptions[index]?.disabled ?? false;
+		const state = {
+			selected,
+			active,
+			disabled: optionDisabled,
+			multiple
+		};
+		return /* @__PURE__ */ jsx("div", {
+			id: `${listboxId}-option-${index}`,
+			className: cn("puzzle-autocomplete__option", optionClassName),
+			role: "option",
+			"aria-label": option.label,
+			"aria-describedby": !renderOption && option.description != null ? `${listboxId}-description-${index}` : void 0,
+			"aria-selected": selected,
+			"aria-disabled": optionDisabled || void 0,
+			"aria-posinset": index + 1,
+			"aria-setsize": filteredOptions.length,
+			"data-active": active || void 0,
+			"data-disabled": optionDisabled || void 0,
+			onMouseDown: (event) => event.preventDefault(),
+			onMouseMove: () => {
+				if (!optionDisabled) setActiveIndex(index);
+			},
+			onClick: () => handleOptionSelect(option),
+			children: renderOption ? renderOption(option, state) : /* @__PURE__ */ jsxs("span", {
+				className: "puzzle-autocomplete__option-content",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "puzzle-autocomplete__option-label",
+					children: option.label
+				}), option.description != null && /* @__PURE__ */ jsx("span", {
+					id: `${listboxId}-description-${index}`,
+					className: "puzzle-autocomplete__option-description",
+					children: option.description
+				})]
+			})
+		}, option.id ?? index);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("puzzle-autocomplete", className),
+		"data-size-mobile": responsiveSize.mobile,
+		"data-size-tablet": responsiveSize.tablet,
+		"data-size-desktop": responsiveSize.desktop,
+		"data-full-width-mobile": String(responsiveFullWidth.mobile),
+		"data-full-width-tablet": String(responsiveFullWidth.tablet),
+		"data-full-width-desktop": String(responsiveFullWidth.desktop),
+		"data-open": isOpen || void 0,
+		"data-invalid": isInvalid || void 0,
+		"data-disabled": disabled || void 0,
+		"data-multiple": multiple || void 0,
+		children: [
+			label != null && /* @__PURE__ */ jsxs("label", {
+				id: labelId,
+				htmlFor: inputId,
+				className: "puzzle-autocomplete__label",
+				children: [label, required && /* @__PURE__ */ jsx("span", {
+					className: "puzzle-autocomplete__required",
+					"aria-hidden": "true",
+					children: "*"
+				})]
+			}),
+			/* @__PURE__ */ jsxs(Popout, {
+				trigger: /* @__PURE__ */ jsx("div", {
+					className: "puzzle-autocomplete__anchor",
+					onClick: (event) => {
+						if (disabled) {
+							event.preventDefault();
+							return;
+						}
+						if (!isOpen && autoHighlight) setActiveIndex(findEnabledIndex(-1, 1, false));
+					},
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "puzzle-autocomplete__control",
+						onBlur: handleControlBlur,
+						"data-disabled": disabled || void 0,
+						children: [
+							multiple && selectedValues.map((selected, index) => {
+								const valueLabel = getValueLabel(selected);
+								return /* @__PURE__ */ jsxs("span", {
+									className: "puzzle-autocomplete__tag",
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "puzzle-autocomplete__tag-label",
+										children: valueLabel
+									}), !disabled && !readOnly && /* @__PURE__ */ jsx("button", {
+										type: "button",
+										className: "puzzle-autocomplete__tag-remove",
+										"aria-label": `${removeOptionLabel} ${valueLabel}`,
+										onMouseDown: (event) => event.preventDefault(),
+										onClick: () => handleRemoveSelected(index),
+										children: /* @__PURE__ */ jsx("span", {
+											"aria-hidden": "true",
+											children: "×"
+										})
+									})]
+								}, `${String(selected)}-${index}`);
+							}),
+							/* @__PURE__ */ jsx("input", {
+								...inputProps,
+								ref: handleInputRef,
+								id: inputId,
+								type: "text",
+								role: "combobox",
+								"aria-autocomplete": "list",
+								"aria-haspopup": "listbox",
+								"aria-expanded": isOpen,
+								"aria-controls": isOpen ? listboxId : void 0,
+								"aria-activedescendant": activeOptionId,
+								"aria-label": ariaLabel,
+								"aria-labelledby": resolvedLabelledBy,
+								"aria-describedby": resolvedDescribedBy,
+								"aria-invalid": isInvalid ? true : ariaInvalid,
+								"aria-required": required || void 0,
+								"aria-readonly": readOnly || void 0,
+								autoComplete,
+								placeholder,
+								value: resolvedInputValue,
+								disabled,
+								readOnly,
+								required: required && !multiple && !isRequiredSatisfied,
+								className: cn("puzzle-autocomplete__input", inputClassName),
+								onChange: handleInputChange,
+								onFocus: handleInputFocus,
+								onBlur: handleInputBlur,
+								onKeyDown: handleInputKeyDown
+							}),
+							clearable && hasClearableValue && !disabled && !readOnly && /* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: "puzzle-autocomplete__clear",
+								"aria-label": clearLabel,
+								onMouseDown: (event) => event.preventDefault(),
+								onClick: handleClear,
+								children: /* @__PURE__ */ jsx("span", {
+									"aria-hidden": "true",
+									children: "×"
+								})
+							})
+						]
+					})
+				}),
+				action: "click",
+				open: isOpen,
+				onOpenChange: changeOpenState,
+				position,
+				align,
+				offset,
+				collisionPadding,
+				matchTriggerWidth,
+				closeOnOutsideClick: true,
+				closeOnEscape: true,
+				contentClassName: cn("puzzle-autocomplete__popover", popoverClassName),
+				children: [/* @__PURE__ */ jsx("div", {
+					ref: listboxRef,
+					id: listboxId,
+					className: cn("puzzle-autocomplete__listbox", menuClassName),
+					role: "listbox",
+					"aria-label": resolvedLabelledBy ? void 0 : ariaLabel,
+					"aria-labelledby": resolvedLabelledBy,
+					"aria-multiselectable": multiple || void 0,
+					style: { maxHeight: menuMaxHeight },
+					children: groupedOptions.map((group, groupIndex) => {
+						const renderedOptions = group.options.map(({ option, index }) => renderOptionElement(option, index));
+						if (group.label === null) return renderedOptions;
+						const groupId = `${listboxId}-group-${groupIndex}`;
+						return /* @__PURE__ */ jsxs("div", {
+							className: "puzzle-autocomplete__group",
+							role: "group",
+							"aria-labelledby": groupId,
+							children: [/* @__PURE__ */ jsx("div", {
+								id: groupId,
+								className: "puzzle-autocomplete__group-label",
+								children: group.label
+							}), renderedOptions]
+						}, groupId);
+					})
+				}), filteredOptions.length === 0 && /* @__PURE__ */ jsx("div", {
+					className: "puzzle-autocomplete__empty",
+					role: "status",
+					"aria-live": "polite",
+					children: loading ? loadingText : noOptionsText
+				})]
+			}),
+			name && formValues.map((selected, index) => /* @__PURE__ */ jsx("input", {
+				className: "puzzle-autocomplete__native",
+				type: "hidden",
+				name,
+				form,
+				value: serializeValue ? serializeValue(selected) : String(selected)
+			}, `${String(selected)}-${index}`)),
+			description != null && /* @__PURE__ */ jsx("div", {
+				id: descriptionId,
+				className: "puzzle-autocomplete__description",
+				children: description
+			}),
+			hasError && /* @__PURE__ */ jsx("div", {
+				id: errorId,
+				className: "puzzle-autocomplete__error",
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				children: errorContent
+			})
+		]
+	});
+};
+export { Autocomplete };
+
+//# sourceMappingURL=index.js.map

package/dist/components/forms/autocomplete/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/forms/autocomplete/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type ChangeEvent,\n  type FocusEvent,\n  type KeyboardEvent as ReactKeyboardEvent,\n} from \"react\";\n\nimport { cn, resolveResponsiveValue } from \"@puzzle-ui/core\";\n\nimport { Popout } from \"../../overlays/popout\";\n\nimport {\n  filterAutocompleteOptions,\n  findEnabledAutocompleteIndex,\n  groupAutocompleteOptions,\n  normalizeAutocompleteText,\n} from \"./autocomplete.utils\";\n\nimport type {\n  AutocompleteInputChangeReason,\n  AutocompleteMultipleProps,\n  AutocompleteOption,\n  AutocompleteOptionRenderState,\n  AutocompleteProps,\n  AutocompleteSingleProps,\n  AutocompleteValue,\n} from \"./autocomplete.types\";\n\nimport \"./autocomplete.css\";\n\nconst areSelectionsEqual = (\n  previous: unknown,\n  next: unknown,\n  multiple: boolean,\n): boolean => {\n  if (!multiple) {\n    return Object.is(previous, next);\n  }\n\n  if (!Array.isArray(previous) || !Array.isArray(next)) {\n    return Object.is(previous, next);\n  }\n\n  return (\n    previous.length === next.length &&\n    previous.every((value, index) => Object.is(value, next[index]))\n  );\n};\n\nconst Autocomplete = <T, FreeSolo extends boolean = false>(\n  props: AutocompleteProps<T, FreeSolo>,\n) => {\n  type Value = AutocompleteValue<T, FreeSolo>;\n\n  const {\n    options,\n    label,\n    description,\n    error,\n    disabled = false,\n    required = false,\n    readOnly = false,\n    freeSolo = false,\n    name,\n    form,\n    serializeValue,\n    isOptionEqualToValue,\n    filterOptions,\n    renderOption,\n    value,\n    defaultValue,\n    onChange,\n    inputValue,\n    defaultInputValue,\n    onInputChange,\n    open,\n    defaultOpen = false,\n    onOpenChange,\n    openOnFocus = false,\n    autoHighlight = false,\n    clearOnBlur: clearOnBlurProp,\n    clearOnEscape = false,\n    clearable = true,\n    clearLabel = \"Clear selection\",\n    removeOptionLabel = \"Remove\",\n    loading = false,\n    loadingText = \"Loading options...\",\n    noOptionsText = \"No options found\",\n    requiredMessage = \"Please select an option.\",\n    closeOnSelect: closeOnSelectProp,\n    maxSelected,\n    filterSelectedOptions,\n    maxOptions,\n    position = \"bottom\",\n    align = \"start\",\n    offset = 8,\n    collisionPadding = 8,\n    matchTriggerWidth = true,\n    menuMaxHeight = \"18rem\",\n    size = \"md\",\n    fullWidth = false,\n    className,\n    inputClassName,\n    popoverClassName,\n    menuClassName,\n    optionClassName,\n    id,\n    ref,\n    onFocus,\n    onBlur,\n    onKeyDown,\n    autoComplete = \"off\",\n    placeholder = \"Search options\",\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    ...inputProps\n  } = props;\n\n  const multiple = props.multiple === true;\n\n  // Checking property presence is intentional: value={undefined} is a\n  // controlled empty single-select value.\n  const controlledValue = Object.prototype.hasOwnProperty.call(props, \"value\");\n\n  const controlledInputValue = inputValue !== undefined;\n  const controlledOpen = open !== undefined;\n\n  const baseId = useId();\n  const inputId = id ?? `${baseId}-input`;\n  const labelId = `${baseId}-label`;\n  const descriptionId = `${baseId}-description`;\n  const errorId = `${baseId}-error`;\n  const listboxId = `${baseId}-listbox`;\n\n  // Internal state is initialized from defaultValue only. Controlled values\n  // are always read from props and never copied into internal state.\n  const initialValue: Value | readonly Value[] | undefined = multiple\n    ? ((defaultValue as readonly Value[] | undefined) ?? [])\n    : (defaultValue as Value | undefined);\n\n  const initialSingleValue = (controlledValue ? value : defaultValue) as\n    | Value\n    | undefined;\n\n  const initialOption =\n    initialSingleValue === undefined\n      ? undefined\n      : options.find((option) =>\n          isOptionEqualToValue\n            ? isOptionEqualToValue(option, initialSingleValue)\n            : Object.is(option.value, initialSingleValue),\n        );\n\n  const [internalValue, setInternalValue] = useState<\n    Value | readonly Value[] | undefined\n  >(initialValue);\n\n  const [internalInputValue, setInternalInputValue] = useState(\n    () =>\n      defaultInputValue ??\n      (multiple\n        ? \"\"\n        : (initialOption?.label ??\n          (initialSingleValue === undefined\n            ? \"\"\n            : String(initialSingleValue)))),\n  );\n\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n  const [activeIndex, setActiveIndex] = useState(-1);\n\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const listboxRef = useRef<HTMLDivElement | null>(null);\n\n  const previousValueRef = useRef<unknown>(\n    controlledValue ? value : initialValue,\n  );\n\n  const handleInputRef = useCallback(\n    (node: HTMLInputElement | null) => {\n      inputRef.current = node;\n\n      if (typeof ref === \"function\") {\n        ref(node);\n      } else if (ref) {\n        ref.current = node;\n      }\n    },\n    [ref],\n  );\n\n  const selectedValue = controlledValue ? value : internalValue;\n\n  const selectedValues: readonly Value[] = multiple\n    ? ((selectedValue as readonly Value[] | undefined) ?? [])\n    : selectedValue === undefined\n      ? []\n      : [selectedValue as Value];\n\n  const resolvedInputValue = controlledInputValue\n    ? (inputValue ?? \"\")\n    : internalInputValue;\n\n  const isOpen = disabled ? false : (open ?? internalOpen);\n\n  const closeOnSelect = closeOnSelectProp ?? !multiple;\n  const clearOnBlur = clearOnBlurProp ?? !freeSolo;\n\n  const hasError = error !== undefined && error !== null && error !== false;\n\n  const isAriaInvalid =\n    ariaInvalid !== undefined &&\n    ariaInvalid !== false &&\n    ariaInvalid !== \"false\";\n\n  const isInvalid = hasError || isAriaInvalid;\n  const errorContent = error === true ? \"Invalid value\" : error;\n\n  const responsiveSize = resolveResponsiveValue(size, \"md\");\n  const responsiveFullWidth = resolveResponsiveValue(fullWidth, false);\n\n  const isEqual = useCallback(\n    (option: AutocompleteOption<T>, selected: Value): boolean =>\n      isOptionEqualToValue\n        ? isOptionEqualToValue(option, selected)\n        : Object.is(option.value, selected),\n    [isOptionEqualToValue],\n  );\n\n  const getValueLabel = useCallback(\n    (selected: Value): string => {\n      const option = options.find((candidate) => isEqual(candidate, selected));\n\n      return option?.label ?? String(selected);\n    },\n    [options, isEqual],\n  );\n\n  const isOptionSelected = useCallback(\n    (option: AutocompleteOption<T>) =>\n      selectedValues.some((selected) => isEqual(option, selected)),\n    [selectedValues, isEqual],\n  );\n\n  const changeInputValue = useCallback(\n    (nextValue: string, reason: AutocompleteInputChangeReason) => {\n      if (!controlledInputValue) {\n        setInternalInputValue(nextValue);\n      }\n\n      onInputChange?.(nextValue, reason);\n    },\n    [controlledInputValue, onInputChange],\n  );\n\n  const changeOpenState = useCallback(\n    (nextOpen: boolean) => {\n      if (disabled && nextOpen) {\n        return;\n      }\n\n      if (!controlledOpen) {\n        setInternalOpen(nextOpen);\n      }\n\n      onOpenChange?.(nextOpen);\n    },\n    [controlledOpen, disabled, onOpenChange],\n  );\n\n  const updateValue = useCallback(\n    (nextValue: Value | readonly Value[] | undefined) => {\n      previousValueRef.current = nextValue;\n\n      if (!controlledValue) {\n        setInternalValue(nextValue);\n      }\n\n      if (multiple) {\n        const callback = onChange as\n          | AutocompleteMultipleProps<T, FreeSolo>[\"onChange\"]\n          | undefined;\n\n        callback?.([...(nextValue as readonly Value[])]);\n      } else {\n        const callback = onChange as\n          | AutocompleteSingleProps<T, FreeSolo>[\"onChange\"]\n          | undefined;\n\n        callback?.(nextValue as Value | undefined);\n      }\n    },\n    [controlledValue, multiple, onChange],\n  );\n\n  // Keep the input text synchronized with externally changed values.\n  // The two controlled states remain independent when inputValue is supplied.\n  useEffect(() => {\n    if (areSelectionsEqual(previousValueRef.current, selectedValue, multiple)) {\n      return;\n    }\n\n    previousValueRef.current = selectedValue;\n\n    if (controlledInputValue) {\n      return;\n    }\n\n    const nextInputValue = multiple\n      ? \"\"\n      : selectedValues.length > 0\n        ? getValueLabel(selectedValues[0])\n        : \"\";\n\n    changeInputValue(nextInputValue, \"reset\");\n  }, [\n    selectedValue,\n    selectedValues,\n    multiple,\n    controlledInputValue,\n    getValueLabel,\n    changeInputValue,\n  ]);\n\n  const filteredOptions = useMemo(() => {\n    const candidates = filterOptions\n      ? filterOptions(options, resolvedInputValue)\n      : filterAutocompleteOptions(options, resolvedInputValue);\n\n    const shouldFilterSelected = filterSelectedOptions ?? multiple;\n\n    const visibleOptions = shouldFilterSelected\n      ? candidates.filter((option) => !isOptionSelected(option))\n      : [...candidates];\n\n    return maxOptions === undefined\n      ? visibleOptions\n      : visibleOptions.slice(0, Math.max(0, maxOptions));\n  }, [\n    options,\n    resolvedInputValue,\n    filterOptions,\n    filterSelectedOptions,\n    multiple,\n    isOptionSelected,\n    maxOptions,\n  ]);\n\n  // Options that cannot be selected because the selection limit was reached\n  // are also excluded from keyboard navigation.\n  const navigationOptions = useMemo(\n    () =>\n      filteredOptions.map((option) => ({\n        ...option,\n        disabled:\n          option.disabled === true ||\n          (multiple &&\n            maxSelected !== undefined &&\n            selectedValues.length >= maxSelected &&\n            !isOptionSelected(option)),\n      })),\n    [\n      filteredOptions,\n      multiple,\n      maxSelected,\n      selectedValues.length,\n      isOptionSelected,\n    ],\n  );\n\n  const groupedOptions = useMemo(\n    () => groupAutocompleteOptions(filteredOptions),\n    [filteredOptions],\n  );\n\n  const findEnabledIndex = (\n    startIndex: number,\n    direction: -1 | 1,\n    wrap = true,\n  ) =>\n    findEnabledAutocompleteIndex(\n      navigationOptions,\n      startIndex,\n      direction,\n      wrap,\n    );\n\n  const isRequiredSatisfied =\n    selectedValues.length > 0 ||\n    (freeSolo && resolvedInputValue.trim().length > 0);\n\n  // A custom validity message keeps required fields honest even when the\n  // visible text contains a query that has not been selected.\n  useEffect(() => {\n    inputRef.current?.setCustomValidity(\n      required && !disabled && !isRequiredSatisfied ? requiredMessage : \"\",\n    );\n  }, [required, disabled, isRequiredSatisfied, requiredMessage]);\n\n  // Recover the active option when results change and keep autoHighlight useful.\n  useEffect(() => {\n    if (!isOpen) {\n      if (activeIndex !== -1) {\n        setActiveIndex(-1);\n      }\n\n      return;\n    }\n\n    if (\n      activeIndex >= 0 &&\n      (!navigationOptions[activeIndex] ||\n        navigationOptions[activeIndex].disabled)\n    ) {\n      setActiveIndex(-1);\n      return;\n    }\n\n    if (activeIndex === -1 && autoHighlight) {\n      const firstIndex = findEnabledIndex(-1, 1, false);\n\n      if (firstIndex !== -1) {\n        setActiveIndex(firstIndex);\n      }\n    }\n  }, [isOpen, activeIndex, navigationOptions, autoHighlight]);\n\n  const activeOptionId =\n    activeIndex >= 0 &&\n    navigationOptions[activeIndex] &&\n    !navigationOptions[activeIndex].disabled\n      ? `${listboxId}-option-${activeIndex}`\n      : undefined;\n\n  // Keep the active option visible during keyboard navigation.\n  useEffect(() => {\n    if (!isOpen || !activeOptionId) {\n      return;\n    }\n\n    const option =\n      listboxRef.current?.ownerDocument.getElementById(activeOptionId);\n\n    option?.scrollIntoView?.({ block: \"nearest\" });\n  }, [isOpen, activeOptionId]);\n\n  const moveActive = (direction: -1 | 1, amount = 1, wrap = true) => {\n    let nextIndex = activeIndex;\n\n    for (let step = 0; step < amount; step++) {\n      const startIndex =\n        nextIndex === -1\n          ? direction === 1\n            ? -1\n            : navigationOptions.length\n          : nextIndex;\n\n      const candidateIndex = findEnabledIndex(startIndex, direction, wrap);\n\n      if (candidateIndex === -1) {\n        break;\n      }\n\n      nextIndex = candidateIndex;\n    }\n\n    if (nextIndex !== -1) {\n      setActiveIndex(nextIndex);\n    }\n  };\n\n  const isAtSelectionLimit = (option: AutocompleteOption<T>) =>\n    multiple &&\n    maxSelected !== undefined &&\n    selectedValues.length >= maxSelected &&\n    !isOptionSelected(option);\n\n  const handleOptionSelect = (option: AutocompleteOption<T>) => {\n    if (disabled || option.disabled || isAtSelectionLimit(option)) {\n      return;\n    }\n\n    if (multiple) {\n      const nextValues = isOptionSelected(option)\n        ? selectedValues.filter((selected) => !isEqual(option, selected))\n        : [...selectedValues, option.value as Value];\n\n      updateValue(nextValues);\n      changeInputValue(\"\", \"select\");\n\n      if (closeOnSelect) {\n        changeOpenState(false);\n      } else {\n        setActiveIndex(-1);\n        changeOpenState(true);\n      }\n    } else {\n      updateValue(option.value as Value);\n      changeInputValue(option.label, \"select\");\n      changeOpenState(false);\n    }\n\n    inputRef.current?.focus({ preventScroll: true });\n  };\n\n  const handleFreeSoloCommit = () => {\n    const nextValue = resolvedInputValue.trim();\n\n    if (!freeSolo || !nextValue || disabled || readOnly) {\n      return;\n    }\n\n    if (multiple) {\n      if (maxSelected !== undefined && selectedValues.length >= maxSelected) {\n        return;\n      }\n\n      const alreadySelected = selectedValues.some(\n        (selected) => selected === nextValue,\n      );\n\n      if (!alreadySelected) {\n        updateValue([...selectedValues, nextValue as Value]);\n      }\n\n      changeInputValue(\"\", \"select\");\n\n      if (closeOnSelect) {\n        changeOpenState(false);\n      } else {\n        setActiveIndex(-1);\n      }\n    } else {\n      updateValue(nextValue as Value);\n      changeInputValue(nextValue, \"select\");\n      changeOpenState(false);\n    }\n  };\n\n  const handleClear = () => {\n    if (disabled || readOnly) {\n      return;\n    }\n\n    updateValue(multiple ? [] : undefined);\n    changeInputValue(\"\", \"clear\");\n    setActiveIndex(-1);\n\n    inputRef.current?.focus({ preventScroll: true });\n  };\n\n  const handleRemoveSelected = (selectedIndex: number) => {\n    if (!multiple || disabled || readOnly) {\n      return;\n    }\n\n    const nextValues = selectedValues.filter(\n      (_, index) => index !== selectedIndex,\n    );\n\n    updateValue(nextValues);\n    inputRef.current?.focus({ preventScroll: true });\n  };\n\n  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n    if (readOnly) {\n      return;\n    }\n\n    changeInputValue(event.currentTarget.value, \"input\");\n    setActiveIndex(-1);\n    changeOpenState(true);\n  };\n\n  const handleInputFocus = (event: FocusEvent<HTMLInputElement>) => {\n    onFocus?.(event);\n\n    if (openOnFocus && !disabled) {\n      setActiveIndex(-1);\n      changeOpenState(true);\n    }\n  };\n\n  const handleInputBlur = (event: FocusEvent<HTMLInputElement>) => {\n    onBlur?.(event);\n  };\n\n  const handleControlBlur = (event: FocusEvent<HTMLDivElement>) => {\n    const relatedTarget = event.relatedTarget;\n\n    // Moving focus between controls inside the autocomplete\n    // should not close the popup.\n    if (relatedTarget && event.currentTarget.contains(relatedTarget as Node)) {\n      return;\n    }\n\n    changeOpenState(false);\n\n    if (clearOnBlur) {\n      const nextInputValue = multiple\n        ? \"\"\n        : selectedValues.length > 0\n          ? getValueLabel(selectedValues[0])\n          : \"\";\n\n      changeInputValue(nextInputValue, \"reset\");\n    }\n  };\n\n  const handleInputKeyDown = (event: ReactKeyboardEvent<HTMLInputElement>) => {\n    onKeyDown?.(event);\n\n    if (event.defaultPrevented || disabled || event.nativeEvent.isComposing) {\n      return;\n    }\n\n    switch (event.key) {\n      case \"ArrowDown\": {\n        event.preventDefault();\n\n        if (!isOpen) {\n          setActiveIndex(findEnabledIndex(-1, 1, false));\n          changeOpenState(true);\n        } else {\n          moveActive(1);\n        }\n\n        return;\n      }\n\n      case \"ArrowUp\": {\n        event.preventDefault();\n\n        if (!isOpen) {\n          setActiveIndex(findEnabledIndex(navigationOptions.length, -1, false));\n          changeOpenState(true);\n        } else {\n          moveActive(-1);\n        }\n\n        return;\n      }\n\n      case \"Home\": {\n        if (isOpen) {\n          event.preventDefault();\n          setActiveIndex(findEnabledIndex(-1, 1, false));\n        }\n\n        return;\n      }\n\n      case \"End\": {\n        if (isOpen) {\n          event.preventDefault();\n          setActiveIndex(findEnabledIndex(navigationOptions.length, -1, false));\n        }\n\n        return;\n      }\n\n      case \"PageDown\": {\n        if (isOpen) {\n          event.preventDefault();\n          moveActive(1, 10, false);\n        }\n\n        return;\n      }\n\n      case \"PageUp\": {\n        if (isOpen) {\n          event.preventDefault();\n          moveActive(-1, 10, false);\n        }\n\n        return;\n      }\n\n      case \"Enter\": {\n        if (isOpen && activeIndex >= 0) {\n          const option = filteredOptions[activeIndex];\n\n          if (option && !navigationOptions[activeIndex]?.disabled) {\n            event.preventDefault();\n            handleOptionSelect(option);\n            return;\n          }\n        }\n\n        if (freeSolo && resolvedInputValue.trim()) {\n          const normalizedInput = normalizeAutocompleteText(\n            resolvedInputValue.trim(),\n          );\n\n          const exactMatch = filteredOptions.find(\n            (option, index) =>\n              !navigationOptions[index]?.disabled &&\n              normalizeAutocompleteText(option.label) === normalizedInput,\n          );\n\n          event.preventDefault();\n\n          if (exactMatch) {\n            handleOptionSelect(exactMatch);\n          } else {\n            handleFreeSoloCommit();\n          }\n        }\n\n        return;\n      }\n\n      case \"Escape\": {\n        if (isOpen) {\n          event.preventDefault();\n          event.stopPropagation();\n          changeOpenState(false);\n\n          const nextInputValue = multiple\n            ? \"\"\n            : selectedValues.length > 0\n              ? getValueLabel(selectedValues[0])\n              : \"\";\n\n          changeInputValue(nextInputValue, \"reset\");\n        } else if (\n          clearOnEscape &&\n          (selectedValues.length > 0 || resolvedInputValue)\n        ) {\n          event.preventDefault();\n          handleClear();\n        }\n\n        return;\n      }\n\n      case \"Tab\": {\n        changeOpenState(false);\n        return;\n      }\n\n      case \"Backspace\": {\n        if (\n          multiple &&\n          !readOnly &&\n          resolvedInputValue.length === 0 &&\n          selectedValues.length > 0\n        ) {\n          event.preventDefault();\n          handleRemoveSelected(selectedValues.length - 1);\n        }\n\n        return;\n      }\n\n      default:\n        return;\n    }\n  };\n\n  const resolvedLabelledBy =\n    ariaLabelledBy ?? (label != null ? labelId : undefined);\n\n  const resolvedDescribedBy =\n    [\n      ariaDescribedBy,\n      description != null ? descriptionId : undefined,\n      hasError ? errorId : undefined,\n    ]\n      .filter(Boolean)\n      .join(\" \") || undefined;\n\n  const hasClearableValue =\n    selectedValues.length > 0 || resolvedInputValue.length > 0;\n\n  const formValues: readonly Value[] =\n    selectedValues.length > 0\n      ? selectedValues\n      : freeSolo && resolvedInputValue.trim()\n        ? [resolvedInputValue.trim() as Value]\n        : [];\n\n  const renderOptionElement = (\n    option: AutocompleteOption<T>,\n    index: number,\n  ) => {\n    const selected = isOptionSelected(option);\n    const active = activeIndex === index;\n    const optionDisabled = navigationOptions[index]?.disabled ?? false;\n\n    const state: AutocompleteOptionRenderState = {\n      selected,\n      active,\n      disabled: optionDisabled,\n      multiple,\n    };\n\n    return (\n      <div\n        key={option.id ?? index}\n        id={`${listboxId}-option-${index}`}\n        className={cn(\"puzzle-autocomplete__option\", optionClassName)}\n        role=\"option\"\n        aria-label={option.label}\n        aria-describedby={\n          !renderOption && option.description != null\n            ? `${listboxId}-description-${index}`\n            : undefined\n        }\n        aria-selected={selected}\n        aria-disabled={optionDisabled || undefined}\n        aria-posinset={index + 1}\n        aria-setsize={filteredOptions.length}\n        data-active={active || undefined}\n        data-disabled={optionDisabled || undefined}\n        onMouseDown={(event) => event.preventDefault()}\n        onMouseMove={() => {\n          if (!optionDisabled) {\n            setActiveIndex(index);\n          }\n        }}\n        onClick={() => handleOptionSelect(option)}\n      >\n        {renderOption ? (\n          renderOption(option, state)\n        ) : (\n          <span className=\"puzzle-autocomplete__option-content\">\n            <span className=\"puzzle-autocomplete__option-label\">\n              {option.label}\n            </span>\n\n            {option.description != null && (\n              <span\n                id={`${listboxId}-description-${index}`}\n                className=\"puzzle-autocomplete__option-description\"\n              >\n                {option.description}\n              </span>\n            )}\n          </span>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <div\n      className={cn(\"puzzle-autocomplete\", className)}\n      data-size-mobile={responsiveSize.mobile}\n      data-size-tablet={responsiveSize.tablet}\n      data-size-desktop={responsiveSize.desktop}\n      data-full-width-mobile={String(responsiveFullWidth.mobile)}\n      data-full-width-tablet={String(responsiveFullWidth.tablet)}\n      data-full-width-desktop={String(responsiveFullWidth.desktop)}\n      data-open={isOpen || undefined}\n      data-invalid={isInvalid || undefined}\n      data-disabled={disabled || undefined}\n      data-multiple={multiple || undefined}\n    >\n      {label != null && (\n        <label\n          id={labelId}\n          htmlFor={inputId}\n          className=\"puzzle-autocomplete__label\"\n        >\n          {label}\n\n          {required && (\n            <span className=\"puzzle-autocomplete__required\" aria-hidden=\"true\">\n              *\n            </span>\n          )}\n        </label>\n      )}\n\n      <Popout\n        trigger={\n          <div\n            className=\"puzzle-autocomplete__anchor\"\n            onClick={(event) => {\n              if (disabled) {\n                event.preventDefault();\n                return;\n              }\n\n              if (!isOpen && autoHighlight) {\n                setActiveIndex(findEnabledIndex(-1, 1, false));\n              }\n            }}\n          >\n            <div\n              className=\"puzzle-autocomplete__control\"\n              onBlur={handleControlBlur}\n              data-disabled={disabled || undefined}\n            >\n              {multiple &&\n                selectedValues.map((selected, index) => {\n                  const valueLabel = getValueLabel(selected);\n\n                  return (\n                    <span\n                      key={`${String(selected)}-${index}`}\n                      className=\"puzzle-autocomplete__tag\"\n                    >\n                      <span className=\"puzzle-autocomplete__tag-label\">\n                        {valueLabel}\n                      </span>\n\n                      {!disabled && !readOnly && (\n                        <button\n                          type=\"button\"\n                          className=\"puzzle-autocomplete__tag-remove\"\n                          aria-label={`${removeOptionLabel} ${valueLabel}`}\n                          onMouseDown={(event) => event.preventDefault()}\n                          onClick={() => handleRemoveSelected(index)}\n                        >\n                          <span aria-hidden=\"true\">×</span>\n                        </button>\n                      )}\n                    </span>\n                  );\n                })}\n\n              <input\n                {...inputProps}\n                ref={handleInputRef}\n                id={inputId}\n                type=\"text\"\n                role=\"combobox\"\n                aria-autocomplete=\"list\"\n                aria-haspopup=\"listbox\"\n                aria-expanded={isOpen}\n                aria-controls={isOpen ? listboxId : undefined}\n                aria-activedescendant={activeOptionId}\n                aria-label={ariaLabel}\n                aria-labelledby={resolvedLabelledBy}\n                aria-describedby={resolvedDescribedBy}\n                aria-invalid={isInvalid ? true : ariaInvalid}\n                aria-required={required || undefined}\n                aria-readonly={readOnly || undefined}\n                autoComplete={autoComplete}\n                placeholder={placeholder}\n                value={resolvedInputValue}\n                disabled={disabled}\n                readOnly={readOnly}\n                required={required && !multiple && !isRequiredSatisfied}\n                className={cn(\"puzzle-autocomplete__input\", inputClassName)}\n                onChange={handleInputChange}\n                onFocus={handleInputFocus}\n                onBlur={handleInputBlur}\n                onKeyDown={handleInputKeyDown}\n              />\n\n              {clearable && hasClearableValue && !disabled && !readOnly && (\n                <button\n                  type=\"button\"\n                  className=\"puzzle-autocomplete__clear\"\n                  aria-label={clearLabel}\n                  onMouseDown={(event) => event.preventDefault()}\n                  onClick={handleClear}\n                >\n                  <span aria-hidden=\"true\">×</span>\n                </button>\n              )}\n            </div>\n          </div>\n        }\n        action=\"click\"\n        open={isOpen}\n        onOpenChange={changeOpenState}\n        position={position}\n        align={align}\n        offset={offset}\n        collisionPadding={collisionPadding}\n        matchTriggerWidth={matchTriggerWidth}\n        closeOnOutsideClick\n        closeOnEscape\n        contentClassName={cn(\"puzzle-autocomplete__popover\", popoverClassName)}\n      >\n        <div\n          ref={listboxRef}\n          id={listboxId}\n          className={cn(\"puzzle-autocomplete__listbox\", menuClassName)}\n          role=\"listbox\"\n          aria-label={resolvedLabelledBy ? undefined : ariaLabel}\n          aria-labelledby={resolvedLabelledBy}\n          aria-multiselectable={multiple || undefined}\n          style={{ maxHeight: menuMaxHeight }}\n        >\n          {groupedOptions.map((group, groupIndex) => {\n            const renderedOptions = group.options.map(({ option, index }) =>\n              renderOptionElement(option, index),\n            );\n\n            if (group.label === null) {\n              return renderedOptions;\n            }\n\n            const groupId = `${listboxId}-group-${groupIndex}`;\n\n            return (\n              <div\n                key={groupId}\n                className=\"puzzle-autocomplete__group\"\n                role=\"group\"\n                aria-labelledby={groupId}\n              >\n                <div id={groupId} className=\"puzzle-autocomplete__group-label\">\n                  {group.label}\n                </div>\n\n                {renderedOptions}\n              </div>\n            );\n          })}\n        </div>\n\n        {filteredOptions.length === 0 && (\n          <div\n            className=\"puzzle-autocomplete__empty\"\n            role=\"status\"\n            aria-live=\"polite\"\n          >\n            {loading ? loadingText : noOptionsText}\n          </div>\n        )}\n      </Popout>\n\n      {name &&\n        formValues.map((selected, index) => (\n          <input\n            key={`${String(selected)}-${index}`}\n            className=\"puzzle-autocomplete__native\"\n            type=\"hidden\"\n            name={name}\n            form={form}\n            value={serializeValue ? serializeValue(selected) : String(selected)}\n          />\n        ))}\n\n      {description != null && (\n        <div id={descriptionId} className=\"puzzle-autocomplete__description\">\n          {description}\n        </div>\n      )}\n\n      {hasError && (\n        <div\n          id={errorId}\n          className=\"puzzle-autocomplete__error\"\n          aria-live=\"polite\"\n          aria-atomic=\"true\"\n        >\n          {errorContent}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport { Autocomplete };\n\nexport type {\n  AutocompleteSize,\n  AutocompleteOption,\n  AutocompleteValue,\n  AutocompleteInputChangeReason,\n  AutocompleteOptionRenderState,\n  AutocompleteSingleProps,\n  AutocompleteMultipleProps,\n  AutocompleteProps,\n} from \"./autocomplete.types\";\n"],"mappings":"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"}