@soroush.tech/design-system 2.0.0-rc.3 → 2.0.0-rc.5

package/dist/Autocomplete.cjs

@@ -0,0 +1,664 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("./src-yC1f5WR2.cjs");
+const require_theme = require("./theme-XJvMdOnY.cjs");
+const require_themeDefault = require("./themeDefault-DbPHBbNO.cjs");
+const require_getSurfaceRadius = require("./getSurfaceRadius-DwOn3ALC.cjs");
+const require_useControlled = require("./useControlled-CzCxM4J3.cjs");
+const require_Icon = require("./Icon-C5Iz5ekp.cjs");
+const require_inputVariantStyles = require("./inputVariantStyles-DhClkDHY.cjs");
+const require_FormControlContext = require("./FormControlContext-DvEyxrdM.cjs");
+const require_FormControl = require("./FormControl.cjs");
+const require_Chip = require("./Chip.cjs");
+const require_Portal = require("./Portal.cjs");
+const require_useAnchoredPlacement = require("./useAnchoredPlacement-ee6KzG3t.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
+// src/Autocomplete/hooks/useAutocomplete.ts
+const getStepped = (highlight, step, length) => {
+	if (highlight !== -1) return (highlight + step + length) % length;
+	return step === 1 ? 0 : length - 1;
+};
+const toList = (value, isMultiple) => {
+	if (isMultiple) return value;
+	return value === null ? [] : [value];
+};
+/**
+* The state of an autocomplete: its value (single or several, its own or its owner's), the text
+* in the field, whether the list is open, which option is highlighted, and the handlers that move
+* them. The text shows the chosen option's label until something is typed; typing opens the list
+* and narrows it; choosing, clearing and leaving the field put the text back.
+*/
+function useAutocomplete({ options, multiple, value: valueProp, defaultValue, onChange, inputValue: inputValueProp, onInputChange, getOptionLabel, isOptionEqualToValue, filterOptions, shouldAllowFreeText, disabled }) {
+	const isMultiple = multiple === true;
+	const [value, setValue] = require_useControlled.useControlled({
+		controlled: valueProp,
+		default: defaultValue ?? (isMultiple ? [] : null)
+	});
+	const selected = toList(value, isMultiple);
+	const [typed, setTyped] = (0, react.useState)(null);
+	const [isOpen, setIsOpen] = (0, react.useState)(false);
+	const [highlight, setHighlight] = (0, react.useState)(-1);
+	const chosenLabel = !isMultiple && selected.length > 0 ? getOptionLabel(selected[0]) : "";
+	const inputValue = inputValueProp ?? typed ?? chosenLabel;
+	const filtered = inputValue === chosenLabel ? options : filterOptions(options, { inputValue });
+	const isSelected = (option) => selected.some((entry) => isOptionEqualToValue(option, entry));
+	const setText = (event, text, shown, reason) => {
+		setTyped(text);
+		onInputChange?.(event, shown, reason);
+	};
+	const commit = (event, next, reason) => {
+		const out = isMultiple ? next : next[0] ?? null;
+		setValue(out);
+		onChange?.(event, out, reason);
+	};
+	const open = () => {
+		if (!disabled) setIsOpen(true);
+	};
+	const close = () => {
+		setIsOpen(false);
+		setHighlight(-1);
+	};
+	const selectOption = (event, option) => {
+		if (isMultiple) {
+			const isChosen = isSelected(option);
+			commit(event, isChosen ? selected.filter((entry) => !isOptionEqualToValue(option, entry)) : [...selected, option], isChosen ? "removeOption" : "selectOption");
+			setText(event, null, "", "reset");
+			setHighlight(-1);
+			return;
+		}
+		commit(event, [option], "selectOption");
+		setText(event, null, getOptionLabel(option), "reset");
+		close();
+	};
+	const removeOption = (event, option) => {
+		commit(event, selected.filter((entry) => !isOptionEqualToValue(option, entry)), "removeOption");
+	};
+	const clear = (event) => {
+		commit(event, [], "clear");
+		setText(event, "", "", "clear");
+		close();
+	};
+	const createOption = (event, text) => {
+		const created = text;
+		if (isMultiple) {
+			commit(event, [...selected, created], "createOption");
+			setText(event, null, "", "reset");
+		} else {
+			commit(event, [created], "createOption");
+			setText(event, null, text, "reset");
+			close();
+		}
+	};
+	const handleInputChange = (event) => {
+		setText(event, event.target.value, event.target.value, "input");
+		setHighlight(-1);
+		open();
+	};
+	const moveHighlight = (next) => setHighlight(next);
+	const handleArrow = (event) => {
+		event.preventDefault();
+		if (!isOpen) {
+			open();
+			return;
+		}
+		moveHighlight(getStepped(highlight, event.key === "ArrowDown" ? 1 : -1, filtered.length));
+	};
+	const handleEdge = (event) => {
+		if (!isOpen || highlight === -1) return;
+		event.preventDefault();
+		moveHighlight(event.key === "Home" ? 0 : filtered.length - 1);
+	};
+	const handleEnter = (event) => {
+		if (isOpen && highlight !== -1) {
+			event.preventDefault();
+			selectOption(event, filtered[highlight]);
+		} else if (shouldAllowFreeText && typed) {
+			event.preventDefault();
+			createOption(event, typed);
+		}
+	};
+	const handleEscape = (event) => {
+		if (!isOpen) return;
+		event.preventDefault();
+		close();
+	};
+	const handleBackspace = (event) => {
+		if (isMultiple && inputValue === "" && selected.length > 0) removeOption(event, selected.at(-1));
+	};
+	const keyHandlers = /* @__PURE__ */ new Map([
+		["ArrowDown", handleArrow],
+		["ArrowUp", handleArrow],
+		["Home", handleEdge],
+		["End", handleEdge],
+		["Enter", handleEnter],
+		["Escape", handleEscape],
+		["Backspace", handleBackspace]
+	]);
+	const handleKeyDown = (event) => keyHandlers.get(event.key)?.(event);
+	const handleBlur = (event) => {
+		close();
+		if (typed === null) return;
+		if (shouldAllowFreeText && typed !== "" && typed !== chosenLabel) createOption(event, typed);
+		else setText(event, null, chosenLabel, "reset");
+	};
+	const toggle = () => {
+		if (isOpen) close();
+		else open();
+	};
+	return {
+		selected,
+		inputValue,
+		isOpen,
+		highlight,
+		filtered,
+		hasClearable: selected.length > 0 || inputValue !== "",
+		isSelected,
+		setHighlight: moveHighlight,
+		open,
+		close,
+		toggle,
+		selectOption,
+		removeOption,
+		clear,
+		handlers: {
+			onChange: handleInputChange,
+			onKeyDown: handleKeyDown,
+			onBlur: handleBlur
+		}
+	};
+}
+// src/Autocomplete/Autocomplete.tsx
+const widthStyles = (0, require_src.src_exports.system)({
+	width: true,
+	minWidth: true,
+	maxWidth: true
+});
+const frameStyle = ({ theme, color, textColor, borderRadius, variant, isError, isDisabled, isFullWidth, isInField }) => {
+	const hasCorners = variant === "default" || variant === "outlined";
+	const main = (0, require_src.src_exports.get)(theme, `palette.${color}.main`);
+	const border = isError ? (0, require_src.src_exports.get)(theme, "palette.error.main") : (0, require_src.src_exports.get)(theme, `palette.${color}.light`);
+	return {
+		display: isFullWidth || isInField ? "flex" : "inline-flex",
+		...isFullWidth && { width: "100%" },
+		...isInField && !isFullWidth && { width: "fit-content" },
+		minWidth: require_inputVariantStyles.getInputMinWidth(theme),
+		flexWrap: "wrap",
+		alignItems: "center",
+		gap: theme.space[1],
+		boxSizing: "border-box",
+		transition: "border-color 0.15s ease",
+		backgroundColor: (0, require_src.src_exports.get)(theme, `background.${require_themeDefault.themeDefault(theme, "inputBg", "terminal")}`),
+		color: textColor ? (0, require_src.src_exports.get)(theme, `text.${textColor}`) : main,
+		...hasCorners && borderRadius && { borderRadius: (0, require_src.src_exports.get)(theme, `radii.${borderRadius}`) },
+		fontFamily: (0, require_src.src_exports.get)(theme, "fonts.body"),
+		lineHeight: (0, require_src.src_exports.get)(theme, "lineHeights.base"),
+		borderColor: border,
+		"&:focus-within": { borderColor: isError ? (0, require_src.src_exports.get)(theme, "palette.error.main") : main },
+		"&:has(:focus-visible)": require_inputVariantStyles.getFocusRing(theme, color, isError),
+		...isDisabled && {
+			opacity: .5,
+			cursor: "not-allowed",
+			pointerEvents: "none"
+		}
+	};
+};
+const AutocompleteRoot = require_src.styled("div", {
+	name: "Autocomplete",
+	label: "Autocomplete",
+	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
+		..._soroush_tech_styled_system_should_forward_prop.props,
+		"color",
+		"textColor",
+		"borderRadius",
+		"variant",
+		"isError",
+		"isDisabled",
+		"isFullWidth",
+		"isInField"
+	]),
+	systemProps: [require_src.src_exports.space, widthStyles]
+})(require_inputVariantStyles.inputVariantStyles, frameStyle);
+const AutocompleteTags = require_src.styled("span", {
+	name: "Autocomplete",
+	slot: "tags",
+	label: "AutocompleteTags"
+})(({ theme }) => ({
+	display: "contents",
+	"& > *": { marginInlineStart: theme.space[1] }
+}));
+const AutocompleteInput = require_src.styled("input", {
+	name: "Autocomplete",
+	slot: "input",
+	label: "AutocompleteInput",
+	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)(["sizeToken"])
+})(({ theme, sizeToken }) => {
+	const s = theme.sizes[sizeToken];
+	return {
+		flex: "1 1 6rem",
+		minWidth: 0,
+		width: 0,
+		border: "none",
+		outline: "none",
+		background: "transparent",
+		color: "inherit",
+		fontFamily: "inherit",
+		lineHeight: "inherit",
+		paddingTop: theme.space[s.paddingTop],
+		paddingBottom: theme.space[s.paddingBottom],
+		paddingLeft: theme.space[s.paddingLeft],
+		paddingRight: theme.space[s.paddingRight],
+		fontSize: theme.fontSizes[s.fontSize],
+		"&::placeholder": {
+			color: "inherit",
+			opacity: .5
+		},
+		"&:disabled": { cursor: "not-allowed" }
+	};
+});
+const indicatorStyle = (theme) => ({
+	appearance: "none",
+	display: "inline-grid",
+	placeItems: "center",
+	flexShrink: 0,
+	width: theme.icon.lg,
+	height: theme.icon.lg,
+	margin: 0,
+	padding: 0,
+	border: "none",
+	borderRadius: "50%",
+	background: "transparent",
+	color: "inherit",
+	cursor: "pointer",
+	opacity: .8,
+	"&:hover": { opacity: 1 }
+});
+const AutocompleteClear = require_src.styled("button", {
+	name: "Autocomplete",
+	slot: "clearIndicator",
+	label: "AutocompleteClearIndicator"
+})(({ theme }) => indicatorStyle(theme));
+const AutocompletePopupIndicator = require_src.styled("button", {
+	name: "Autocomplete",
+	slot: "popupIndicator",
+	label: "AutocompletePopupIndicator"
+})(({ theme }) => indicatorStyle(theme));
+const AutocompletePopup = require_src.styled("div", {
+	name: "Autocomplete",
+	slot: "popup",
+	label: "AutocompletePopup",
+	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
+		"layer",
+		"borderRadius",
+		"bg"
+	])
+})(({ theme, layer, borderRadius, bg }) => ({
+	position: "fixed",
+	top: 0,
+	left: 0,
+	visibility: "hidden",
+	zIndex: theme.zOrder[layer],
+	boxSizing: "border-box",
+	maxHeight: "16rem",
+	overflowY: "auto",
+	borderRadius: require_getSurfaceRadius.getSurfaceRadius(theme, borderRadius),
+	boxShadow: theme.shadows[8],
+	backgroundColor: (0, require_src.src_exports.get)(theme, `background.${bg ?? "modal"}`),
+	color: (0, require_src.src_exports.get)(theme, "text.initial"),
+	fontFamily: (0, require_src.src_exports.get)(theme, "fonts.body"),
+	fontSize: theme.fontSizes[1]
+}));
+const AutocompleteListbox = require_src.styled("ul", {
+	name: "Autocomplete",
+	slot: "listbox",
+	label: "AutocompleteListbox"
+})({
+	margin: 0,
+	padding: 0,
+	listStyle: "none"
+});
+const AutocompleteGroup = require_src.styled("li", {
+	name: "Autocomplete",
+	slot: "group",
+	label: "AutocompleteGroup"
+})({
+	margin: 0,
+	padding: 0,
+	listStyle: "none"
+});
+const AutocompleteGroupLabel = require_src.styled("div", {
+	name: "Autocomplete",
+	slot: "groupLabel",
+	label: "AutocompleteGroupLabel"
+})(({ theme }) => ({
+	padding: `${theme.space[1]} ${theme.space[2]}`,
+	fontWeight: (0, require_src.src_exports.get)(theme, "fontWeights.semiBold"),
+	color: (0, require_src.src_exports.get)(theme, "text.secondary")
+}));
+const AutocompleteGroupItems = require_src.styled("ul", {
+	name: "Autocomplete",
+	slot: "groupItems",
+	label: "AutocompleteGroupItems"
+})({
+	margin: 0,
+	padding: 0,
+	listStyle: "none"
+});
+const AutocompleteOption = require_src.styled("li", {
+	name: "Autocomplete",
+	slot: "option",
+	label: "AutocompleteOption",
+	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)(["isHighlighted", "isSelected"])
+})(({ theme, isHighlighted, isSelected }) => ({
+	margin: 0,
+	padding: `${theme.space[1]} ${theme.space[2]}`,
+	cursor: "pointer",
+	...isSelected && { fontWeight: (0, require_src.src_exports.get)(theme, "fontWeights.semiBold") },
+	...isHighlighted && { backgroundColor: (0, require_src.src_exports.get)(theme, "background.secondary") }
+}));
+const AutocompleteStatus = require_src.styled("li", {
+	name: "Autocomplete",
+	slot: "status",
+	label: "AutocompleteStatus"
+})(({ theme }) => ({
+	margin: 0,
+	padding: `${theme.space[1]} ${theme.space[2]}`,
+	listStyle: "none",
+	color: (0, require_src.src_exports.get)(theme, "text.secondary")
+}));
+const groupOptions = (options, groupBy) => {
+	const groups = [];
+	options.forEach((option, index) => {
+		const label = groupBy(option);
+		const last = groups.at(-1);
+		if (last?.label === label) last.rows.push({
+			option,
+			index
+		});
+		else groups.push({
+			label,
+			rows: [{
+				option,
+				index
+			}]
+		});
+	});
+	return groups;
+};
+const useLabels = (given) => {
+	const dp = require_theme.useDefaultProps("Autocomplete");
+	return {
+		clearLabel: given.clearLabel ?? dp.clearLabel,
+		openLabel: given.openLabel ?? dp.openLabel,
+		closeLabel: given.closeLabel ?? dp.closeLabel,
+		loadingText: given.loadingText ?? dp.loadingText,
+		noOptionsText: given.noOptionsText ?? dp.noOptionsText
+	};
+};
+const getHasStatus = (count, isLoading, noOptionsText) => count === 0 && (isLoading || noOptionsText !== void 0);
+const useScrollHighlightIntoView = (isShown, highlight, optionId) => {
+	(0, react.useEffect)(() => {
+		if (!isShown || highlight === -1) return;
+		document.getElementById(optionId(highlight))?.scrollIntoView?.({ block: "nearest" });
+	}, [isShown, highlight]);
+};
+const SelectedTags = ({ selected, getOptionLabel, getRemoveLabel, onRemove, disabled }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AutocompleteTags, { children: selected.map((option, index) => {
+	const label = getOptionLabel(option);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Chip.Chip, {
+		label,
+		size: "sm",
+		disabled,
+		onDelete: getRemoveLabel ? (event) => onRemove(event, option) : void 0,
+		deleteLabel: getRemoveLabel?.(label)
+	}) }, `${label}-${index}`);
+}) });
+const focusOnFramePress = (event, inputRef) => {
+	if (event.target !== event.currentTarget) return;
+	event.preventDefault();
+	inputRef.current?.focus();
+};
+const getListAria = (isShown, highlight, listboxId, optionId) => ({
+	"aria-controls": isShown ? listboxId : void 0,
+	"aria-activedescendant": isShown && highlight !== -1 ? optionId(highlight) : void 0
+});
+const getIndicatorLabel = (isShown, closeLabel, openLabel) => {
+	const label = isShown ? closeLabel : openLabel;
+	return {
+		"aria-label": label,
+		"aria-hidden": label === void 0
+	};
+};
+const useSettings = (given) => {
+	const theme = require_theme.useTheme();
+	const dp = require_theme.useDefaultProps("Autocomplete");
+	return {
+		variant: given.variant ?? dp.variant ?? require_themeDefault.themeDefault(theme, "inputVariant", "default"),
+		shouldAllowFreeText: given.shouldAllowFreeText ?? dp.shouldAllowFreeText ?? false,
+		layer: given.layer ?? dp.layer ?? "modal",
+		borderRadius: given.borderRadius ?? dp.borderRadius,
+		bg: given.bg ?? dp.bg
+	};
+};
+const defaultFilter = (options, { inputValue }, getOptionLabel) => {
+	const wanted = inputValue.toLowerCase();
+	return options.filter((option) => getOptionLabel(option).toLowerCase().includes(wanted));
+};
+const defaultGetOptionLabel = (option) => {
+	if (typeof option === "string") return option;
+	return String(option.label ?? option);
+};
+const getOrigins = ({ isRtl }) => {
+	const edge = isRtl ? "right" : "left";
+	return {
+		anchorOrigin: {
+			vertical: "bottom",
+			horizontal: edge
+		},
+		transformOrigin: {
+			vertical: "top",
+			horizontal: edge
+		}
+	};
+};
+/**
+* @description A field whose text finds an option in a list: a `role="combobox"` input with a
+* listbox below it, `aria-activedescendant` on the highlighted option. ArrowDown and ArrowUp open
+* it and step through the options, Home and End go to the first and the last while it is being
+* walked, Enter chooses, Escape closes. `multiple` shows the choice as `Chip`s, and Backspace in
+* the empty field takes the last off; `shouldAllowFreeText` takes what is typed as a value. In a
+* `FormControl` its `FormLabel` names it, and its size, color, error and disabled state apply.
+*/
+function Autocomplete({ options, value, defaultValue, onChange, inputValue: inputValueProp, onInputChange, multiple, shouldAllowFreeText: shouldAllowFreeTextProp, getOptionLabel = defaultGetOptionLabel, isOptionEqualToValue = (option, chosen) => option === chosen, filterOptions, groupBy, renderOption, isLoading = false, loadingText: loadingTextProp, noOptionsText: noOptionsTextProp, clearLabel: clearLabelProp, openLabel: openLabelProp, closeLabel: closeLabelProp, getRemoveLabel, placeholder, variant: variantProp, size: sizeProp, color: colorProp, textColor: textColorProp, borderRadius: borderRadiusProp, bg: bgProp, disabled: disabledProp, error: errorProp, required: requiredProp, fullWidth: fullWidthProp, name, id: idProp, layer: layerProp, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "data-testid": dataTestid, ...spaceProps }) {
+	const theme = require_theme.useTheme();
+	const dp = require_theme.useDefaultProps("Autocomplete");
+	const isInField = (0, react.useContext)(require_FormControlContext.FormControlContext) !== null;
+	const fc = require_FormControl.useFormControl({
+		id: idProp,
+		error: errorProp,
+		disabled: disabledProp,
+		required: requiredProp,
+		size: sizeProp ?? dp.size,
+		fullWidth: fullWidthProp,
+		color: colorProp ?? dp.color,
+		textColor: textColorProp ?? dp.textColor
+	});
+	const color = fc.color ?? require_themeDefault.themeDefault(theme, "color", "primary");
+	const { variant, shouldAllowFreeText, layer, borderRadius, bg } = useSettings({
+		variant: variantProp,
+		shouldAllowFreeText: shouldAllowFreeTextProp,
+		layer: layerProp,
+		borderRadius: borderRadiusProp,
+		bg: bgProp
+	});
+	const { clearLabel, openLabel, closeLabel, loadingText, noOptionsText } = useLabels({
+		clearLabel: clearLabelProp,
+		openLabel: openLabelProp,
+		closeLabel: closeLabelProp,
+		loadingText: loadingTextProp,
+		noOptionsText: noOptionsTextProp
+	});
+	const baseId = (0, react.useId)();
+	const listboxId = `${baseId}-listbox`;
+	const optionId = (index) => `${baseId}-option-${index}`;
+	const state = useAutocomplete({
+		options,
+		multiple,
+		value,
+		defaultValue,
+		onChange,
+		inputValue: inputValueProp,
+		onInputChange,
+		getOptionLabel,
+		isOptionEqualToValue,
+		filterOptions: filterOptions ?? ((list, query) => defaultFilter(list, query, getOptionLabel)),
+		shouldAllowFreeText,
+		disabled: fc.disabled
+	});
+	const { filtered, highlight } = state;
+	const hasStatus = getHasStatus(filtered.length, isLoading, noOptionsText);
+	const isShown = state.isOpen && !fc.disabled && (filtered.length > 0 || hasStatus);
+	const isRequired = fc.required && state.selected.length === 0;
+	const frameRef = (0, react.useRef)(null);
+	const popupRef = (0, react.useRef)(null);
+	const inputRef = (0, react.useRef)(null);
+	const onPlaced = (0, react.useCallback)(({ anchorRect }) => {
+		popupRef.current.style.minWidth = `${anchorRect.width}px`;
+	}, []);
+	require_useAnchoredPlacement.useAnchoredPlacement({
+		isOpen: isShown,
+		anchorRef: frameRef,
+		surfaceRef: popupRef,
+		getOrigins,
+		margin: 8,
+		onPlaced
+	});
+	useScrollHighlightIntoView(isShown, highlight, optionId);
+	const renderRow = (option, index) => {
+		const isSelected = state.isSelected(option);
+		const isHighlighted = index === highlight;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AutocompleteOption, {
+			id: optionId(index),
+			role: "option",
+			"aria-selected": isSelected,
+			isSelected,
+			isHighlighted,
+			onClick: (event) => state.selectOption(event, option),
+			onMouseMove: () => !isHighlighted && state.setHighlight(index),
+			children: renderOption ? renderOption(option, {
+				isSelected,
+				isHighlighted
+			}) : getOptionLabel(option)
+		}, index);
+	};
+	const renderRows = () => {
+		if (!groupBy) return filtered.map((option, index) => renderRow(option, index));
+		return groupOptions(filtered, groupBy).map((group, position) => {
+			const groupId = `${baseId}-group-${position}`;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(AutocompleteGroup, {
+				role: "presentation",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AutocompleteGroupLabel, {
+					id: groupId,
+					children: group.label
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AutocompleteGroupItems, {
+					role: "group",
+					"aria-labelledby": groupId,
+					children: group.rows.map(({ option, index }) => renderRow(option, index))
+				})]
+			}, groupId);
+		});
+	};
+	const handleKeyDown = state.handlers.onKeyDown;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(AutocompleteRoot, {
+		ref: frameRef,
+		color,
+		textColor: fc.textColor,
+		borderRadius,
+		variant,
+		isError: fc.error,
+		isDisabled: fc.disabled,
+		isFullWidth: fc.fullWidth,
+		isInField,
+		className,
+		"data-testid": dataTestid,
+		onMouseDown: (event) => focusOnFramePress(event, inputRef),
+		...spaceProps,
+		children: [
+			multiple === true && state.selected.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectedTags, {
+				selected: state.selected,
+				getOptionLabel,
+				getRemoveLabel,
+				onRemove: state.removeOption,
+				disabled: fc.disabled
+			}) : null,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AutocompleteInput, {
+				ref: inputRef,
+				id: fc.id,
+				name,
+				type: "text",
+				role: "combobox",
+				"aria-autocomplete": "list",
+				"aria-expanded": isShown,
+				...getListAria(isShown, highlight, listboxId, optionId),
+				"aria-label": ariaLabel,
+				"aria-labelledby": ariaLabelledby,
+				"aria-describedby": ariaDescribedby ?? fc["aria-describedby"],
+				"aria-invalid": fc.error || void 0,
+				"aria-required": isRequired || void 0,
+				autoComplete: "off",
+				sizeToken: fc.size,
+				placeholder,
+				disabled: fc.disabled,
+				required: isRequired,
+				value: state.inputValue,
+				onChange: state.handlers.onChange,
+				onKeyDown: handleKeyDown,
+				onBlur: state.handlers.onBlur
+			}),
+			clearLabel !== void 0 && state.hasClearable && !fc.disabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AutocompleteClear, {
+				type: "button",
+				tabIndex: -1,
+				"aria-label": clearLabel,
+				onClick: state.clear,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+					name: "close",
+					size: fc.size,
+					color: "inherit"
+				})
+			}) : null,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AutocompletePopupIndicator, {
+				type: "button",
+				tabIndex: -1,
+				...getIndicatorLabel(isShown, closeLabel, openLabel),
+				disabled: fc.disabled,
+				onMouseDown: (event) => event.preventDefault(),
+				onClick: () => {
+					state.toggle();
+					inputRef.current?.focus();
+				},
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+					name: isShown ? "expand_less" : "expand_more",
+					size: fc.size,
+					color: "inherit"
+				})
+			})
+		]
+	}), isShown && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Portal.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AutocompletePopup, {
+		ref: popupRef,
+		layer,
+		borderRadius,
+		bg,
+		onMouseDown: (event) => event.preventDefault(),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AutocompleteListbox, {
+			id: listboxId,
+			role: "listbox",
+			"aria-multiselectable": multiple === true ? true : void 0,
+			"aria-label": ariaLabel,
+			"aria-labelledby": ariaLabelledby,
+			children: filtered.length > 0 ? renderRows() : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AutocompleteStatus, {
+				role: "presentation",
+				children: isLoading ? loadingText : noOptionsText
+			})
+		})
+	}) })] });
+}
+exports.Autocomplete = Autocomplete;