@feugene/granularity 0.48.0 → 0.50.0

package/dist/components/GrAutocomplete/chunks/{GrAutocomplete-C-uovdv8.js → GrAutocomplete-Cyr1-ENw.js}

@@ -3,12 +3,14 @@ import { a as useGrComponentSize, i as useGrComponentProp, s as useGrThemeAttrs
 import { n as useGranularityTranslations } from "../../../chunks/granularityI18n-BC5zsj_d.js";
 import { t as usePortalTarget } from "../../../chunks/usePortalTarget-BhrRgdqW.js";
 import { vClickOutside } from "../../../directives/clickOutside.js";
-import { r as isComposingEvent } from "../../../chunks/keyboard-DE2yhz_b.js";
+import { n as isComposingEvent } from "../../../chunks/keyboard-BiFSgWLt.js";
 import { t as loader_circle_default } from "../../../chunks/loader-circle-CfVLz7lb.js";
 import { useFloating } from "../../../composables/useFloating.js";
 import { useDismissible } from "../../../composables/useDismissible.js";
+import { t as panelPopTransition } from "../../../chunks/overlayTransition-C0FDMx7Q.js";
+import { a as autocompleteShellClass, i as autocompletePanelClasses, o as autocompleteStateClass, r as autocompleteOptionClass, s as isAutocompleteOptionGroup } from "../../../chunks/config-D1oVht-E.js";
 import { a as resolveSelectedOptions, t as filterOptions } from "../../../chunks/optionFilter-DYw9XPPx.js";
-import { useVirtualList } from "../../../composables/useVirtualList.js";
+import { n as useOptionPanelVirtualization, t as buildOptionPanelRows } from "../../../chunks/optionPanel-DvY7Tv_4.js";
 import { useComboboxNavigation } from "../../../composables/useComboboxNavigation.js";
 import { n as useGrFormFieldContext } from "../../../chunks/context-DdNIxa1w.js";
 import { useGrFormControl } from "../../../composables/useGrFormControl.js";
@@ -16,10 +18,8 @@ import { t as useFocusWithin } from "../../../chunks/useFocusWithin-BwHE0rzm.js"
 import { t as useControlledOpen } from "../../../chunks/useControlledOpen-DV3SqLTP.js";
 import { useRovingFocus } from "../../../composables/useRovingFocus.js";
 import { t as useControlAddons } from "../../../chunks/useControlAddons-asUr10Pf.js";
-import { d as chipSizeForBadgeScale } from "../../../chunks/grChipStyles-DcDyxAL0.js";
-import { t as GrChip_default } from "../../GrChip/chunks/GrChip-CKqyzYcv.js";
-import { n as panelPopTransition } from "../../../chunks/overlayPanelSurface-BKeMhRx4.js";
-import { a as autocompleteShellClass, i as autocompletePanelClasses, o as autocompleteStateClass, r as autocompleteOptionClass } from "../../../chunks/config-BHLMTJaR.js";
+import { d as chipSizeForBadgeScale } from "../../../chunks/grChipStyles-CA9Wj1_E.js";
+import { t as GrChip_default } from "../../GrChip/chunks/GrChip-DoyS1Dr4.js";
 import { t as check_default } from "../../../chunks/check-BZI24Qs4.js";
 import { t as chevron_down_default } from "../../../chunks/chevron-down-CQS2OG_s.js";
 import { t as _plugin_vue_export_helper_default } from "../../../chunks/_plugin-vue_export-helper-BOaGB7Aw.js";
@@ -85,7 +85,7 @@ function useRemoteOptions(options) {
 	* и remote-результаты исчезали бы прямо посреди выбора.
 	*/
 	function optionsSignature(list) {
-		return (list ?? []).map((o) => `${String(o.value)}\u0000${o.label}`).join("
");
+		return (list ?? []).map((item) => isAutocompleteOptionGroup(item) ? `${item.label}\u0000${optionsSignature(item.options)}` : `${String(item.value)}\u0000${item.label}`).join("
");
 	}
 	watch(() => optionsSignature(options.options()), () => {
 		if (!options.fetchOptions()) return;
@@ -106,6 +106,11 @@ function useRemoteOptions(options) {
 //#region src/components/GrAutocomplete/composables/useAutocompleteValues.ts
 function useAutocompleteValues(options) {
 	const optionsResolved = computed(() => options.fetchOptions() && options.remoteAnswered.value ? options.remoteOptions.value : options.options() ?? []);
+	/**
+	* Плоский список: метку выбранного значения и проверку «такое уже есть» группы
+	* не касаются — они про показ, а не про состав.
+	*/
+	const flatOptions = computed(() => optionsResolved.value.flatMap((item) => isAutocompleteOptionGroup(item) ? item.options : [item]));
 	/** `0` — валидное значение, поэтому «пусто» проверяется явно, а не через falsy. */
 	function isEmptyValue(value) {
 		return value === void 0 || value === null || value === "";
@@ -123,16 +128,17 @@ function useAutocompleteValues(options) {
 	const selectedValues = computed(() => options.multiple() ? toArray(options.modelValue()) : isEmptyValue(modelSingle.value) ? [] : [modelSingle.value]);
 	const hasSelection = computed(() => selectedValues.value.length > 0);
 	function labelFor(value) {
-		return optionsResolved.value.find((o) => o.value === value)?.label ?? String(value);
+		return flatOptions.value.find((o) => o.value === value)?.label ?? String(value);
 	}
 	return {
 		optionsResolved,
+		flatOptions,
 		isEmptyValue,
 		modelSingle,
 		selectedValues,
 		hasSelection,
 		labelFor,
-		selectedOptions: computed(() => resolveSelectedOptions(selectedValues.value, optionsResolved.value)),
+		selectedOptions: computed(() => resolveSelectedOptions(selectedValues.value, flatOptions.value)),
 		singleSelectedLabel: computed(() => options.multiple() || isEmptyValue(modelSingle.value) ? "" : labelFor(modelSingle.value))
 	};
 }
@@ -144,102 +150,75 @@ function useAutocompletePanel(options) {
 		if (!options.multiple() && !options.dirty.value) return "";
 		return options.query.value.trim();
 	});
-	const filteredOptions = computed(() => filterOptions(options.optionsResolved.value, searchQuery.value, options.filter()));
+	/**
+	* Строки панели: группы сохраняются, фильтр применяется к их содержимому, и
+	* группа, у которой ничего не совпало, исчезает целиком вместе с заголовком —
+	* заголовок над пустотой читается как сбой, а не как «здесь ничего нет».
+	*/
+	const filteredItems = computed(() => {
+		const items = [];
+		options.optionsResolved.value.forEach((item, index) => {
+			if (isAutocompleteOptionGroup(item)) {
+				const matched = filterOptions(item.options, searchQuery.value, options.filter());
+				if (!matched.length) return;
+				const groupKey = `__group__${index}`;
+				items.push({
+					kind: "group",
+					label: item.label,
+					key: groupKey
+				});
+				for (const option of matched) items.push({
+					kind: "option",
+					option,
+					key: `${index}:${String(option.value)}`,
+					groupKey
+				});
+				return;
+			}
+			if (filterOptions([item], searchQuery.value, options.filter()).length) items.push({
+				kind: "option",
+				option: item,
+				key: `${index}:${String(item.value)}`
+			});
+		});
+		return items;
+	});
 	const belowMinQuery = computed(() => options.minQueryLength() > 0 && options.query.value.trim().length < options.minQueryLength());
 	/**
 	* Опции к показу и навигации. Ниже `minQueryLength` — пусто: список ещё
 	* относится к прошлому запросу, показывать его под подсказкой «введите ещё N»
 	* значит дезинформировать.
 	*/
-	const effectiveOptions = computed(() => belowMinQuery.value ? [] : filteredOptions.value);
+	const panelItems = computed(() => belowMinQuery.value ? [] : filteredItems.value);
+	const panelRows = computed(() => buildOptionPanelRows(panelItems.value));
+	const effectiveOptions = computed(() => panelItems.value.flatMap((item) => item.kind === "option" ? [item.option] : []));
 	const canAddCustom = computed(() => {
 		if (!options.allowCustomValue()) return false;
 		const v = options.query.value.trim();
 		if (!v) return false;
 		if (options.multiple() && options.selectedValues.value.includes(v)) return false;
 		if (!options.multiple() && v === options.modelSingle.value) return false;
-		return !options.optionsResolved.value.some((o) => o.value === v || o.label === v);
+		return !options.flatOptions.value.some((o) => o.value === v || o.label === v);
 	});
 	return {
 		searchQuery,
 		belowMinQuery,
+		panelItems,
+		panelRows,
 		effectiveOptions,
 		canAddCustom,
 		showEmpty: computed(() => !options.isLoading.value && effectiveOptions.value.length === 0 && !canAddCustom.value)
 	};
 }
 //#endregion
-//#region src/components/GrAutocomplete/composables/useAutocompleteVirtual.ts
-/** Оценка высоты опции: `py-2` вокруг строки кегля `sm`. Уточняется замером. */
-var OPTION_SIZE_ESTIMATE = 36;
-function useAutocompleteVirtual(options) {
-	const addOffset = computed(() => options.canAddCustom.value ? 1 : 0);
-	const virtualCount = computed(() => options.effectiveOptions.value.length + addOffset.value);
-	const virtualizer = useVirtualList({
-		container: options.listboxEl,
-		count: () => options.virtual() ? virtualCount.value : 0,
-		source: () => options.effectiveOptions.value,
-		itemSize: OPTION_SIZE_ESTIMATE,
-		viewportSize: () => options.dropdownMaxHeight()
-	});
-	/** Виден ли «Add …»: вне виртуального окна его рисовать нельзя — он элемент набора. */
-	const showAddOption = computed(() => {
-		if (!options.canAddCustom.value) return false;
-		return !options.virtual() || virtualizer.range.value.start === 0;
-	});
-	/** Опции к отрисовке вместе с их абсолютным индексом в `effectiveOptions`. */
-	const renderedOptions = computed(() => {
-		const all = options.effectiveOptions.value;
-		if (!options.virtual()) return all.map((option, index) => ({
-			option,
-			index
-		}));
-		const { start, end } = virtualizer.range.value;
-		const from = Math.max(0, start - addOffset.value);
-		const to = Math.max(0, end - addOffset.value);
-		return all.slice(from, to).map((option, offset) => ({
-			option,
-			index: from + offset
-		}));
-	});
-	/**
-	* Размер набора и позиция в нём объявляются только при виртуализации: в обычном
-	* режиме диктор выводит их из DOM, а при неполном наборе получил бы «3 из 15»
-	* на списке в десять тысяч.
-	*/
-	function optionSetProps(virtualIndex) {
-		if (!options.virtual()) return void 0;
-		return {
-			"aria-setsize": virtualCount.value,
-			"aria-posinset": virtualIndex + 1
-		};
-	}
-	return {
-		addOffset,
-		virtualCount,
-		virtualizer,
-		showAddOption,
-		renderedOptions,
-		optionSetProps,
-		listboxStyle: computed(() => {
-			const base = { maxHeight: `${options.dropdownMaxHeight()}px` };
-			if (!options.virtual()) return base;
-			return {
-				...base,
-				...virtualizer.spacerStyle.value
-			};
-		})
-	};
-}
-//#endregion
 //#region src/components/GrAutocomplete/composables/useAutocompleteNavigation.ts
 function useAutocompleteNavigation(options) {
 	const navigableItems = computed(() => {
 		const items = options.canAddCustom.value ? [{ kind: "add" }] : [];
-		options.effectiveOptions.value.forEach((option, index) => {
-			if (!option.disabled) items.push({
+		options.panelItems.value.forEach((item, index) => {
+			if (item.kind === "option" && !item.option.disabled) items.push({
 				kind: "option",
-				option,
+				option: item.option,
 				index
 			});
 		});
@@ -248,8 +227,22 @@ function useAutocompleteNavigation(options) {
 	function isSelected(value) {
 		return options.selectedValues.value.includes(value);
 	}
-	function navigableIndexOf(value) {
-		return navigableItems.value.findIndex((item) => item.kind === "option" && item.option.value === value);
+	/**
+	* Navigable-индекс по позиции в `panelItems` — O(1) на каждое движение мыши
+	* вместо поиска по значению.
+	*
+	* Поиск по значению здесь ещё и неверен: одно и то же значение может стоять в
+	* двух группах, и наведение на вторую опцию подсвечивало бы первую.
+	*/
+	const navigableIndexByPanelIndex = computed(() => {
+		const map = /* @__PURE__ */ new Map();
+		navigableItems.value.forEach((item, navIndex) => {
+			if (item.kind === "option") map.set(item.index, navIndex);
+		});
+		return map;
+	});
+	function navigableIndexOfPanelIndex(index) {
+		return navigableIndexByPanelIndex.value.get(index) ?? -1;
 	}
 	/** Прокрутка к активному: сперва окно виртуального списка, затем доводка. */
 	async function scrollActiveIntoView(item) {
@@ -268,7 +261,7 @@ function useAutocompleteNavigation(options) {
 	return {
 		navigableItems,
 		isSelected,
-		navigableIndexOf,
+		navigableIndexOfPanelIndex,
 		activeIndex,
 		activeItem,
 		activeDescendantId,
@@ -315,7 +308,9 @@ var _hoisted_7 = [
 	"aria-multiselectable"
 ];
 var _hoisted_8 = ["id"];
-var _hoisted_9 = [
+var _hoisted_9 = ["aria-labelledby", "aria-label"];
+var _hoisted_10 = ["id"];
+var _hoisted_11 = [
 	"id",
 	"disabled",
 	"aria-selected",
@@ -323,22 +318,36 @@ var _hoisted_9 = [
 	"onClick",
 	"onMousemove"
 ];
-var _hoisted_10 = { class: "flex items-center gap-2 min-w-0" };
-var _hoisted_11 = {
+var _hoisted_12 = { class: "flex items-center gap-2 min-w-0" };
+var _hoisted_13 = {
 	class: "inline-block h-4 w-4 shrink-0",
 	"aria-hidden": "true"
 };
-var _hoisted_12 = { class: "truncate" };
-var _hoisted_13 = {
+var _hoisted_14 = { class: "truncate" };
+var _hoisted_15 = [
+	"id",
+	"disabled",
+	"aria-selected",
+	"aria-disabled",
+	"onClick",
+	"onMousemove"
+];
+var _hoisted_16 = { class: "flex items-center gap-2 min-w-0" };
+var _hoisted_17 = {
+	class: "inline-block h-4 w-4 shrink-0",
+	"aria-hidden": "true"
+};
+var _hoisted_18 = { class: "truncate" };
+var _hoisted_19 = {
 	key: 0,
 	"data-gr-autocomplete-loading": "",
 	class: "flex items-center gap-2"
 };
-var _hoisted_14 = {
+var _hoisted_20 = {
 	key: 1,
 	"data-gr-autocomplete-hint": ""
 };
-var _hoisted_15 = {
+var _hoisted_21 = {
 	key: 2,
 	"data-gr-autocomplete-empty": ""
 };
@@ -487,7 +496,7 @@ var GrAutocomplete_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 			onSearch: (value) => emit("search", value),
 			onSearchError: (error) => emit("searchError", error)
 		});
-		const { optionsResolved, modelSingle, selectedValues, hasSelection, selectedOptions, singleSelectedLabel } = useAutocompleteValues({
+		const { optionsResolved, flatOptions, modelSingle, selectedValues, hasSelection, selectedOptions, singleSelectedLabel } = useAutocompleteValues({
 			modelValue: () => props.modelValue,
 			options: () => props.options,
 			multiple: () => props.multiple,
@@ -527,8 +536,9 @@ var GrAutocomplete_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 			zIndexVar: "--gr-z-dropdown"
 		});
 		useDismissible(open, closeDropdown);
-		const { belowMinQuery, effectiveOptions, canAddCustom, showEmpty } = useAutocompletePanel({
+		const { belowMinQuery, panelItems, panelRows, canAddCustom, showEmpty } = useAutocompletePanel({
 			optionsResolved,
+			flatOptions,
 			query,
 			dirty,
 			filterable: () => props.filterable,
@@ -551,21 +561,26 @@ var GrAutocomplete_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 			return `${listboxId}-opt-${index}`;
 		}
 		const addOptionDomId = computed(() => `${listboxId}-add`);
-		const { addOffset, virtualizer, showAddOption, renderedOptions, optionSetProps, listboxStyle } = useAutocompleteVirtual({
+		const { virtualEnabled, addOffset, scrollToIndex: scrollVirtualToIndex, measure: measureVirtualRow, optionSetProps, leadingRowSetProps, showLeadingRow: showAddOption, renderedPanelRows, listboxStyle } = useOptionPanelVirtualization({
+			panelItems,
+			panelRows,
+			hasLeadingRow: canAddCustom,
 			listboxEl,
-			effectiveOptions,
-			canAddCustom,
-			virtual: () => props.virtual,
-			dropdownMaxHeight: () => props.dropdownMaxHeight
+			enabled: () => props.virtual,
+			maxHeight: () => props.dropdownMaxHeight
 		});
-		const { isSelected, navigableIndexOf, activeIndex, activeItem, activeDescendantId, activeValue, initActiveIndex, resetActive, handleNavigationKeys } = useAutocompleteNavigation({
-			effectiveOptions,
+		/** Имя группы для `aria-labelledby`: заголовок живёт внутри своей группы. */
+		function groupLabelId(groupKey) {
+			return `${listboxId}-${groupKey}`;
+		}
+		const { isSelected, navigableIndexOfPanelIndex, activeIndex, activeItem, activeDescendantId, initActiveIndex, resetActive, handleNavigationKeys } = useAutocompleteNavigation({
+			panelItems,
 			canAddCustom,
 			selectedValues,
 			open,
 			virtual: () => props.virtual,
 			addOffset,
-			scrollToIndex: (index) => virtualizer.scrollToIndex(index),
+			scrollToIndex: scrollVirtualToIndex,
 			optionDomId,
 			addOptionDomId
 		});
@@ -742,8 +757,8 @@ var GrAutocomplete_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 				ref: rootEl,
 				"data-gr-autocomplete": "",
 				class: "relative w-full",
-				onFocusin: _cache[3] || (_cache[3] = (...args) => unref(onFocusIn) && unref(onFocusIn)(...args)),
-				onFocusout: _cache[4] || (_cache[4] = (...args) => unref(onFocusOut) && unref(onFocusOut)(...args))
+				onFocusin: _cache[4] || (_cache[4] = (...args) => unref(onFocusIn) && unref(onFocusIn)(...args)),
+				onFocusout: _cache[5] || (_cache[5] = (...args) => unref(onFocusOut) && unref(onFocusOut)(...args))
 			}, [
 				createElementVNode("div", {
 					"data-gr-autocomplete-shell": "",
@@ -874,14 +889,14 @@ var GrAutocomplete_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 						"data-gr-autocomplete-panel": "",
 						"data-gr-overlay-root": "",
 						style: unref(floatingStyle)
-					}), [createElementVNode("div", { class: normalizeClass(unref(autocompletePanelClasses)) }, [unref(showAddOption) || unref(renderedOptions).length ? (openBlock(), createElementBlock("div", {
+					}), [createElementVNode("div", { class: normalizeClass(unref(autocompletePanelClasses)) }, [unref(showAddOption) || unref(renderedPanelRows).length ? (openBlock(), createElementBlock("div", {
 						key: 0,
 						id: unref(listboxId),
 						ref_key: "listboxEl",
 						ref: listboxEl,
 						"data-gr-autocomplete-listbox": "",
 						"data-gr-virtual": __props.virtual ? "" : void 0,
-						class: normalizeClass(["p-1 overflow-auto", __props.virtual ? "flex flex-col" : ""]),
+						class: normalizeClass(["p-1 min-h-0 overflow-auto", __props.virtual ? "flex flex-col" : ""]),
 						style: normalizeStyle(unref(listboxStyle)),
 						role: "listbox",
 						"aria-multiselectable": __props.multiple ? "true" : void 0
@@ -892,7 +907,7 @@ var GrAutocomplete_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 						role: "option",
 						"aria-selected": "false",
 						tabindex: "-1"
-					}, unref(optionSetProps)(0), {
+					}, unref(leadingRowSetProps), {
 						"data-testid": "gr-autocomplete-add-option",
 						"data-gr-autocomplete-add-option": "",
 						class: unref(autocompleteOptionClass)({
@@ -902,44 +917,87 @@ var GrAutocomplete_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 						onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["prevent"])),
 						onClick: commitCustom,
 						onMousemove: _cache[1] || (_cache[1] = ($event) => activeIndex.value = 0)
-					}), toDisplayString(unref(t)("gr.autocomplete.addOption", "Add \"{value}\"", { value: query.value.trim() })), 17, _hoisted_8)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(unref(renderedOptions), ({ option, index: optionIndex }) => {
-						return openBlock(), createElementBlock("button", mergeProps({
-							id: optionDomId(optionIndex),
-							key: option.value,
+					}), toDisplayString(unref(t)("gr.autocomplete.addOption", "Add \"{value}\"", { value: query.value.trim() })), 17, _hoisted_8)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(unref(renderedPanelRows), (row) => {
+						return openBlock(), createElementBlock(Fragment, { key: row.key }, [row.kind === "group" ? (openBlock(), createElementBlock("div", {
+							key: 0,
+							"data-gr-autocomplete-group": "",
+							role: "group",
+							class: normalizeClass(unref(virtualEnabled) ? "flex flex-col" : ""),
+							"aria-labelledby": unref(virtualEnabled) ? void 0 : groupLabelId(row.key),
+							"aria-label": unref(virtualEnabled) ? row.label : void 0
+						}, [row.labelVisible !== false ? (openBlock(), createElementBlock("div", {
+							key: 0,
+							id: groupLabelId(row.key),
+							ref_for: true,
+							ref: (el) => unref(virtualEnabled) && row.labelIndex !== void 0 && unref(measureVirtualRow)(row.labelIndex + unref(addOffset), el),
+							"data-gr-autocomplete-group-label": "",
+							role: "presentation",
+							class: "px-3 pt-2 pb-1 text-[length:var(--gr-text-xs)] leading-[var(--gr-leading-xs)] font-semibold uppercase tracking-wide text-[var(--gr-muted-fg)]"
+						}, toDisplayString(row.label), 9, _hoisted_10)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(row.options, (child) => {
+							return openBlock(), createElementBlock("button", mergeProps({
+								id: optionDomId(child.index),
+								key: child.key,
+								ref_for: true,
+								ref: (el) => unref(virtualEnabled) && unref(measureVirtualRow)(child.index + unref(addOffset), el),
+								"data-gr-autocomplete-option": "",
+								type: "button",
+								role: "option",
+								tabindex: "-1"
+							}, { ref_for: true }, unref(optionSetProps)(child.index), {
+								disabled: child.option.disabled,
+								"aria-selected": unref(isSelected)(child.option.value) ? "true" : "false",
+								"aria-disabled": child.option.disabled ? "true" : void 0,
+								class: unref(autocompleteOptionClass)({
+									disabled: !!child.option.disabled,
+									active: unref(activeItem)?.kind === "option" && unref(activeItem).index === child.index
+								}),
+								onMousedown: _cache[2] || (_cache[2] = withModifiers(() => {}, ["prevent"])),
+								onClick: ($event) => chooseOption(child.option),
+								onMousemove: ($event) => activeIndex.value = unref(navigableIndexOfPanelIndex)(child.index)
+							}), [renderSlot(_ctx.$slots, "option", {
+								option: child.option,
+								selected: unref(isSelected)(child.option.value)
+							}, () => [createElementVNode("span", _hoisted_12, [createElementVNode("span", _hoisted_13, [unref(isSelected)(child.option.value) ? (openBlock(), createBlock(unref(check_default), {
+								key: 0,
+								class: "block h-4 w-4 text-[var(--gr-primary-text)]"
+							})) : createCommentVNode("", true)]), createElementVNode("span", _hoisted_14, toDisplayString(child.option.label), 1)])], true)], 16, _hoisted_11);
+						}), 128))], 10, _hoisted_9)) : (openBlock(), createElementBlock("button", mergeProps({
+							key: 1,
+							id: optionDomId(row.index),
 							ref_for: true,
-							ref: (el) => __props.virtual && unref(virtualizer).measure(optionIndex + unref(addOffset), el),
+							ref: (el) => unref(virtualEnabled) && unref(measureVirtualRow)(row.index + unref(addOffset), el),
 							"data-gr-autocomplete-option": "",
 							type: "button",
 							role: "option",
 							tabindex: "-1"
-						}, { ref_for: true }, unref(optionSetProps)(optionIndex + unref(addOffset)), {
-							disabled: option.disabled,
-							"aria-selected": unref(isSelected)(option.value) ? "true" : "false",
-							"aria-disabled": option.disabled ? "true" : void 0,
+						}, { ref_for: true }, unref(optionSetProps)(row.index), {
+							disabled: row.option.disabled,
+							"aria-selected": unref(isSelected)(row.option.value) ? "true" : "false",
+							"aria-disabled": row.option.disabled ? "true" : void 0,
 							class: unref(autocompleteOptionClass)({
-								disabled: !!option.disabled,
-								active: unref(activeValue) === option.value
+								disabled: !!row.option.disabled,
+								active: unref(activeItem)?.kind === "option" && unref(activeItem).index === row.index
 							}),
-							onMousedown: _cache[2] || (_cache[2] = withModifiers(() => {}, ["prevent"])),
-							onClick: ($event) => chooseOption(option),
-							onMousemove: ($event) => activeIndex.value = unref(navigableIndexOf)(option.value)
+							onMousedown: _cache[3] || (_cache[3] = withModifiers(() => {}, ["prevent"])),
+							onClick: ($event) => chooseOption(row.option),
+							onMousemove: ($event) => activeIndex.value = unref(navigableIndexOfPanelIndex)(row.index)
 						}), [renderSlot(_ctx.$slots, "option", {
-							option,
-							selected: unref(isSelected)(option.value)
-						}, () => [createElementVNode("span", _hoisted_10, [createElementVNode("span", _hoisted_11, [unref(isSelected)(option.value) ? (openBlock(), createBlock(unref(check_default), {
+							option: row.option,
+							selected: unref(isSelected)(row.option.value)
+						}, () => [createElementVNode("span", _hoisted_16, [createElementVNode("span", _hoisted_17, [unref(isSelected)(row.option.value) ? (openBlock(), createBlock(unref(check_default), {
 							key: 0,
 							class: "block h-4 w-4 text-[var(--gr-primary-text)]"
-						})) : createCommentVNode("", true)]), createElementVNode("span", _hoisted_12, toDisplayString(option.label), 1)])], true)], 16, _hoisted_9);
+						})) : createCommentVNode("", true)]), createElementVNode("span", _hoisted_18, toDisplayString(row.option.label), 1)])], true)], 16, _hoisted_15))], 64);
 					}), 128))], 14, _hoisted_7)) : createCommentVNode("", true), isLoading.value || unref(belowMinQuery) || unref(showEmpty) ? (openBlock(), createElementBlock("div", {
 						key: 1,
 						"data-gr-autocomplete-status": "",
 						role: "status",
 						"aria-live": "polite",
-						class: normalizeClass(unref(autocompleteStateClass))
-					}, [isLoading.value ? (openBlock(), createElementBlock("span", _hoisted_13, [renderSlot(_ctx.$slots, "loading", {}, () => [createVNode(unref(loader_circle_default), {
+						class: normalizeClass(["shrink-0", unref(autocompleteStateClass)])
+					}, [isLoading.value ? (openBlock(), createElementBlock("span", _hoisted_19, [renderSlot(_ctx.$slots, "loading", {}, () => [createVNode(unref(loader_circle_default), {
 						class: "block h-4 w-4 animate-spin",
 						"aria-hidden": "true"
-					}), createElementVNode("span", null, toDisplayString(resolvedLoadingText.value), 1)], true)])) : unref(belowMinQuery) ? (openBlock(), createElementBlock("span", _hoisted_14, toDisplayString(resolvedTypeMoreText.value), 1)) : (openBlock(), createElementBlock("span", _hoisted_15, [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(toDisplayString(resolvedNoResultsText.value), 1)], true)]))], 2)) : createCommentVNode("", true)], 2)], 16), [[vShow, unref(open)]])]),
+					}), createElementVNode("span", null, toDisplayString(resolvedLoadingText.value), 1)], true)])) : unref(belowMinQuery) ? (openBlock(), createElementBlock("span", _hoisted_20, toDisplayString(resolvedTypeMoreText.value), 1)) : (openBlock(), createElementBlock("span", _hoisted_21, [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(toDisplayString(resolvedNoResultsText.value), 1)], true)]))], 2)) : createCommentVNode("", true)], 2)], 16), [[vShow, unref(open)]])]),
 					_: 3
 				}, 8, [
 					"enter-active-class",
@@ -956,6 +1014,6 @@ var GrAutocomplete_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-c4989846"]]);
+}), [["__scopeId", "data-v-103fa23f"]]);
 //#endregion
 export { GrAutocomplete_default as t };