@persona/design-system 0.1.6 → 0.1.8

package/dist/{Combobox-I44W5oX0.mjs → Combobox-BdqU5WLG.mjs}

@@ -1,20 +1,20 @@
 import { focusStyle } from "./mixins/focus.mjs";
-import { i as Paragraph } from "./Text-hEoPeOc9.mjs";
+import { n as Stack } from "./Stack-Bl54WmhY.mjs";
+import { i as Paragraph } from "./Text-RcEfNFLx.mjs";
 import { useOutsideClick } from "./lib/useOutsideClick.mjs";
 import { Z_INDICES } from "./lib/zindex.mjs";
-import { n as Stack } from "./Stack-ckRN7LrP.mjs";
-import { n as Button } from "./IconButton-DC4rh6ow.mjs";
-import { n as Sticker } from "./Sticker-B0TbkV4o.mjs";
-import { n as useFormField } from "./useFormField-D0RTrPld.mjs";
-import { t as Checkbox } from "./Checkbox-UWdk4pqb.mjs";
-import { c as MenuList, n as IconContainer, o as MenuHeading, s as MenuItem, t as FloatingCard } from "./Menu-BbSyWxFD.mjs";
-import { r as InputGroup } from "./Input-Bl7633Ux.mjs";
+import { n as Button } from "./IconButton-CIWiEsS-.mjs";
+import { c as MenuList, n as IconContainer, o as MenuHeading, s as MenuItem, t as FloatingCard } from "./Menu-CPYXo61N.mjs";
+import { n as useFormField } from "./useFormField-DhYd6bNn.mjs";
+import { r as InputGroup } from "./Input-BFI_e7aU.mjs";
 import Input_default from "./components/Input/index.mjs";
-import { t as Spinner } from "./Spinner-D9-u_5zS.mjs";
+import { t as Spinner } from "./Spinner-BEPF42RW.mjs";
+import { n as Sticker } from "./Sticker-DbqKLe33.mjs";
+import { t as Checkbox } from "./Checkbox-B0bjZbji.mjs";
 import { Color, Spacing, Typography } from "@persona/design-tokens";
 import styled, { css } from "styled-components";
-import { Fragment, cloneElement, forwardRef, isValidElement, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, cloneElement, forwardRef, isValidElement, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { ArrowLeftIcon, CaretDownIcon, ChevronRightIcon, CircleXInverseIcon, SearchIcon } from "@persona/icons";
 import Fuse from "fuse.js";
 import { createPortal } from "react-dom";
@@ -237,7 +237,7 @@ function renderOptionsWithGroups({ options, filteredOptions, renderOption, virtu
 			if (item.nested) return null;
 			const visibleLeaves = flattenOptions(item.options).filter((opt) => filteredOptions.some((filtered) => filtered.value === opt.value));
 			if (visibleLeaves.length === 0) return null;
-			return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MenuHeading, { children: item.label }), visibleLeaves.map((option) => {
+			return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(MenuHeading, { children: item.label }), visibleLeaves.map((option) => {
 				flatIndex++;
 				return renderOption(option, flatIndex);
 			})] }, `group-${groupIndex}`);
@@ -374,6 +374,42 @@ const LoadingContainer = styled.div`
   min-height: 136px;
   padding: ${Spacing[3]};
 `;
+const FooterActionContainer = styled.div`
+  flex-shrink: 0;
+  padding-top: ${Spacing[1]};
+`;
+/**
+* Action button rendered at the bottom of the dropdown, below the option list.
+* Kept out of downshift's `items` list and out of the Tab order, mirroring the
+* `BackRow` affordance: `onMouseDown` preventDefault beats downshift's
+* blur-on-mousedown so the dropdown stays open on click. Keyboard users reach it
+* by arrowing past the last option (the parent drives `isHighlighted` and points
+* the input's `aria-activedescendant` at this button via `id`).
+*/
+function FooterActionRow({ action, size, id, isHighlighted = false }) {
+	const buttonRef = useRef(null);
+	useEffect(() => {
+		if (isHighlighted) buttonRef.current?.scrollIntoView({ block: "nearest" });
+	}, [isHighlighted]);
+	return /* @__PURE__ */ jsx(FooterActionContainer, { children: /* @__PURE__ */ jsx(Button, {
+		ref: buttonRef,
+		id,
+		type: "button",
+		variant: "basic",
+		width: "full",
+		size,
+		tabIndex: -1,
+		active: isHighlighted,
+		onMouseDown: (e) => {
+			e.preventDefault();
+			action.onClick();
+		},
+		onClick: (e) => {
+			if (e.detail === 0) action.onClick();
+		},
+		children: action.label
+	}) });
+}
 const OptionLabel = styled.div`
   overflow: hidden;
   text-overflow: ellipsis;
@@ -440,7 +476,89 @@ function DropdownPortalWrapper({ children, portal }) {
 		"data-react-aria-top-layer": "true",
 		children
 	}), portalRoot.current);
-	return /* @__PURE__ */ jsx(Fragment$1, { children });
+	return /* @__PURE__ */ jsx(Fragment, { children });
+}
+//#endregion
+//#region components/Combobox/useComboboxFooterAction.ts
+/**
+* Shared keyboard-navigation logic for the Combobox `footerAction` button, used
+* by both the single- and multi-select variants. The footer is a real
+* `<button>` outside downshift's item list, so it needs a parallel highlight
+* flag (`isFooterHighlighted`) reached by arrowing past the last option or up
+* from the first option, rather than a downshift `highlightedIndex`. DOM focus
+* stays on the input; the footer is never a Tab stop (mirrors the `BackRow`
+* affordance).
+*/
+function useComboboxFooterAction({ footerAction, isOptionsLoading, itemCount, isMenuOpen, inputValue, highlightedIndex, setHighlightedIndex, inputId }) {
+	const [isFooterHighlighted, setIsFooterHighlighted] = useState(false);
+	const footerActionId = `${inputId}-footer-action`;
+	const showFooterAction = Boolean(footerAction) && !isOptionsLoading && itemCount > 0;
+	useEffect(() => {
+		if (!isMenuOpen) setIsFooterHighlighted(false);
+	}, [isMenuOpen]);
+	useEffect(() => {
+		setIsFooterHighlighted(false);
+	}, [inputValue]);
+	useEffect(() => {
+		if (!showFooterAction) setIsFooterHighlighted(false);
+	}, [showFooterAction]);
+	useEffect(() => {
+		if (highlightedIndex >= 0) setIsFooterHighlighted(false);
+	}, [highlightedIndex]);
+	const clearFooterHighlight = useCallback(() => setIsFooterHighlighted(false), []);
+	return {
+		isFooterHighlighted,
+		footerActionId,
+		showFooterAction,
+		handleFooterKeyDown: useCallback((event) => {
+			if (!showFooterAction) return false;
+			const nativeEvent = event.nativeEvent;
+			const consume = () => {
+				event.preventDefault();
+				nativeEvent.preventDownshiftDefault = true;
+			};
+			if (!isFooterHighlighted && event.key === "ArrowDown" && highlightedIndex === itemCount - 1) {
+				consume();
+				setIsFooterHighlighted(true);
+				setHighlightedIndex(-1);
+				return true;
+			}
+			if (!isFooterHighlighted && event.key === "ArrowUp" && highlightedIndex === 0) {
+				consume();
+				setIsFooterHighlighted(true);
+				setHighlightedIndex(-1);
+				return true;
+			}
+			if (isFooterHighlighted) {
+				if (event.key === "ArrowUp") {
+					consume();
+					setIsFooterHighlighted(false);
+					setHighlightedIndex(itemCount - 1);
+					return true;
+				}
+				if (event.key === "ArrowDown") {
+					consume();
+					setIsFooterHighlighted(false);
+					setHighlightedIndex(0);
+					return true;
+				}
+				if (event.key === "Enter") {
+					consume();
+					footerAction?.onClick();
+					return true;
+				}
+			}
+			return false;
+		}, [
+			showFooterAction,
+			isFooterHighlighted,
+			highlightedIndex,
+			itemCount,
+			footerAction,
+			setHighlightedIndex
+		]),
+		clearFooterHighlight
+	};
 }
 //#endregion
 //#region components/Combobox/useTruncation.ts
@@ -625,7 +743,7 @@ const CheckboxLabel = styled.span`
   position: relative;
   bottom: -1px;
 `;
-function ComboboxMultiSelectComponent({ size = "md", options: rawOptions, isOptionsLoading, values = [], onValuesChange, searchPlaceholder = "Search...", onInputChange, placeholder = "Select an option...", emptyStateMessage = "No options found", disabled = false, hasWarning, hasError, id, labelId, "aria-label": ariaLabel, onOpenChange, truncate = false, selectAll = false, stableOptionOrder = false, portal = false, portalContainerRef: externalPortalContainerRef, trigger, embedded = false, virtualize = false, ...props }, ref) {
+function ComboboxMultiSelectComponent({ size = "md", options: rawOptions, isOptionsLoading, values = [], onValuesChange, searchPlaceholder = "Search...", onInputChange, placeholder = "Select an option...", emptyStateMessage = "No options found", disabled = false, hasWarning, hasError, id, labelId, "aria-label": ariaLabel, onOpenChange, truncate = false, selectAll = false, stableOptionOrder = false, portal = false, portalContainerRef: externalPortalContainerRef, trigger, embedded = false, virtualize = false, footerAction, ...props }, ref) {
 	const options = useMemo(() => containsNestedGroup(rawOptions) ? inlineNestedGroups(rawOptions) : rawOptions, [rawOptions]);
 	const field = useFormField({
 		hasWarning,
@@ -745,6 +863,7 @@ function ComboboxMultiSelectComponent({ size = "md", options: rawOptions, isOpti
 	const itemToString = useCallback((item) => {
 		return item ? item.label : "";
 	}, []);
+	const getOptionId = useCallback((index) => `${field.inputId}-option-${index}`, [field.inputId]);
 	const { addSelectedItem, getSelectedItemProps, getDropdownProps, removeSelectedItem, reset, setSelectedItems } = useMultipleSelection({
 		selectedItems,
 		onStateChange: ({ selectedItems: newSelectedItems, type }) => {
@@ -801,6 +920,7 @@ function ComboboxMultiSelectComponent({ size = "md", options: rawOptions, isOpti
 	const { isOpen, getToggleButtonProps, getMenuProps, getInputProps, getItemProps, highlightedIndex, setHighlightedIndex, closeMenu, openMenu } = useCombobox({
 		items: navigableItems,
 		itemToString,
+		getItemId: getOptionId,
 		isOpen: embedded ? true : void 0,
 		selectedItem: null,
 		initialHighlightedIndex: 0,
@@ -843,7 +963,7 @@ function ComboboxMultiSelectComponent({ size = "md", options: rawOptions, isOpti
 					highlightedIndex: state.highlightedIndex
 				};
 				case useCombobox.stateChangeTypes.InputBlur:
-					if (isOpen) return {
+					if (state.isOpen) return {
 						...changes,
 						isOpen: true
 					};
@@ -906,7 +1026,7 @@ function ComboboxMultiSelectComponent({ size = "md", options: rawOptions, isOpti
 					children: option.labelStickerVariant ? /* @__PURE__ */ jsx(Sticker, {
 						variant: option.labelStickerVariant,
 						children: option.label
-					}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(OptionLabel, {
+					}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(OptionLabel, {
 						title: option.label,
 						$labelStyle: option.PLEASE_DO_NOT_USE_labelFontStyle,
 						children: option.label
@@ -925,6 +1045,16 @@ function ComboboxMultiSelectComponent({ size = "md", options: rawOptions, isOpti
 		selectedState
 	]);
 	const isMenuOpen = isOpen;
+	const { isFooterHighlighted, footerActionId, showFooterAction, handleFooterKeyDown, clearFooterHighlight } = useComboboxFooterAction({
+		footerAction,
+		isOptionsLoading,
+		itemCount: navigableItems.length,
+		isMenuOpen,
+		inputValue,
+		highlightedIndex,
+		setHighlightedIndex,
+		inputId: field.inputId
+	});
 	const handleKeyDown = useCallback((event) => {
 		if (event.key === "Enter" && !isMenuOpen) openMenu();
 	}, [isMenuOpen, openMenu]);
@@ -933,13 +1063,14 @@ function ComboboxMultiSelectComponent({ size = "md", options: rawOptions, isOpti
 		onOpenChange?.(isMenuOpen);
 	}, [isMenuOpen, onOpenChange]);
 	useEffect(() => {
-		if (isMenuOpen && navigableItems.length > 0) {
+		if (isMenuOpen && navigableItems.length > 0 && !isFooterHighlighted) {
 			if (highlightedIndex === -1 || highlightedIndex >= navigableItems.length) setHighlightedIndex(0);
 		}
 	}, [
 		navigableItems,
 		isMenuOpen,
 		highlightedIndex,
+		isFooterHighlighted,
 		setHighlightedIndex
 	]);
 	const searchInputId = `${field.inputId}-search`;
@@ -947,6 +1078,7 @@ function ComboboxMultiSelectComponent({ size = "md", options: rawOptions, isOpti
 		if (isMenuOpen && searchInputRef.current) searchInputRef.current.focus();
 	}, [isMenuOpen]);
 	const handleSearchInputKeyDown = useCallback((e) => {
+		if (handleFooterKeyDown(e)) return;
 		if (e.key === "ArrowDown" && navigableItems.length > 0) {
 			e.preventDefault();
 			setHighlightedIndex(highlightedIndex === -1 ? 0 : (highlightedIndex + 1) % navigableItems.length);
@@ -966,14 +1098,23 @@ function ComboboxMultiSelectComponent({ size = "md", options: rawOptions, isOpti
 			else addSelectedItem(selectedItem);
 		}
 		if (e.key === "Escape") {
+			clearFooterHighlight();
 			closeMenu();
 			if (comboboxInputRef.current) comboboxInputRef.current.focus();
 		}
-		if (e.key === "Tab" && highlightedIndex >= 0 && navigableItems[highlightedIndex]) closeMenu();
+		if (e.key === "Tab") {
+			if (isFooterHighlighted) {
+				clearFooterHighlight();
+				closeMenu();
+			} else if (highlightedIndex >= 0 && navigableItems[highlightedIndex]) closeMenu();
+		}
 	}, [
 		navigableItems,
 		highlightedIndex,
 		setHighlightedIndex,
+		handleFooterKeyDown,
+		isFooterHighlighted,
+		clearFooterHighlight,
 		values,
 		addSelectedItem,
 		removeSelectedItem,
@@ -1009,6 +1150,15 @@ function ComboboxMultiSelectComponent({ size = "md", options: rawOptions, isOpti
 		isMenuOpen,
 		closeMenu
 	]);
+	const searchInputAriaLabel = embedded ? "Search options" : ariaLabel ?? searchPlaceholder;
+	const searchInputDownshiftProps = embedded ? getInputProps(getDropdownProps({
+		ref: searchInputRef,
+		id: searchInputId,
+		"aria-label": searchInputAriaLabel
+	})) : {
+		ref: searchInputRef,
+		id: searchInputId
+	};
 	return /* @__PURE__ */ jsxs(Container, {
 		...props,
 		ref: comboboxContainerRef,
@@ -1128,9 +1278,8 @@ function ComboboxMultiSelectComponent({ size = "md", options: rawOptions, isOpti
 						leftIcon: embedded ? void 0 : /* @__PURE__ */ jsx(SearchIcon, {}),
 						size,
 						children: /* @__PURE__ */ jsx(SearchInput, {
+							...searchInputDownshiftProps,
 							$embedded: embedded,
-							id: searchInputId,
-							ref: searchInputRef,
 							placeholder: searchPlaceholder,
 							value: inputValue,
 							onChange: (e) => {
@@ -1140,7 +1289,8 @@ function ComboboxMultiSelectComponent({ size = "md", options: rawOptions, isOpti
 							onKeyDown: handleSearchInputKeyDown,
 							onBlur: handleSearchInputBlur,
 							disabled: field.disabled,
-							"aria-label": embedded ? "Search options" : ariaLabel ?? searchPlaceholder,
+							"aria-label": searchInputAriaLabel,
+							"aria-activedescendant": isFooterHighlighted ? footerActionId : highlightedIndex >= 0 ? getOptionId(highlightedIndex) : void 0,
 							size
 						})
 					})
@@ -1148,7 +1298,7 @@ function ComboboxMultiSelectComponent({ size = "md", options: rawOptions, isOpti
 					$embedded: embedded,
 					tabIndex: -1,
 					ref: scrollableListRef,
-					children: isMenuOpen && /* @__PURE__ */ jsx(Fragment$1, { children: isOptionsLoading ? /* @__PURE__ */ jsx(LoadingContainer, { children: /* @__PURE__ */ jsx(Spinner, { size: "md" }) }) : navigableItems.length > 0 ? renderOptionsWithGroups({
+					children: isMenuOpen && /* @__PURE__ */ jsxs(Fragment, { children: [isOptionsLoading ? /* @__PURE__ */ jsx(LoadingContainer, { children: /* @__PURE__ */ jsx(Spinner, { size: "md" }) }) : navigableItems.length > 0 ? renderOptionsWithGroups({
 						options: optionsToRender,
 						filteredOptions: navigableItems,
 						renderOption,
@@ -1159,7 +1309,12 @@ function ComboboxMultiSelectComponent({ size = "md", options: rawOptions, isOpti
 						"aria-live": "polite",
 						size,
 						children: emptyStateMessage
-					}) })
+					}), showFooterAction && footerAction && /* @__PURE__ */ jsx(FooterActionRow, {
+						action: footerAction,
+						size,
+						id: footerActionId,
+						isHighlighted: isFooterHighlighted
+					})] })
 				})]
 			})
 		})]
@@ -1188,6 +1343,10 @@ const ParentMenuItem = styled(MenuItem)`
   ${IconContainer} {
     margin-right: 0;
   }
+
+  > ${IconContainer}:first-child:not(:last-child) {
+    margin-right: ${Spacing[2]};
+  }
 `;
 const ParentChevron = styled.span`
   display: inline-flex;
@@ -1229,7 +1388,7 @@ const StickerComboboxInput = styled(ComboboxInput)`
   color: transparent;
   caret-color: transparent;
 `;
-function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading, value, onChange, onInputChange, placeholder = "Select an option...", emptyStateMessage = "No options found", disabled = false, hasWarning, hasError, id, labelId, "aria-label": ariaLabel, onOpenChange, portal = false, portalContainerRef: externalPortalContainerRef, trigger, embedded = false, ...props }, ref) {
+function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading, value, onChange, onInputChange, placeholder = "Select an option...", emptyStateMessage = "No options found", disabled = false, hasWarning, hasError, id, labelId, "aria-label": ariaLabel, onOpenChange, portal = false, portalContainerRef: externalPortalContainerRef, trigger, embedded = false, footerAction, ...props }, ref) {
 	const field = useFormField({
 		hasWarning,
 		hasError,
@@ -1399,7 +1558,7 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 		const labelContent = option.labelStickerVariant ? /* @__PURE__ */ jsx(Sticker, {
 			variant: option.labelStickerVariant,
 			children: option.label
-		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(OptionLabel, {
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(OptionLabel, {
 			title: option.label,
 			$labelStyle: option.PLEASE_DO_NOT_USE_labelFontStyle,
 			children: option.label
@@ -1423,7 +1582,7 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 	]);
 	const renderNestedGroupRow = useCallback((group, currentIndex) => {
 		const isHighlighted = highlightedIndex === currentIndex;
-		return /* @__PURE__ */ jsx(ParentMenuItem, {
+		return /* @__PURE__ */ jsxs(ParentMenuItem, {
 			...getItemProps({
 				item: {
 					kind: "group",
@@ -1433,6 +1592,7 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 			}),
 			"aria-haspopup": "menu",
 			focused: isHighlighted,
+			prefixIcon: group.prefixIcon,
 			size,
 			tabIndex: -1,
 			stretchLabel: true,
@@ -1440,10 +1600,13 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 				"aria-hidden": "true",
 				children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
 			}),
-			children: /* @__PURE__ */ jsx(OptionLabel, {
+			children: [/* @__PURE__ */ jsx(OptionLabel, {
 				title: group.label,
 				children: group.label
-			})
+			}), group.description && /* @__PURE__ */ jsx(Description, {
+				title: group.description,
+				children: group.description
+			})]
 		}, `group-${group.label}-${currentIndex}`);
 	}, [
 		highlightedIndex,
@@ -1457,7 +1620,7 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 				if (node.nested) {
 					if (!downshiftItems.some((i) => i.kind === "group" && i.group === node)) return null;
 					navIndex++;
-					return /* @__PURE__ */ jsx(Fragment, { children: renderNestedGroupRow(node, navIndex) }, key);
+					return /* @__PURE__ */ jsx(Fragment$1, { children: renderNestedGroupRow(node, navIndex) }, key);
 				}
 				const childNodes = [];
 				for (let i = 0; i < node.options.length; i++) {
@@ -1465,7 +1628,7 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 					if (rendered != null) childNodes.push(rendered);
 				}
 				if (childNodes.length === 0) return null;
-				return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MenuHeading, { children: node.label }), childNodes] }, key);
+				return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(MenuHeading, { children: node.label }), childNodes] }, key);
 			}
 			if (!downshiftItems.some((i) => i.kind === "leaf" && i.option === node)) return null;
 			navIndex++;
@@ -1480,12 +1643,24 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 	const renderOption = useCallback((option, currentIndex) => renderLeaf(option, currentIndex), [renderLeaf]);
 	const isMenuOpen = isOpen;
 	const dropdownPosition = useDropdownPosition(portalContainerRef, isMenuOpen, embedded ? false : portal);
+	const { isFooterHighlighted, footerActionId, showFooterAction, handleFooterKeyDown } = useComboboxFooterAction({
+		footerAction,
+		isOptionsLoading,
+		itemCount: downshiftItems.length,
+		isMenuOpen,
+		inputValue,
+		highlightedIndex,
+		setHighlightedIndex,
+		inputId: field.inputId
+	});
 	const handleKeyDown = useCallback((event) => {
 		if (event.key === "Enter" && !isMenuOpen) {
 			openMenu();
 			return;
 		}
-		if (!isMenuOpen || isSearching) return;
+		if (!isMenuOpen) return;
+		if (handleFooterKeyDown(event)) return;
+		if (isSearching) return;
 		if (event.key === "ArrowRight") {
 			const highlighted = downshiftItems[highlightedIndex];
 			if (highlighted && highlighted.kind === "group") {
@@ -1504,6 +1679,7 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 	}, [
 		isMenuOpen,
 		isSearching,
+		handleFooterKeyDown,
 		downshiftItems,
 		highlightedIndex,
 		navigationPath.length,
@@ -1518,13 +1694,14 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 		if (!isMenuOpen) setInputValue(selectedOption?.label || "");
 	}, [selectedOption, isMenuOpen]);
 	useEffect(() => {
-		if (isMenuOpen && downshiftItems.length > 0) {
+		if (isMenuOpen && downshiftItems.length > 0 && !isFooterHighlighted) {
 			if (highlightedIndex === -1 || highlightedIndex >= downshiftItems.length) setHighlightedIndex(0);
 		}
 	}, [
 		downshiftItems,
 		isMenuOpen,
 		highlightedIndex,
+		isFooterHighlighted,
 		setHighlightedIndex
 	]);
 	const displayValue = isMenuOpen ? inputValue : selectedOption?.label || "";
@@ -1551,6 +1728,21 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 		"aria-invalid": field.hasError,
 		onKeyDown: handleKeyDown
 	});
+	if (isFooterHighlighted) searchInputProps["aria-activedescendant"] = footerActionId;
+	const mainInputProps = getInputProps({
+		...props,
+		ref: comboboxInputRef,
+		id: field.inputId,
+		placeholder,
+		disabled: field.disabled,
+		"aria-label": ariaLabel,
+		"aria-labelledby": labelId,
+		"aria-describedby": [field.helperTextId, field.hasWarning ? field.warningTextId : null].filter(Boolean).join(" ") || void 0,
+		"aria-errormessage": field.hasError ? field.errorTextId : void 0,
+		"aria-invalid": field.hasError,
+		onKeyDown: handleKeyDown
+	});
+	if (isFooterHighlighted) mainInputProps["aria-activedescendant"] = footerActionId;
 	return /* @__PURE__ */ jsxs(Container, {
 		...props,
 		ref: internalContainerRef,
@@ -1560,19 +1752,7 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 				children: selectedOption.label
 			}),
 			/* @__PURE__ */ jsx(InputComponent, {
-				...getInputProps({
-					...props,
-					ref: comboboxInputRef,
-					id: field.inputId,
-					placeholder,
-					disabled: field.disabled,
-					"aria-label": ariaLabel,
-					"aria-labelledby": labelId,
-					"aria-describedby": [field.helperTextId, field.hasWarning ? field.warningTextId : null].filter(Boolean).join(" ") || void 0,
-					"aria-errormessage": field.hasError ? field.errorTextId : void 0,
-					"aria-invalid": field.hasError,
-					onKeyDown: handleKeyDown
-				}),
+				...mainInputProps,
 				size,
 				$isOpen: isMenuOpen,
 				hasWarning: field.hasWarning,
@@ -1617,32 +1797,41 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 				}), /* @__PURE__ */ jsx(SingleSelectScrollableMenuList, {
 					$embedded: embedded,
 					tabIndex: -1,
-					children: isMenuOpen && /* @__PURE__ */ jsxs(Fragment$1, { children: [showBackRow && /* @__PURE__ */ jsxs(BackRow, {
-						type: "button",
-						tabIndex: -1,
-						onMouseDown: (event) => {
-							event.preventDefault();
-							handleAscend();
-						},
-						onClick: (event) => {
-							if (event.detail === 0) handleAscend();
-						},
-						"aria-label": "Back to previous menu",
-						$size: size,
-						children: [/* @__PURE__ */ jsx(ArrowLeftIcon, {
-							"aria-hidden": "true",
-							size: size === "sm" ? 12 : 16
-						}), /* @__PURE__ */ jsx("span", { children: "Back" })]
-					}), isOptionsLoading ? /* @__PURE__ */ jsx(LoadingContainer, { children: /* @__PURE__ */ jsx(Spinner, { size: "md" }) }) : downshiftItems.length > 0 ? hasNestedGroups && !isSearching ? renderNestedLevel(nestedOptions) : renderOptionsWithGroups({
-						options: renderSource,
-						filteredOptions,
-						renderOption
-					}) : /* @__PURE__ */ jsx(EmptyState, {
-						role: "status",
-						"aria-live": "polite",
-						size,
-						children: emptyStateMessage
-					})] })
+					children: isMenuOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
+						showBackRow && /* @__PURE__ */ jsxs(BackRow, {
+							type: "button",
+							tabIndex: -1,
+							onMouseDown: (event) => {
+								event.preventDefault();
+								handleAscend();
+							},
+							onClick: (event) => {
+								if (event.detail === 0) handleAscend();
+							},
+							"aria-label": "Back to previous menu",
+							$size: size,
+							children: [/* @__PURE__ */ jsx(ArrowLeftIcon, {
+								"aria-hidden": "true",
+								size: size === "sm" ? 12 : 16
+							}), /* @__PURE__ */ jsx("span", { children: "Back" })]
+						}),
+						isOptionsLoading ? /* @__PURE__ */ jsx(LoadingContainer, { children: /* @__PURE__ */ jsx(Spinner, { size: "md" }) }) : downshiftItems.length > 0 ? hasNestedGroups && !isSearching ? renderNestedLevel(nestedOptions) : renderOptionsWithGroups({
+							options: renderSource,
+							filteredOptions,
+							renderOption
+						}) : /* @__PURE__ */ jsx(EmptyState, {
+							role: "status",
+							"aria-live": "polite",
+							size,
+							children: emptyStateMessage
+						}),
+						showFooterAction && footerAction && /* @__PURE__ */ jsx(FooterActionRow, {
+							action: footerAction,
+							size,
+							id: footerActionId,
+							isHighlighted: isFooterHighlighted
+						})
+					] })
 				})]
 			})
 		})]
@@ -1665,4 +1854,4 @@ const Combobox = forwardRef(ComboboxComponent);
 //#endregion
 export { CaretButton as n, flattenOptions as r, Combobox as t };
 
-//# sourceMappingURL=Combobox-I44W5oX0.mjs.map
+//# sourceMappingURL=Combobox-BdqU5WLG.mjs.map