@primer/react 38.31.0-rc.f96563b64 → 38.31.1-rc.43134a516

package/dist/Autocomplete/AutocompleteMenu.js

@@ -5,8 +5,9 @@ import { useFocusZone } from "../hooks/useFocusZone.js";
 import { ActionList } from "../ActionList/index.js";
 import { AutocompleteContext, AutocompleteDeferredInputContext } from "./AutocompleteContext.js";
 import AutocompleteMenu_module_css_default from "./AutocompleteMenu.module.css.js";
+import { c } from "react-compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
-import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
+import React, { useContext, useEffect, useRef, useState } from "react";
 import { scrollIntoView } from "@primer/behaviors";
 import { announce } from "@primer/live-region-element";
 import { isElement } from "react-is";
@@ -42,19 +43,34 @@ const debounceAnnouncement = debounce((announcement) => {
 	announce(announcement);
 }, 250);
 function AutocompleteMenu(props) {
+	const $ = c(78);
 	const autocompleteContext = useContext(AutocompleteContext);
 	const deferredInputContext = useContext(AutocompleteDeferredInputContext);
 	if (autocompleteContext === null || deferredInputContext === null) throw new Error("AutocompleteContext returned null values");
 	const { activeDescendantRef, id, inputRef, scrollContainerRef, setAutocompleteSuggestion, setShowMenu, setInputValue, setIsMenuDirectlyActivated, setSelectedItemLength, showMenu } = autocompleteContext;
 	const { deferredInputValue } = deferredInputContext;
-	const { items, selectedItemIds, sortOnCloseFn, emptyStateText = "No selectable options", addNewItem, loading, selectionVariant = "single", filterFn, "aria-labelledby": ariaLabelledBy, onOpenChange, onSelectedChange, customScrollContainerRef } = props;
+	const { items, selectedItemIds, sortOnCloseFn, emptyStateText: t0, addNewItem, loading, selectionVariant: t1, filterFn, "aria-labelledby": ariaLabelledBy, onOpenChange, onSelectedChange, customScrollContainerRef } = props;
+	const emptyStateText = t0 === void 0 ? "No selectable options" : t0;
+	const selectionVariant = t1 === void 0 ? "single" : t1;
 	const listContainerRef = useRef(null);
-	const allItemsToRenderRef = useRef([]);
+	let t2;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = [];
+		$[0] = t2;
+	} else t2 = $[0];
+	const allItemsToRenderRef = useRef(t2);
 	const [highlightedItem, setHighlightedItem] = useState();
-	const [sortedItemIds, setSortedItemIds] = useState(items.map(({ id: itemId }) => itemId));
+	let t3;
+	if ($[1] !== items) {
+		t3 = items.map(_temp);
+		$[1] = items;
+		$[2] = t3;
+	} else t3 = $[2];
+	const [sortedItemIds, setSortedItemIds] = useState(t3);
 	const generatedUniqueId = useId$1(id);
-	const selectableItems = useMemo(() => items.map((selectableItem) => {
-		return {
+	let t4;
+	if ($[3] !== (highlightedItem === null || highlightedItem === void 0 ? void 0 : highlightedItem.id) || $[4] !== inputRef || $[5] !== items || $[6] !== onSelectedChange || $[7] !== selectedItemIds || $[8] !== selectionVariant || $[9] !== setAutocompleteSuggestion || $[10] !== setInputValue || $[11] !== setShowMenu) {
+		t4 = items.map((selectableItem) => ({
 			...selectableItem,
 			role: "option",
 			id: selectableItem.id,
@@ -73,111 +89,219 @@ function AutocompleteMenu(props) {
 					(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.setSelectionRange(inputRef.current.value.length, inputRef.current.value.length);
 				}
 			}
-		};
-	}), [
-		highlightedItem,
-		items,
-		selectedItemIds,
-		inputRef,
-		onSelectedChange,
-		selectionVariant,
-		setAutocompleteSuggestion,
-		setInputValue,
-		setShowMenu
-	]);
-	const itemSortOrderData = useMemo(() => sortedItemIds.reduce((acc, curr, i) => {
-		acc[curr] = i;
-		return acc;
-	}, {}), [sortedItemIds]);
-	const sortedAndFilteredItemsToRender = useMemo(() => selectableItems.filter(filterFn ? filterFn : getDefaultItemFilter(deferredInputValue)).sort((a, b) => itemSortOrderData[a.id] - itemSortOrderData[b.id]), [
-		selectableItems,
-		itemSortOrderData,
-		filterFn,
-		deferredInputValue
-	]);
-	const allItemsToRender = useMemo(() => [...sortedAndFilteredItemsToRender, ...addNewItem ? [{
-		...addNewItem,
-		role: "option",
-		key: addNewItem.id,
-		active: (highlightedItem === null || highlightedItem === void 0 ? void 0 : highlightedItem.id) === addNewItem.id,
-		selected: selectionVariant === "multiple" ? selectedItemIds.includes(addNewItem.id) : void 0,
-		leadingVisual: () => /*#__PURE__*/ jsx(PlusIcon, {}),
-		onAction: (item) => {
-			addNewItem.handleAddItem({
-				...item,
-				id: item.id || generatedUniqueId,
-				leadingVisual: void 0
-			});
-			if (selectionVariant === "multiple") {
-				setInputValue("");
-				setAutocompleteSuggestion("");
+		}));
+		$[3] = highlightedItem === null || highlightedItem === void 0 ? void 0 : highlightedItem.id;
+		$[4] = inputRef;
+		$[5] = items;
+		$[6] = onSelectedChange;
+		$[7] = selectedItemIds;
+		$[8] = selectionVariant;
+		$[9] = setAutocompleteSuggestion;
+		$[10] = setInputValue;
+		$[11] = setShowMenu;
+		$[12] = t4;
+	} else t4 = $[12];
+	const selectableItems = t4;
+	let t5;
+	if ($[13] !== sortedItemIds) {
+		t5 = sortedItemIds.reduce(_temp2, {});
+		$[13] = sortedItemIds;
+		$[14] = t5;
+	} else t5 = $[14];
+	const itemSortOrderData = t5;
+	let t6;
+	if ($[15] !== deferredInputValue || $[16] !== filterFn || $[17] !== itemSortOrderData || $[18] !== selectableItems) {
+		let t7;
+		if ($[20] !== itemSortOrderData) {
+			t7 = (a, b) => itemSortOrderData[a.id] - itemSortOrderData[b.id];
+			$[20] = itemSortOrderData;
+			$[21] = t7;
+		} else t7 = $[21];
+		t6 = selectableItems.filter(filterFn ? filterFn : getDefaultItemFilter(deferredInputValue)).sort(t7);
+		$[15] = deferredInputValue;
+		$[16] = filterFn;
+		$[17] = itemSortOrderData;
+		$[18] = selectableItems;
+		$[19] = t6;
+	} else t6 = $[19];
+	const sortedAndFilteredItemsToRender = t6;
+	let t7;
+	if ($[22] !== addNewItem || $[23] !== generatedUniqueId || $[24] !== (highlightedItem === null || highlightedItem === void 0 ? void 0 : highlightedItem.id) || $[25] !== selectedItemIds || $[26] !== selectionVariant || $[27] !== setAutocompleteSuggestion || $[28] !== setInputValue) {
+		t7 = addNewItem ? [{
+			...addNewItem,
+			role: "option",
+			key: addNewItem.id,
+			active: (highlightedItem === null || highlightedItem === void 0 ? void 0 : highlightedItem.id) === addNewItem.id,
+			selected: selectionVariant === "multiple" ? selectedItemIds.includes(addNewItem.id) : void 0,
+			leadingVisual: _temp3,
+			onAction: (item_0) => {
+				addNewItem.handleAddItem({
+					...item_0,
+					id: item_0.id || generatedUniqueId,
+					leadingVisual: void 0
+				});
+				if (selectionVariant === "multiple") {
+					setInputValue("");
+					setAutocompleteSuggestion("");
+				}
 			}
-		}
-	}] : []], [
-		sortedAndFilteredItemsToRender,
-		addNewItem,
-		setAutocompleteSuggestion,
-		selectionVariant,
-		setInputValue,
-		generatedUniqueId,
-		highlightedItem,
-		selectedItemIds
-	]);
-	React.useEffect(() => {
-		allItemsToRenderRef.current = allItemsToRender;
-	});
-	React.useEffect(() => {
-		if (allItemsToRender.length === 0) debounceAnnouncement(emptyStateText);
-	}, [allItemsToRender, emptyStateText]);
-	useFocusZone({
-		containerRef: listContainerRef,
-		focusOutBehavior: "wrap",
-		focusableElementFilter: (element) => {
-			return !(element instanceof HTMLInputElement);
-		},
-		activeDescendantFocus: inputRef,
-		onActiveDescendantChanged: (current, _previous, directlyActivated) => {
+		}] : [];
+		$[22] = addNewItem;
+		$[23] = generatedUniqueId;
+		$[24] = highlightedItem === null || highlightedItem === void 0 ? void 0 : highlightedItem.id;
+		$[25] = selectedItemIds;
+		$[26] = selectionVariant;
+		$[27] = setAutocompleteSuggestion;
+		$[28] = setInputValue;
+		$[29] = t7;
+	} else t7 = $[29];
+	let t8;
+	if ($[30] !== sortedAndFilteredItemsToRender || $[31] !== t7) {
+		t8 = [...sortedAndFilteredItemsToRender, ...t7];
+		$[30] = sortedAndFilteredItemsToRender;
+		$[31] = t7;
+		$[32] = t8;
+	} else t8 = $[32];
+	const allItemsToRender = t8;
+	let t9;
+	if ($[33] !== allItemsToRender) {
+		t9 = () => {
+			allItemsToRenderRef.current = allItemsToRender;
+		};
+		$[33] = allItemsToRender;
+		$[34] = t9;
+	} else t9 = $[34];
+	React.useEffect(t9);
+	let t10;
+	let t11;
+	if ($[35] !== allItemsToRender || $[36] !== emptyStateText) {
+		t10 = () => {
+			if (allItemsToRender.length === 0) debounceAnnouncement(emptyStateText);
+		};
+		t11 = [allItemsToRender, emptyStateText];
+		$[35] = allItemsToRender;
+		$[36] = emptyStateText;
+		$[37] = t10;
+		$[38] = t11;
+	} else {
+		t10 = $[37];
+		t11 = $[38];
+	}
+	React.useEffect(t10, t11);
+	let t12;
+	if ($[39] !== activeDescendantRef || $[40] !== customScrollContainerRef || $[41] !== scrollContainerRef || $[42] !== setIsMenuDirectlyActivated) {
+		t12 = (current, _previous, directlyActivated) => {
 			activeDescendantRef.current = current || null;
 			if (current) {
-				setHighlightedItem(allItemsToRenderRef.current.find((item) => {
+				setHighlightedItem(allItemsToRenderRef.current.find((item_1) => {
 					var _current$closest;
-					return item.id === ((_current$closest = current.closest("li")) === null || _current$closest === void 0 ? void 0 : _current$closest.getAttribute("data-id"));
+					return item_1.id === ((_current$closest = current.closest("li")) === null || _current$closest === void 0 ? void 0 : _current$closest.getAttribute("data-id"));
 				}));
 				setIsMenuDirectlyActivated(directlyActivated);
 			}
 			if (current && customScrollContainerRef && customScrollContainerRef.current && directlyActivated) scrollIntoView(current, customScrollContainerRef.current, menuScrollMargins);
 			else if (current && scrollContainerRef.current && directlyActivated) scrollIntoView(current, scrollContainerRef.current, menuScrollMargins);
-		}
-	}, [loading]);
-	useEffect(() => {
-		var _highlightedItem$text;
-		if (highlightedItem !== null && highlightedItem !== void 0 && (_highlightedItem$text = highlightedItem.text) !== null && _highlightedItem$text !== void 0 && _highlightedItem$text.startsWith(deferredInputValue) && !selectedItemIds.includes(highlightedItem.id)) setAutocompleteSuggestion(highlightedItem.text);
-		else setAutocompleteSuggestion("");
-	}, [
-		highlightedItem,
-		deferredInputValue,
-		selectedItemIds,
-		setAutocompleteSuggestion
-	]);
-	useEffect(() => {
-		const itemIdSortResult = [...sortedItemIds].sort(sortOnCloseFn ? sortOnCloseFn : getDefaultSortFn((itemId) => isItemSelected(itemId, selectedItemIds)));
-		const sortResultMatchesState = itemIdSortResult.length === sortedItemIds.length && itemIdSortResult.every((element, index) => element === sortedItemIds[index]);
-		if (showMenu === false && !sortResultMatchesState) setSortedItemIds(itemIdSortResult);
-		onOpenChange && onOpenChange(Boolean(showMenu));
-	}, [
-		showMenu,
-		onOpenChange,
-		selectedItemIds,
-		sortOnCloseFn,
-		sortedItemIds
-	]);
-	useEffect(() => {
-		if (selectedItemIds.length) setSelectedItemLength(selectedItemIds.length);
-	}, [selectedItemIds, setSelectedItemLength]);
+		};
+		$[39] = activeDescendantRef;
+		$[40] = customScrollContainerRef;
+		$[41] = scrollContainerRef;
+		$[42] = setIsMenuDirectlyActivated;
+		$[43] = t12;
+	} else t12 = $[43];
+	let t13;
+	if ($[44] !== inputRef || $[45] !== t12) {
+		t13 = {
+			containerRef: listContainerRef,
+			focusOutBehavior: "wrap",
+			focusableElementFilter: _temp4,
+			activeDescendantFocus: inputRef,
+			onActiveDescendantChanged: t12
+		};
+		$[44] = inputRef;
+		$[45] = t12;
+		$[46] = t13;
+	} else t13 = $[46];
+	let t14;
+	if ($[47] !== loading) {
+		t14 = [loading];
+		$[47] = loading;
+		$[48] = t14;
+	} else t14 = $[48];
+	useFocusZone(t13, t14);
+	let t15;
+	let t16;
+	if ($[49] !== deferredInputValue || $[50] !== highlightedItem || $[51] !== selectedItemIds || $[52] !== setAutocompleteSuggestion) {
+		t15 = () => {
+			var _highlightedItem$text;
+			if (highlightedItem !== null && highlightedItem !== void 0 && (_highlightedItem$text = highlightedItem.text) !== null && _highlightedItem$text !== void 0 && _highlightedItem$text.startsWith(deferredInputValue) && !selectedItemIds.includes(highlightedItem.id)) setAutocompleteSuggestion(highlightedItem.text);
+			else setAutocompleteSuggestion("");
+		};
+		t16 = [
+			highlightedItem,
+			deferredInputValue,
+			selectedItemIds,
+			setAutocompleteSuggestion
+		];
+		$[49] = deferredInputValue;
+		$[50] = highlightedItem;
+		$[51] = selectedItemIds;
+		$[52] = setAutocompleteSuggestion;
+		$[53] = t15;
+		$[54] = t16;
+	} else {
+		t15 = $[53];
+		t16 = $[54];
+	}
+	useEffect(t15, t16);
+	let t17;
+	let t18;
+	if ($[55] !== onOpenChange || $[56] !== selectedItemIds || $[57] !== showMenu || $[58] !== sortOnCloseFn || $[59] !== sortedItemIds) {
+		t17 = () => {
+			const itemIdSortResult = [...sortedItemIds].sort(sortOnCloseFn ? sortOnCloseFn : getDefaultSortFn((itemId_0) => isItemSelected(itemId_0, selectedItemIds)));
+			const sortResultMatchesState = itemIdSortResult.length === sortedItemIds.length && itemIdSortResult.every((element_0, index) => element_0 === sortedItemIds[index]);
+			if (showMenu === false && !sortResultMatchesState) setSortedItemIds(itemIdSortResult);
+			onOpenChange && onOpenChange(Boolean(showMenu));
+		};
+		t18 = [
+			showMenu,
+			onOpenChange,
+			selectedItemIds,
+			sortOnCloseFn,
+			sortedItemIds
+		];
+		$[55] = onOpenChange;
+		$[56] = selectedItemIds;
+		$[57] = showMenu;
+		$[58] = sortOnCloseFn;
+		$[59] = sortedItemIds;
+		$[60] = t17;
+		$[61] = t18;
+	} else {
+		t17 = $[60];
+		t18 = $[61];
+	}
+	useEffect(t17, t18);
+	let t19;
+	if ($[62] !== selectedItemIds.length || $[63] !== setSelectedItemLength) {
+		t19 = () => {
+			if (selectedItemIds.length) setSelectedItemLength(selectedItemIds.length);
+		};
+		$[62] = selectedItemIds.length;
+		$[63] = setSelectedItemLength;
+		$[64] = t19;
+	} else t19 = $[64];
+	let t20;
+	if ($[65] !== selectedItemIds || $[66] !== setSelectedItemLength) {
+		t20 = [selectedItemIds, setSelectedItemLength];
+		$[65] = selectedItemIds;
+		$[66] = setSelectedItemLength;
+		$[67] = t20;
+	} else t20 = $[67];
+	useEffect(t19, t20);
 	if (selectionVariant === "single" && selectedItemIds.length > 1) throw new Error("Autocomplete: selectionVariant \"single\" cannot be used with multiple selected items");
-	return /*#__PURE__*/ jsx(VisuallyHidden, {
-		isVisible: showMenu,
-		children: loading ? /*#__PURE__*/ jsx("div", {
+	let t21;
+	if ($[68] !== allItemsToRender || $[69] !== ariaLabelledBy || $[70] !== emptyStateText || $[71] !== id || $[72] !== loading || $[73] !== selectionVariant) {
+		t21 = loading ? /*#__PURE__*/ jsx("div", {
 			className: AutocompleteMenu_module_css_default.SpinnerWrapper,
 			children: /*#__PURE__*/ jsx(Spinner, {})
 		}) : /*#__PURE__*/ jsx("div", {
@@ -188,29 +312,63 @@ function AutocompleteMenu(props) {
 				role: "listbox",
 				id: `${id}-listbox`,
 				"aria-labelledby": ariaLabelledBy,
-				children: allItemsToRender.map((item) => {
-					const { id, onAction, children, text, leadingVisual: LeadingVisual, trailingVisual: TrailingVisual, key, role, ...itemProps } = item;
-					return /*#__PURE__*/ jsxs(ActionList.Item, {
-						onSelect: () => onAction(item),
-						...itemProps,
-						id,
-						"data-id": id,
-						role,
-						children: [
-							LeadingVisual && /*#__PURE__*/ jsx(ActionList.LeadingVisual, { children: isElement(LeadingVisual) ? LeadingVisual : /*#__PURE__*/ jsx(LeadingVisual, {}) }),
-							children !== null && children !== void 0 ? children : text,
-							TrailingVisual && /*#__PURE__*/ jsx(ActionList.TrailingVisual, { children: isElement(TrailingVisual) ? TrailingVisual : /*#__PURE__*/ jsx(TrailingVisual, {}) })
-						]
-					}, key !== null && key !== void 0 ? key : id);
-				})
+				children: allItemsToRender.map(_temp5)
 			}) : emptyStateText !== false && emptyStateText !== null ? /*#__PURE__*/ jsx("div", {
 				className: AutocompleteMenu_module_css_default.EmptyStateWrapper,
 				children: emptyStateText
 			}) : null
-		})
-	});
+		});
+		$[68] = allItemsToRender;
+		$[69] = ariaLabelledBy;
+		$[70] = emptyStateText;
+		$[71] = id;
+		$[72] = loading;
+		$[73] = selectionVariant;
+		$[74] = t21;
+	} else t21 = $[74];
+	let t22;
+	if ($[75] !== showMenu || $[76] !== t21) {
+		t22 = /*#__PURE__*/ jsx(VisuallyHidden, {
+			isVisible: showMenu,
+			children: t21
+		});
+		$[75] = showMenu;
+		$[76] = t21;
+		$[77] = t22;
+	} else t22 = $[77];
+	return t22;
+}
+function _temp5(item_2) {
+	const { id: id_0, onAction, children, text, leadingVisual: LeadingVisual, trailingVisual: TrailingVisual, key, role, ...itemProps } = item_2;
+	return /*#__PURE__*/ jsxs(ActionList.Item, {
+		onSelect: () => onAction(item_2),
+		...itemProps,
+		id: id_0,
+		"data-id": id_0,
+		role,
+		children: [
+			LeadingVisual && /*#__PURE__*/ jsx(ActionList.LeadingVisual, { children: isElement(LeadingVisual) ? LeadingVisual : /*#__PURE__*/ jsx(LeadingVisual, {}) }),
+			children !== null && children !== void 0 ? children : text,
+			TrailingVisual && /*#__PURE__*/ jsx(ActionList.TrailingVisual, { children: isElement(TrailingVisual) ? TrailingVisual : /*#__PURE__*/ jsx(TrailingVisual, {}) })
+		]
+	}, key !== null && key !== void 0 ? key : id_0);
+}
+_temp5.displayName = "_temp5";
+function _temp4(element) {
+	return !(element instanceof HTMLInputElement);
+}
+function _temp3() {
+	return /*#__PURE__*/ jsx(PlusIcon, {});
+}
+_temp3.displayName = "_temp3";
+function _temp2(acc, curr, i) {
+	acc[curr] = i;
+	return acc;
+}
+function _temp(t0) {
+	const { id: itemId } = t0;
+	return itemId;
 }
-AutocompleteMenu.displayName = "AutocompleteMenu";
 AutocompleteMenu.displayName = "AutocompleteMenu";
 AutocompleteMenu.__SLOT__ = Symbol("Autocomplete.Menu");
 //#endregion

package/dist/Autocomplete/AutocompleteOverlay.js

@@ -4,52 +4,127 @@ import VisuallyHidden from "../_VisuallyHidden.js";
 import Overlay from "../Overlay/Overlay.js";
 import { AutocompleteContext } from "./AutocompleteContext.js";
 import AutocompleteOverlay_module_css_default from "./AutocompleteOverlay.module.css.js";
+import { c } from "react-compiler-runtime";
 import { clsx } from "clsx";
 import { jsx } from "react/jsx-runtime";
-import { useCallback, useContext, useEffect, useRef } from "react";
+import { useContext, useEffect, useRef } from "react";
 //#region src/Autocomplete/AutocompleteOverlay.tsx
-function AutocompleteOverlay({ menuAnchorRef, overlayProps: oldOverlayProps, children, className, ...newOverlayProps }) {
+function AutocompleteOverlay(t0) {
+	const $ = c(29);
+	let children;
+	let className;
+	let menuAnchorRef;
+	let newOverlayProps;
+	let oldOverlayProps;
+	if ($[0] !== t0) {
+		({menuAnchorRef, overlayProps: oldOverlayProps, children, className, ...newOverlayProps} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = menuAnchorRef;
+		$[4] = newOverlayProps;
+		$[5] = oldOverlayProps;
+	} else {
+		children = $[1];
+		className = $[2];
+		menuAnchorRef = $[3];
+		newOverlayProps = $[4];
+		oldOverlayProps = $[5];
+	}
 	const autocompleteContext = useContext(AutocompleteContext);
 	if (autocompleteContext === null) throw new Error("AutocompleteContext returned null values");
-	const overlayProps = {
-		...oldOverlayProps,
-		...newOverlayProps
-	};
-	const { inputRef, scrollContainerRef, selectedItemLength, setShowMenu, showMenu = false } = autocompleteContext;
+	let t1;
+	if ($[6] !== newOverlayProps || $[7] !== oldOverlayProps) {
+		t1 = {
+			...oldOverlayProps,
+			...newOverlayProps
+		};
+		$[6] = newOverlayProps;
+		$[7] = oldOverlayProps;
+		$[8] = t1;
+	} else t1 = $[8];
+	const overlayProps = t1;
+	const { inputRef, scrollContainerRef, selectedItemLength, setShowMenu, showMenu: t2 } = autocompleteContext;
+	const showMenu = t2 === void 0 ? false : t2;
 	const computedAnchorRef = useRef(null);
-	useEffect(() => {
-		var _menuAnchorRef$curren, _tokensContainer$pare, _ref;
-		const explicit = (_menuAnchorRef$curren = menuAnchorRef === null || menuAnchorRef === void 0 ? void 0 : menuAnchorRef.current) !== null && _menuAnchorRef$curren !== void 0 ? _menuAnchorRef$curren : null;
-		const tokensContainer = inputRef.current ? inputRef.current.closest("[data-prevent-token-wrapping]") : null;
-		const tokensRoot = (_tokensContainer$pare = tokensContainer === null || tokensContainer === void 0 ? void 0 : tokensContainer.parentElement) !== null && _tokensContainer$pare !== void 0 ? _tokensContainer$pare : null;
-		computedAnchorRef.current = (_ref = explicit !== null && explicit !== void 0 ? explicit : tokensRoot) !== null && _ref !== void 0 ? _ref : inputRef.current;
-	}, [menuAnchorRef, inputRef]);
-	const { floatingElementRef, position } = useAnchoredPosition({
-		side: "outside-bottom",
-		align: "start",
-		anchorElementRef: computedAnchorRef
-	}, [showMenu, selectedItemLength]);
+	let t3;
+	let t4;
+	if ($[9] !== inputRef || $[10] !== menuAnchorRef) {
+		t3 = () => {
+			var _menuAnchorRef$curren, _menuAnchorRef, _tokensContainer$pare, _ref;
+			const explicit = (_menuAnchorRef$curren = (_menuAnchorRef = menuAnchorRef) === null || _menuAnchorRef === void 0 ? void 0 : _menuAnchorRef.current) !== null && _menuAnchorRef$curren !== void 0 ? _menuAnchorRef$curren : null;
+			const tokensContainer = inputRef.current ? inputRef.current.closest("[data-prevent-token-wrapping]") : null;
+			const tokensRoot = (_tokensContainer$pare = tokensContainer === null || tokensContainer === void 0 ? void 0 : tokensContainer.parentElement) !== null && _tokensContainer$pare !== void 0 ? _tokensContainer$pare : null;
+			computedAnchorRef.current = (_ref = explicit !== null && explicit !== void 0 ? explicit : tokensRoot) !== null && _ref !== void 0 ? _ref : inputRef.current;
+		};
+		t4 = [menuAnchorRef, inputRef];
+		$[9] = inputRef;
+		$[10] = menuAnchorRef;
+		$[11] = t3;
+		$[12] = t4;
+	} else {
+		t3 = $[11];
+		t4 = $[12];
+	}
+	useEffect(t3, t4);
+	let t5;
+	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = {
+			side: "outside-bottom",
+			align: "start",
+			anchorElementRef: computedAnchorRef
+		};
+		$[13] = t5;
+	} else t5 = $[13];
+	let t6;
+	if ($[14] !== selectedItemLength || $[15] !== showMenu) {
+		t6 = [showMenu, selectedItemLength];
+		$[14] = selectedItemLength;
+		$[15] = showMenu;
+		$[16] = t6;
+	} else t6 = $[16];
+	const { floatingElementRef, position } = useAnchoredPosition(t5, t6);
 	const mergedScrollContainerRef = useMergedRefs(scrollContainerRef, floatingElementRef);
-	const closeOptionList = useCallback(() => {
-		setShowMenu(false);
-	}, [setShowMenu]);
+	let t7;
+	if ($[17] !== setShowMenu) {
+		t7 = () => {
+			setShowMenu(false);
+		};
+		$[17] = setShowMenu;
+		$[18] = t7;
+	} else t7 = $[18];
+	const closeOptionList = t7;
 	if (typeof window === "undefined") return null;
-	return showMenu ? /*#__PURE__*/ jsx(Overlay, {
-		returnFocusRef: inputRef,
-		preventFocusOnOpen: true,
-		onClickOutside: closeOptionList,
-		onEscape: closeOptionList,
-		ref: mergedScrollContainerRef,
-		top: position === null || position === void 0 ? void 0 : position.top,
-		left: position === null || position === void 0 ? void 0 : position.left,
-		className: clsx(AutocompleteOverlay_module_css_default.Overlay, className),
-		...overlayProps,
-		"data-component": "Autocomplete.Overlay",
-		children
-	}) : /*#__PURE__*/ jsx(VisuallyHidden, {
-		"aria-hidden": "true",
-		children
-	});
+	let t8;
+	if ($[19] !== children || $[20] !== className || $[21] !== closeOptionList || $[22] !== inputRef || $[23] !== mergedScrollContainerRef || $[24] !== overlayProps || $[25] !== (position === null || position === void 0 ? void 0 : position.left) || $[26] !== (position === null || position === void 0 ? void 0 : position.top) || $[27] !== showMenu) {
+		t8 = showMenu ? /*#__PURE__*/ jsx(Overlay, {
+			returnFocusRef: inputRef,
+			preventFocusOnOpen: true,
+			onClickOutside: closeOptionList,
+			onEscape: closeOptionList,
+			ref: mergedScrollContainerRef,
+			top: position === null || position === void 0 ? void 0 : position.top,
+			left: position === null || position === void 0 ? void 0 : position.left,
+			className: clsx(AutocompleteOverlay_module_css_default.Overlay, className),
+			...overlayProps,
+			"data-component": "Autocomplete.Overlay",
+			children
+		}) : /*#__PURE__*/ jsx(VisuallyHidden, {
+			"aria-hidden": "true",
+			children
+		});
+		$[19] = children;
+		$[20] = className;
+		$[21] = closeOptionList;
+		$[22] = inputRef;
+		$[23] = mergedScrollContainerRef;
+		$[24] = overlayProps;
+		$[25] = position === null || position === void 0 ? void 0 : position.left;
+		$[26] = position === null || position === void 0 ? void 0 : position.top;
+		$[27] = showMenu;
+		$[28] = t8;
+	} else t8 = $[28];
+	return t8;
 }
 AutocompleteOverlay.displayName = "AutocompleteOverlay";
 AutocompleteOverlay.__SLOT__ = Symbol("Autocomplete.Overlay");