@persona/design-system 0.1.7 → 0.1.8

package/dist/{Combobox-4Bi9-N1p.cjs → Combobox-COXvmxlM.cjs}

@@ -1,22 +1,22 @@
 const require_chunk = require("./chunk-CKQMccvm.cjs");
 const require_mixins_focus = require("./mixins/focus.cjs");
-const require_Text = require("./Text-CzN0DOXV.cjs");
+const require_Stack = require("./Stack-UeifHn3c.cjs");
+const require_Text = require("./Text-G9QmYf0P.cjs");
 const require_lib_useOutsideClick = require("./lib/useOutsideClick.cjs");
 const require_lib_zindex = require("./lib/zindex.cjs");
-const require_Stack = require("./Stack-BF-9YjA1.cjs");
-const require_IconButton = require("./IconButton-DNy7g5zh.cjs");
-const require_Sticker = require("./Sticker-D0jIU2Dt.cjs");
-const require_useFormField = require("./useFormField-B98dmreO.cjs");
-const require_Input = require("./Input-BDLUq-pK.cjs");
+const require_IconButton = require("./IconButton-nlgjJQCS.cjs");
+const require_Menu = require("./Menu-t2q8NrV0.cjs");
+const require_useFormField = require("./useFormField-BZlArnsI.cjs");
+const require_Input = require("./Input-OJPQ07TW.cjs");
 const require_components_Input_index = require("./components/Input/index.cjs");
-const require_Menu = require("./Menu-BXic-30n.cjs");
-const require_Checkbox = require("./Checkbox-DhxpxzGp.cjs");
 const require_Spinner = require("./Spinner-B6bx70yR.cjs");
+const require_Sticker = require("./Sticker-CIoseh9f.cjs");
+const require_Checkbox = require("./Checkbox-CmCujC1W.cjs");
 let _persona_design_tokens = require("@persona/design-tokens");
 let styled_components = require("styled-components");
 styled_components = require_chunk.__toESM(styled_components);
-let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
 let _persona_icons = require("@persona/icons");
 let fuse_js = require("fuse.js");
 fuse_js = require_chunk.__toESM(fuse_js);
@@ -377,6 +377,42 @@ const LoadingContainer = styled_components.default.div`
   min-height: 136px;
   padding: ${_persona_design_tokens.Spacing[3]};
 `;
+const FooterActionContainer = styled_components.default.div`
+  flex-shrink: 0;
+  padding-top: ${_persona_design_tokens.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 = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		if (isHighlighted) buttonRef.current?.scrollIntoView({ block: "nearest" });
+	}, [isHighlighted]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FooterActionContainer, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.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_components.default.div`
   overflow: hidden;
   text-overflow: ellipsis;
@@ -446,6 +482,88 @@ function DropdownPortalWrapper({ children, portal }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.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] = (0, react.useState)(false);
+	const footerActionId = `${inputId}-footer-action`;
+	const showFooterAction = Boolean(footerAction) && !isOptionsLoading && itemCount > 0;
+	(0, react.useEffect)(() => {
+		if (!isMenuOpen) setIsFooterHighlighted(false);
+	}, [isMenuOpen]);
+	(0, react.useEffect)(() => {
+		setIsFooterHighlighted(false);
+	}, [inputValue]);
+	(0, react.useEffect)(() => {
+		if (!showFooterAction) setIsFooterHighlighted(false);
+	}, [showFooterAction]);
+	(0, react.useEffect)(() => {
+		if (highlightedIndex >= 0) setIsFooterHighlighted(false);
+	}, [highlightedIndex]);
+	const clearFooterHighlight = (0, react.useCallback)(() => setIsFooterHighlighted(false), []);
+	return {
+		isFooterHighlighted,
+		footerActionId,
+		showFooterAction,
+		handleFooterKeyDown: (0, react.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
 /**
 * Custom hook for calculating truncation when multi-select items are restricted to a single line using actual DOM measurements
@@ -628,7 +746,7 @@ const CheckboxLabel = styled_components.default.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 = (0, react.useMemo)(() => containsNestedGroup(rawOptions) ? inlineNestedGroups(rawOptions) : rawOptions, [rawOptions]);
 	const field = require_useFormField.useFormField({
 		hasWarning,
@@ -748,6 +866,7 @@ function ComboboxMultiSelectComponent({ size = "md", options: rawOptions, isOpti
 	const itemToString = (0, react.useCallback)((item) => {
 		return item ? item.label : "";
 	}, []);
+	const getOptionId = (0, react.useCallback)((index) => `${field.inputId}-option-${index}`, [field.inputId]);
 	const { addSelectedItem, getSelectedItemProps, getDropdownProps, removeSelectedItem, reset, setSelectedItems } = (0, downshift.useMultipleSelection)({
 		selectedItems,
 		onStateChange: ({ selectedItems: newSelectedItems, type }) => {
@@ -804,6 +923,7 @@ function ComboboxMultiSelectComponent({ size = "md", options: rawOptions, isOpti
 	const { isOpen, getToggleButtonProps, getMenuProps, getInputProps, getItemProps, highlightedIndex, setHighlightedIndex, closeMenu, openMenu } = (0, downshift.useCombobox)({
 		items: navigableItems,
 		itemToString,
+		getItemId: getOptionId,
 		isOpen: embedded ? true : void 0,
 		selectedItem: null,
 		initialHighlightedIndex: 0,
@@ -928,6 +1048,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 = (0, react.useCallback)((event) => {
 		if (event.key === "Enter" && !isMenuOpen) openMenu();
 	}, [isMenuOpen, openMenu]);
@@ -936,13 +1066,14 @@ function ComboboxMultiSelectComponent({ size = "md", options: rawOptions, isOpti
 		onOpenChange?.(isMenuOpen);
 	}, [isMenuOpen, onOpenChange]);
 	(0, react.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`;
@@ -950,6 +1081,7 @@ function ComboboxMultiSelectComponent({ size = "md", options: rawOptions, isOpti
 		if (isMenuOpen && searchInputRef.current) searchInputRef.current.focus();
 	}, [isMenuOpen]);
 	const handleSearchInputKeyDown = (0, react.useCallback)((e) => {
+		if (handleFooterKeyDown(e)) return;
 		if (e.key === "ArrowDown" && navigableItems.length > 0) {
 			e.preventDefault();
 			setHighlightedIndex(highlightedIndex === -1 ? 0 : (highlightedIndex + 1) % navigableItems.length);
@@ -969,14 +1101,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,
@@ -1012,6 +1153,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__ */ (0, react_jsx_runtime.jsxs)(Container, {
 		...props,
 		ref: comboboxContainerRef,
@@ -1131,9 +1281,8 @@ function ComboboxMultiSelectComponent({ size = "md", options: rawOptions, isOpti
 						leftIcon: embedded ? void 0 : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.SearchIcon, {}),
 						size,
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchInput, {
+							...searchInputDownshiftProps,
 							$embedded: embedded,
-							id: searchInputId,
-							ref: searchInputRef,
 							placeholder: searchPlaceholder,
 							value: inputValue,
 							onChange: (e) => {
@@ -1143,7 +1292,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
 						})
 					})
@@ -1151,7 +1301,7 @@ function ComboboxMultiSelectComponent({ size = "md", options: rawOptions, isOpti
 					$embedded: embedded,
 					tabIndex: -1,
 					ref: scrollableListRef,
-					children: isMenuOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: isOptionsLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoadingContainer, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Spinner.Spinner, { size: "md" }) }) : navigableItems.length > 0 ? renderOptionsWithGroups({
+					children: isMenuOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [isOptionsLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoadingContainer, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Spinner.Spinner, { size: "md" }) }) : navigableItems.length > 0 ? renderOptionsWithGroups({
 						options: optionsToRender,
 						filteredOptions: navigableItems,
 						renderOption,
@@ -1162,7 +1312,12 @@ function ComboboxMultiSelectComponent({ size = "md", options: rawOptions, isOpti
 						"aria-live": "polite",
 						size,
 						children: emptyStateMessage
-					}) })
+					}), showFooterAction && footerAction && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FooterActionRow, {
+						action: footerAction,
+						size,
+						id: footerActionId,
+						isHighlighted: isFooterHighlighted
+					})] })
 				})]
 			})
 		})]
@@ -1236,7 +1391,7 @@ const StickerComboboxInput = (0, styled_components.default)(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 = require_useFormField.useFormField({
 		hasWarning,
 		hasError,
@@ -1430,7 +1585,7 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 	]);
 	const renderNestedGroupRow = (0, react.useCallback)((group, currentIndex) => {
 		const isHighlighted = highlightedIndex === currentIndex;
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ParentMenuItem, {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ParentMenuItem, {
 			...getItemProps({
 				item: {
 					kind: "group",
@@ -1448,10 +1603,13 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 				"aria-hidden": "true",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.ChevronRightIcon, {})
 			}),
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OptionLabel, {
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(OptionLabel, {
 				title: group.label,
 				children: group.label
-			})
+			}), group.description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Description, {
+				title: group.description,
+				children: group.description
+			})]
 		}, `group-${group.label}-${currentIndex}`);
 	}, [
 		highlightedIndex,
@@ -1488,12 +1646,24 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 	const renderOption = (0, react.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 = (0, react.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") {
@@ -1512,6 +1682,7 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 	}, [
 		isMenuOpen,
 		isSearching,
+		handleFooterKeyDown,
 		downshiftItems,
 		highlightedIndex,
 		navigationPath.length,
@@ -1526,13 +1697,14 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 		if (!isMenuOpen) setInputValue(selectedOption?.label || "");
 	}, [selectedOption, isMenuOpen]);
 	(0, react.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 || "";
@@ -1559,6 +1731,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__ */ (0, react_jsx_runtime.jsxs)(Container, {
 		...props,
 		ref: internalContainerRef,
@@ -1568,19 +1755,7 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 				children: selectedOption.label
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.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,
@@ -1625,32 +1800,41 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SingleSelectScrollableMenuList, {
 					$embedded: embedded,
 					tabIndex: -1,
-					children: isMenuOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [showBackRow && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(_persona_icons.ArrowLeftIcon, {
-							"aria-hidden": "true",
-							size: size === "sm" ? 12 : 16
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Back" })]
-					}), isOptionsLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoadingContainer, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Spinner.Spinner, { size: "md" }) }) : downshiftItems.length > 0 ? hasNestedGroups && !isSearching ? renderNestedLevel(nestedOptions) : renderOptionsWithGroups({
-						options: renderSource,
-						filteredOptions,
-						renderOption
-					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmptyState, {
-						role: "status",
-						"aria-live": "polite",
-						size,
-						children: emptyStateMessage
-					})] })
+					children: isMenuOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+						showBackRow && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(_persona_icons.ArrowLeftIcon, {
+								"aria-hidden": "true",
+								size: size === "sm" ? 12 : 16
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Back" })]
+						}),
+						isOptionsLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoadingContainer, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Spinner.Spinner, { size: "md" }) }) : downshiftItems.length > 0 ? hasNestedGroups && !isSearching ? renderNestedLevel(nestedOptions) : renderOptionsWithGroups({
+							options: renderSource,
+							filteredOptions,
+							renderOption
+						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmptyState, {
+							role: "status",
+							"aria-live": "polite",
+							size,
+							children: emptyStateMessage
+						}),
+						showFooterAction && footerAction && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FooterActionRow, {
+							action: footerAction,
+							size,
+							id: footerActionId,
+							isHighlighted: isFooterHighlighted
+						})
+					] })
 				})]
 			})
 		})]
@@ -1690,4 +1874,4 @@ Object.defineProperty(exports, "flattenOptions", {
 	}
 });
 
-//# sourceMappingURL=Combobox-4Bi9-N1p.cjs.map
+//# sourceMappingURL=Combobox-COXvmxlM.cjs.map