@launchpad-ui/menu 0.16.16 → 0.16.18

package/dist/index.js

@@ -1,368 +1,411 @@
 require('./style.css');
+"use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-let classix = require("classix");
-let react = require("react");
-let react_aria_FocusScope = require("react-aria/FocusScope");
-let react_virtual = require("react-virtual");
-let react_jsx_runtime = require("react/jsx-runtime");
-let react_aria_useSeparator = require("react-aria/useSeparator");
-let __launchpad_ui_tooltip = require("@launchpad-ui/tooltip");
-let __radix_ui_react_slot = require("@radix-ui/react-slot");
-let react_aria_FocusRing = require("react-aria/FocusRing");
-let __launchpad_ui_form = require("@launchpad-ui/form");
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const FocusScope = require("react-aria/FocusScope");
+const reactVirtual = require("react-virtual");
+const classix = require("classix");
+const useSeparator = require("react-aria/useSeparator");
+const FocusRing = require("react-aria/FocusRing");
+const reactSlot = require("@radix-ui/react-slot");
+const tooltip = require("@launchpad-ui/tooltip");
+const form = require("@launchpad-ui/form");
 const Menu$1 = "C73R2W_Menu";
-var Menu_module_default = {
-	"has-focus": "C73R2W_has-focus",
-	"is-highlighted": "C73R2W_is-highlighted",
-	Menu: Menu$1,
-	"Menu--isVirtual": "C73R2W_Menu--isVirtual",
-	"Menu-divider": "C73R2W_Menu-divider",
-	"Menu-item": "C73R2W_Menu-item",
-	"Menu-item--header": "C73R2W_Menu-item--header",
-	"Menu-item--nested": "C73R2W_Menu-item--nested",
-	"Menu-item-icon": "C73R2W_Menu-item-icon",
-	"Menu-item-list": "C73R2W_Menu-item-list",
-	"Menu-search": "C73R2W_Menu-search",
-	"Menu-search-hidden-placeholder": "C73R2W_Menu-search-hidden-placeholder",
-	"MenuSize--lg": "C73R2W_MenuSize--lg",
-	"MenuSize--md": "C73R2W_MenuSize--md",
-	"MenuSize--sm": "C73R2W_MenuSize--sm",
-	"MenuSize--xl": "C73R2W_MenuSize--xl",
-	"VirtualMenu-item": "C73R2W_VirtualMenu-item",
-	"VirtualMenu-item-list": "C73R2W_VirtualMenu-item-list"
+const styles = {
+  "has-focus": "C73R2W_has-focus",
+  "is-highlighted": "C73R2W_is-highlighted",
+  Menu: Menu$1,
+  "Menu--isVirtual": "C73R2W_Menu--isVirtual",
+  "Menu-divider": "C73R2W_Menu-divider",
+  "Menu-item": "C73R2W_Menu-item",
+  "Menu-item--header": "C73R2W_Menu-item--header",
+  "Menu-item--nested": "C73R2W_Menu-item--nested",
+  "Menu-item-icon": "C73R2W_Menu-item-icon",
+  "Menu-item-list": "C73R2W_Menu-item-list",
+  "Menu-search": "C73R2W_Menu-search",
+  "Menu-search-hidden-placeholder": "C73R2W_Menu-search-hidden-placeholder",
+  "MenuSize--lg": "C73R2W_MenuSize--lg",
+  "MenuSize--md": "C73R2W_MenuSize--md",
+  "MenuSize--sm": "C73R2W_MenuSize--sm",
+  "MenuSize--xl": "C73R2W_MenuSize--xl",
+  "VirtualMenu-item": "C73R2W_VirtualMenu-item",
+  "VirtualMenu-item-list": "C73R2W_VirtualMenu-item-list"
 };
-var MenuBase = /* @__PURE__ */ (0, react.forwardRef)(({ children, size, isVirtual, ...props }, ref) => {
-	const classes = (0, classix.cx)(Menu_module_default.Menu, isVirtual && Menu_module_default["Menu--isVirtual"], size && Menu_module_default[`MenuSize--${size}`]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		...props,
-		role: "menu",
-		className: classes,
-		ref,
-		children
-	});
+const MenuBase = /* @__PURE__ */ react.forwardRef(({ children, size, isVirtual, ...props }, ref) => {
+  const classes = classix.cx(styles.Menu, isVirtual && styles["Menu--isVirtual"], size && styles[`MenuSize--${size}`]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, role: "menu", className: classes, ref, children });
 });
 MenuBase.displayName = "MenuBase";
-var MenuDivider = ({ elementType = "div", orientation, innerRef, "data-test-id": testId = "menu-divider" }) => {
-	const { separatorProps } = (0, react_aria_useSeparator.useSeparator)({
-		orientation,
-		elementType
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		...separatorProps,
-		"data-test-id": testId,
-		ref: innerRef,
-		className: Menu_module_default["Menu-divider"]
-	});
+const MenuDivider = ({
+  elementType = "div",
+  orientation,
+  innerRef,
+  "data-test-id": testId = "menu-divider"
+}) => {
+  const { separatorProps } = useSeparator.useSeparator({
+    orientation,
+    elementType
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...separatorProps, "data-test-id": testId, ref: innerRef, className: styles["Menu-divider"] });
 };
-var defaultElement = "button";
-var MenuItem = ({ ...props }) => {
-	const { component, children, isHighlighted, icon, nested, groupHeader, item, disabled, className, tooltip, role = "menuitem", tooltipPlacement, onKeyDown, tooltipOptions, asChild, "data-test-id": testId = "menu-item", ...rest } = props;
-	const Component = component || (asChild ? __radix_ui_react_slot.Slot : defaultElement);
-	const renderIcon = icon && /* @__PURE__ */ (0, react.cloneElement)(icon, { size: "small" });
-	const renderedItem = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_FocusRing.FocusRing, {
-		focusRingClass: Menu_module_default["has-focus"],
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
-			...rest,
-			disabled,
-			"aria-disabled": disabled ? disabled : void 0,
-			className: (0, classix.cx)(Menu_module_default["Menu-item"], className, isHighlighted && Menu_module_default["is-highlighted"], nested && Menu_module_default["Menu-item--nested"], groupHeader && Menu_module_default["Menu-item--header"]),
-			"data-test-id": testId,
-			role,
-			onKeyDown,
-			children: asChild ? children : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: Menu_module_default["Menu-item-icon"],
-				children: renderIcon
-			}), children] })
-		})
-	});
-	if (tooltip) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__launchpad_ui_tooltip.Tooltip, {
-		content: tooltip,
-		rootElementStyle: { display: "block" },
-		allowBoundaryElementOverflow: true,
-		placement: tooltipPlacement ? tooltipPlacement : "bottom",
-		...tooltipOptions || {},
-		children: renderedItem
-	});
-	return renderedItem;
+const defaultElement = "button";
+const MenuItem = ({ ...props }) => {
+  const {
+    // TODO: remove component prop once we migrate over to asChild format
+    component,
+    children,
+    isHighlighted,
+    icon,
+    nested,
+    groupHeader,
+    // biome-ignore lint/correctness/noUnusedVariables: ignore
+    item,
+    disabled,
+    className,
+    tooltip: tooltip$1,
+    role = "menuitem",
+    tooltipPlacement,
+    onKeyDown,
+    tooltipOptions,
+    asChild,
+    "data-test-id": testId = "menu-item",
+    ...rest
+  } = props;
+  const Component = component || (asChild ? reactSlot.Slot : defaultElement);
+  const renderIcon = icon && /* @__PURE__ */ react.cloneElement(icon, { size: "small" });
+  const renderedItem = /* @__PURE__ */ jsxRuntime.jsx(FocusRing.FocusRing, { focusRingClass: styles["has-focus"], children: /* @__PURE__ */ jsxRuntime.jsx(
+    Component,
+    {
+      ...rest,
+      disabled,
+      "aria-disabled": disabled ? disabled : void 0,
+      className: classix.cx(
+        styles["Menu-item"],
+        className,
+        isHighlighted && styles["is-highlighted"],
+        nested && styles["Menu-item--nested"],
+        groupHeader && styles["Menu-item--header"]
+      ),
+      "data-test-id": testId,
+      role,
+      onKeyDown,
+      children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles["Menu-item-icon"], children: renderIcon }),
+        children
+      ] })
+    }
+  ) });
+  if (tooltip$1) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      tooltip.Tooltip,
+      {
+        content: tooltip$1,
+        rootElementStyle: { display: "block" },
+        allowBoundaryElementOverflow: true,
+        placement: tooltipPlacement ? tooltipPlacement : "bottom",
+        ...tooltipOptions || {},
+        children: renderedItem
+      }
+    );
+  }
+  return renderedItem;
 };
-var MenuItemList = /* @__PURE__ */ (0, react.forwardRef)(({ children, ...rest }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-	...rest,
-	ref,
-	"data-test-id": "menu-item-list",
-	className: Menu_module_default["Menu-item-list"],
-	children
-}));
+const MenuItemList = /* @__PURE__ */ react.forwardRef(({ children, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ...rest, ref, "data-test-id": "menu-item-list", className: styles["Menu-item-list"], children }));
 MenuItemList.displayName = "MenuItemList";
-var MenuSearch = /* @__PURE__ */ (0, react.forwardRef)((props, ref) => {
-	const { ariaLabel, placeholder, id, "data-test-id": testId = "menu-search", ...finalProps } = props;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: Menu_module_default["Menu-search"],
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__launchpad_ui_form.TextField, {
-			...finalProps,
-			ref,
-			className: Menu_module_default["Menu-search-input"],
-			tiny: true,
-			id,
-			type: "search",
-			"data-test-id": testId,
-			autoComplete: "off",
-			placeholder,
-			"aria-label": ariaLabel || "Search"
-		})
-	});
+const MenuSearch = /* @__PURE__ */ react.forwardRef((props, ref) => {
+  const { ariaLabel, placeholder, id, "data-test-id": testId = "menu-search", ...finalProps } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles["Menu-search"], children: /* @__PURE__ */ jsxRuntime.jsx(
+    form.TextField,
+    {
+      ...finalProps,
+      ref,
+      className: styles["Menu-search-input"],
+      tiny: true,
+      id,
+      type: "search",
+      "data-test-id": testId,
+      autoComplete: "off",
+      placeholder,
+      "aria-label": ariaLabel || "Search"
+    }
+  ) });
 });
 MenuSearch.displayName = "MenuSearch";
-var createItemId = (index, id) => `${id}-item-${index}`;
-var getNodeForIndex = (index, menuId) => index === null ? index : document.getElementById(createItemId(index, menuId));
-var handleKeyboardInteractions = (event, keyHandlers) => {
-	const ops = {
-		ArrowUp: keyHandlers.handleUp,
-		ArrowDown: keyHandlers.handleDown,
-		Enter: keyHandlers.handleEnter
-	};
-	if (ops[event.key]) {
-		event.preventDefault();
-		ops[event.key]?.call(globalThis, event);
-	}
+const createItemId = (index, id) => `${id}-item-${index}`;
+const getNodeForIndex = (index, menuId) => index === null ? index : document.getElementById(createItemId(index, menuId));
+const handleKeyboardInteractions = (event, keyHandlers) => {
+  const ops = {
+    ArrowUp: keyHandlers.handleUp,
+    ArrowDown: keyHandlers.handleDown,
+    Enter: keyHandlers.handleEnter
+    // biome-ignore lint/suspicious/noConfusingVoidType: ignore
+  };
+  if (ops[event.key]) {
+    event.preventDefault();
+    ops[event.key]?.call(globalThis, event);
+  }
 };
-var chainEventHandlers = (...handlers) => (event) => {
-	for (const h of handlers) typeof h === "function" && h(event);
+const chainEventHandlers = (...handlers) => (event) => {
+  for (const h of handlers) {
+    typeof h === "function" && h(event);
+  }
 };
-var Menu = (props) => {
-	const { children, menuItemClassName, onSelect, enableVirtualization, itemHeight, size, overscan = 1, "data-test-id": testId = "menu" } = props;
-	const focusManager = (0, react_aria_FocusScope.useFocusManager)();
-	const handleArrowDown = (0, react.useCallback)(() => {
-		focusManager?.focusNext({ wrap: true });
-	}, [focusManager]);
-	const handleArrowUp = (0, react.useCallback)(() => {
-		focusManager?.focusPrevious({ wrap: true });
-	}, [focusManager]);
-	const reduceItems = (0, react.useMemo)(() => {
-		const childrenProps = react.Children.toArray(children);
-		if (enableVirtualization) {
-			let searchElem = null;
-			let elements = [];
-			for (const child of childrenProps) switch (child.type) {
-				case MenuSearch:
-					searchElem = child;
-					break;
-				case MenuItem:
-				case MenuDivider:
-					elements = elements.concat(child);
-					break;
-				default: break;
-			}
-			return {
-				items: elements,
-				searchElement: searchElem
-			};
-		}
-		return childrenProps.reduce(({ items, searchElement }, child) => {
-			switch (child.type) {
-				case MenuSearch: return {
-					items,
-					searchElement: /* @__PURE__ */ (0, react.cloneElement)(child, { onKeyDown: (e) => handleKeyboardInteractions(e, {
-						handleDown: handleArrowDown,
-						handleUp: handleArrowUp
-					}) })
-				};
-				case MenuItem: return {
-					items: items.concat(child.props.disabled ? /* @__PURE__ */ (0, react.cloneElement)(child, {
-						className: (0, classix.cx)(child.props.className, menuItemClassName),
-						onClick: () => void 0,
-						onKeyDown: () => void 0,
-						tabIndex: -1,
-						disabled: true
-					}) : /* @__PURE__ */ (0, react.cloneElement)(child, {
-						className: (0, classix.cx)(child.props.className, menuItemClassName),
-						item: child.props.item ?? items.length,
-						onClick: chainEventHandlers(child.props.onClick, () => {
-							onSelect?.(child.props.item ?? items.length);
-						}),
-						onKeyDown: (e) => handleKeyboardInteractions(e, {
-							handleDown: handleArrowDown,
-							handleUp: handleArrowUp
-						})
-					})),
-					searchElement
-				};
-				case MenuDivider: return {
-					items: items.concat(child),
-					searchElement
-				};
-				default: return {
-					items,
-					searchElement
-				};
-			}
-		}, {
-			items: [],
-			searchElement: null
-		});
-	}, [
-		children,
-		enableVirtualization,
-		menuItemClassName,
-		handleArrowDown,
-		handleArrowUp,
-		onSelect
-	]);
-	if (enableVirtualization) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuBase, {
-		"data-test-id": testId,
-		isVirtual: true,
-		size,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemVirtualizer, {
-			items: react.Children.toArray(reduceItems.items),
-			searchElement: reduceItems.searchElement,
-			overscan,
-			menuItemClassName,
-			onSelect,
-			itemHeight,
-			focusManager
-		})
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(MenuBase, {
-		"data-test-id": testId,
-		size,
-		children: [reduceItems.searchElement, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuItemList, {
-			role: "presentation",
-			children: reduceItems.items
-		})]
-	});
+const Menu = (props) => {
+  const {
+    children,
+    menuItemClassName,
+    onSelect,
+    enableVirtualization,
+    itemHeight,
+    size,
+    overscan = 1,
+    "data-test-id": testId = "menu"
+  } = props;
+  const focusManager = FocusScope.useFocusManager();
+  const handleArrowDown = react.useCallback(() => {
+    focusManager?.focusNext({ wrap: true });
+  }, [focusManager]);
+  const handleArrowUp = react.useCallback(() => {
+    focusManager?.focusPrevious({ wrap: true });
+  }, [focusManager]);
+  const reduceItems = react.useMemo(() => {
+    const childrenProps = react.Children.toArray(children);
+    if (enableVirtualization) {
+      let searchElem = null;
+      let elements = [];
+      for (const child of childrenProps) {
+        switch (child.type) {
+          case MenuSearch:
+            searchElem = child;
+            break;
+          case MenuItem:
+          case MenuDivider:
+            elements = elements.concat(child);
+            break;
+        }
+      }
+      return { items: elements, searchElement: searchElem };
+    }
+    return childrenProps.reduce(
+      ({ items, searchElement }, childElement) => {
+        const child = childElement;
+        switch (child.type) {
+          case MenuSearch:
+            return {
+              items,
+              searchElement: /* @__PURE__ */ react.cloneElement(child, {
+                onKeyDown: (e) => handleKeyboardInteractions(e, {
+                  handleDown: handleArrowDown,
+                  handleUp: handleArrowUp
+                })
+              })
+            };
+          case MenuItem:
+            return {
+              items: items.concat(
+                child.props.disabled ? /* @__PURE__ */ react.cloneElement(child, {
+                  className: classix.cx(child.props.className, menuItemClassName),
+                  onClick: () => void 0,
+                  onKeyDown: () => void 0,
+                  tabIndex: -1,
+                  disabled: true
+                }) : /* @__PURE__ */ react.cloneElement(child, {
+                  className: classix.cx(child.props.className, menuItemClassName),
+                  item: child.props.item ?? items.length,
+                  // set focus on the first menu item if there is no search input, and set in the tab order
+                  onClick: chainEventHandlers(child.props.onClick, () => {
+                    onSelect?.(child.props.item ?? items.length);
+                  }),
+                  onKeyDown: (e) => handleKeyboardInteractions(e, {
+                    handleDown: handleArrowDown,
+                    handleUp: handleArrowUp
+                  })
+                })
+              ),
+              searchElement
+            };
+          case MenuDivider:
+            return { items: items.concat(child), searchElement };
+          default:
+            return { items, searchElement };
+        }
+      },
+      { items: [], searchElement: null }
+    );
+  }, [children, enableVirtualization, menuItemClassName, handleArrowDown, handleArrowUp, onSelect]);
+  if (enableVirtualization) {
+    return /* @__PURE__ */ jsxRuntime.jsx(MenuBase, { "data-test-id": testId, isVirtual: true, size, children: /* @__PURE__ */ jsxRuntime.jsx(
+      ItemVirtualizer,
+      {
+        items: react.Children.toArray(reduceItems.items),
+        searchElement: reduceItems.searchElement,
+        overscan,
+        menuItemClassName,
+        onSelect,
+        itemHeight,
+        focusManager
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(MenuBase, { "data-test-id": testId, size, children: [
+    reduceItems.searchElement,
+    /* @__PURE__ */ jsxRuntime.jsx(MenuItemList, { role: "presentation", children: reduceItems.items })
+  ] });
 };
-var ItemVirtualizer = (props) => {
-	const { overscan, searchElement, itemHeight = 31.5, menuItemClassName, items, focusManager, onSelect } = props;
-	const menuId = (0, react.useRef)(`menu-ctrl-${(0, react.useId)()}`);
-	const focusedItemIndex = (0, react.useRef)(null);
-	const parentRef = (0, react.useRef)(null);
-	const searchRef = (0, react.useRef)(null);
-	const [nextFocusValue, setNextFocusValue] = (0, react.useState)(null);
-	const hasSearch = !!searchElement;
-	const lastVirtualItemIndex = items ? items.length - 1 : 0;
-	const rowVirtualizer = (0, react_virtual.useVirtual)({
-		size: items !== null ? items.length : 0,
-		parentRef,
-		estimateSize: (0, react.useCallback)(() => itemHeight, [itemHeight]),
-		overscan
-	});
-	const focusSearchBar = (0, react.useCallback)(() => {
-		rowVirtualizer.scrollToIndex(0);
-		searchRef.current?.focus?.();
-	}, [rowVirtualizer]);
-	const focusMenuItem = (0, react.useCallback)((index) => {
-		rowVirtualizer.scrollToIndex(index);
-		setNextFocusValue(index);
-	}, [rowVirtualizer]);
-	const handleKeyboardFocusInteraction = (0, react.useCallback)((direction) => {
-		if (focusedItemIndex.current === null || focusedItemIndex.current === void 0) return;
-		const nextIndex = direction === "next" ? focusedItemIndex.current + 1 : focusedItemIndex.current - 1;
-		if (direction === "next" && focusedItemIndex.current === lastVirtualItemIndex || direction === "previous" && focusedItemIndex.current === 0) {
-			if (hasSearch) focusSearchBar();
-			else focusMenuItem(direction === "next" ? 0 : lastVirtualItemIndex);
-			return;
-		}
-		switch (direction) {
-			case "next":
-				rowVirtualizer.scrollToIndex(nextIndex);
-				focusManager?.focusNext();
-				break;
-			case "previous":
-				rowVirtualizer.scrollToIndex(nextIndex);
-				focusManager?.focusPrevious();
-				break;
-			default: break;
-		}
-	}, [
-		focusManager,
-		focusMenuItem,
-		focusSearchBar,
-		hasSearch,
-		lastVirtualItemIndex,
-		rowVirtualizer
-	]);
-	const getItemProps = (0, react.useCallback)((itemElem, index) => {
-		const childProps = itemElem.props;
-		switch (itemElem.type) {
-			case MenuItem: return {
-				className: (0, classix.cx)(childProps.className, menuItemClassName),
-				onKeyDown: childProps.disabled ? () => void 0 : (e) => handleKeyboardFocusKeydown(e, {
-					handleFocusBackward: handleKeyboardFocusInteraction,
-					handleFocusForward: handleKeyboardFocusInteraction
-				}),
-				onFocus: chainEventHandlers(childProps.onFocus, () => {
-					focusedItemIndex.current = index;
-				}),
-				id: createItemId(index, menuId.current),
-				onBlur: chainEventHandlers(childProps.onBlur, () => {
-					focusedItemIndex.current = null;
-				}),
-				onClick: childProps.disabled ? () => void 0 : chainEventHandlers(childProps.onClick, () => {
-					onSelect?.(childProps.item);
-				})
-			};
-			default: return {};
-		}
-	}, [
-		handleKeyboardFocusInteraction,
-		menuItemClassName,
-		onSelect
-	]);
-	(0, react.useEffect)(() => {
-		if (nextFocusValue !== null) {
-			requestAnimationFrame(() => {
-				getNodeForIndex(nextFocusValue, menuId.current)?.focus();
-			});
-			setNextFocusValue(null);
-		}
-	}, [nextFocusValue]);
-	const handleKeyboardFocusKeydown = (e, callbacks) => {
-		if ([
-			"Tab",
-			"ArrowUp",
-			"ArrowDown"
-		].includes(e.key)) {
-			e.preventDefault();
-			e.stopPropagation();
-			if (e.key === "Tab" && e.shiftKey || e.key === "ArrowUp") callbacks.handleFocusBackward?.("previous");
-			else if (e.key === "ArrowDown" || e.key === "Tab") callbacks.handleFocusForward?.("next");
-		}
-	};
-	const renderSearch = (0, react.useMemo)(() => searchElement ? /* @__PURE__ */ (0, react.cloneElement)(searchElement, {
-		onKeyDown: (e) => handleKeyboardFocusKeydown(e, {
-			handleFocusBackward: () => focusMenuItem(lastVirtualItemIndex),
-			handleFocusForward: () => focusMenuItem(0)
-		}),
-		ref: searchRef
-	}) : null, [
-		searchElement,
-		lastVirtualItemIndex,
-		focusMenuItem
-	]);
-	const renderItems = (0, react.useMemo)(() => rowVirtualizer.virtualItems.map((virtualRow) => {
-		if (!items) return null;
-		const elem = items[virtualRow.index];
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			ref: virtualRow.measureRef,
-			role: "presentation",
-			className: Menu_module_default["VirtualMenu-item"],
-			style: { transform: `translateY(${virtualRow.start}px)` },
-			children: /* @__PURE__ */ (0, react.cloneElement)(elem, getItemProps(elem, virtualRow.index))
-		}, virtualRow.index);
-	}), [
-		rowVirtualizer.virtualItems,
-		items,
-		getItemProps
-	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [renderSearch, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuItemList, {
-		ref: parentRef,
-		role: "presentation",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			role: "presentation",
-			className: Menu_module_default["VirtualMenu-item-list"],
-			style: { height: `${rowVirtualizer.totalSize}px` },
-			children: renderItems
-		})
-	})] });
+const ItemVirtualizer = (props) => {
+  const { overscan, searchElement, itemHeight = 31.5, menuItemClassName, items, focusManager, onSelect } = props;
+  const menuId = react.useRef(`menu-ctrl-${react.useId()}`);
+  const focusedItemIndex = react.useRef(null);
+  const parentRef = react.useRef(null);
+  const searchRef = react.useRef(null);
+  const [nextFocusValue, setNextFocusValue] = react.useState(null);
+  const hasSearch = !!searchElement;
+  const lastVirtualItemIndex = items ? items.length - 1 : 0;
+  const rowVirtualizer = reactVirtual.useVirtual({
+    size: items !== null ? items.length : 0,
+    parentRef,
+    estimateSize: react.useCallback(() => itemHeight, [itemHeight]),
+    overscan
+  });
+  const focusSearchBar = react.useCallback(() => {
+    rowVirtualizer.scrollToIndex(0);
+    searchRef.current?.focus?.();
+  }, [rowVirtualizer]);
+  const focusMenuItem = react.useCallback(
+    (index) => {
+      rowVirtualizer.scrollToIndex(index);
+      setNextFocusValue(index);
+    },
+    [rowVirtualizer]
+  );
+  const handleKeyboardFocusInteraction = react.useCallback(
+    (direction) => {
+      if (focusedItemIndex.current === null || focusedItemIndex.current === void 0) {
+        return;
+      }
+      const nextIndex = direction === "next" ? focusedItemIndex.current + 1 : focusedItemIndex.current - 1;
+      const shouldWrap = direction === "next" && focusedItemIndex.current === lastVirtualItemIndex || direction === "previous" && focusedItemIndex.current === 0;
+      if (shouldWrap) {
+        if (hasSearch) {
+          focusSearchBar();
+        } else {
+          focusMenuItem(direction === "next" ? 0 : lastVirtualItemIndex);
+        }
+        return;
+      }
+      switch (direction) {
+        case "next":
+          rowVirtualizer.scrollToIndex(nextIndex);
+          focusManager?.focusNext();
+          break;
+        case "previous":
+          rowVirtualizer.scrollToIndex(nextIndex);
+          focusManager?.focusPrevious();
+          break;
+      }
+    },
+    [focusManager, focusMenuItem, focusSearchBar, hasSearch, lastVirtualItemIndex, rowVirtualizer]
+  );
+  const getItemProps = react.useCallback(
+    (itemElem, index) => {
+      const childProps = itemElem.props;
+      switch (itemElem.type) {
+        case MenuItem:
+          return {
+            className: classix.cx(childProps.className, menuItemClassName),
+            // set focus on the first menu item if there is no search input, and set in the tab order
+            onKeyDown: childProps.disabled ? () => void 0 : (e) => handleKeyboardFocusKeydown(e, {
+              handleFocusBackward: handleKeyboardFocusInteraction,
+              handleFocusForward: handleKeyboardFocusInteraction
+            }),
+            onFocus: chainEventHandlers(childProps.onFocus, () => {
+              focusedItemIndex.current = index;
+            }),
+            id: createItemId(index, menuId.current),
+            onBlur: chainEventHandlers(childProps.onBlur, () => {
+              focusedItemIndex.current = null;
+            }),
+            onClick: childProps.disabled ? () => void 0 : chainEventHandlers(childProps.onClick, () => {
+              onSelect?.(childProps.item);
+            })
+          };
+        default:
+          return {};
+      }
+    },
+    [handleKeyboardFocusInteraction, menuItemClassName, onSelect]
+  );
+  react.useEffect(() => {
+    if (nextFocusValue !== null) {
+      requestAnimationFrame(() => {
+        const element = getNodeForIndex(nextFocusValue, menuId.current);
+        element?.focus();
+      });
+      setNextFocusValue(null);
+    }
+  }, [nextFocusValue]);
+  const handleKeyboardFocusKeydown = (e, callbacks) => {
+    const keyOps = ["Tab", "ArrowUp", "ArrowDown"];
+    if (keyOps.includes(e.key)) {
+      e.preventDefault();
+      e.stopPropagation();
+      if (e.key === "Tab" && e.shiftKey || e.key === "ArrowUp") {
+        callbacks.handleFocusBackward?.("previous");
+      } else if (e.key === "ArrowDown" || e.key === "Tab") {
+        callbacks.handleFocusForward?.("next");
+      }
+    }
+  };
+  const renderSearch = react.useMemo(
+    () => searchElement ? /* @__PURE__ */ react.cloneElement(
+      searchElement,
+      {
+        onKeyDown: (e) => handleKeyboardFocusKeydown(e, {
+          handleFocusBackward: () => focusMenuItem(lastVirtualItemIndex),
+          handleFocusForward: () => focusMenuItem(0)
+        }),
+        ref: searchRef
+      }
+    ) : null,
+    [searchElement, lastVirtualItemIndex, focusMenuItem]
+  );
+  const renderItems = react.useMemo(
+    () => rowVirtualizer.virtualItems.map((virtualRow) => {
+      if (!items) {
+        return null;
+      }
+      const elem = items[virtualRow.index];
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: virtualRow.measureRef,
+          role: "presentation",
+          className: styles["VirtualMenu-item"],
+          style: {
+            transform: `translateY(${virtualRow.start}px)`
+          },
+          children: /* @__PURE__ */ react.cloneElement(elem, getItemProps(elem, virtualRow.index))
+        },
+        virtualRow.index
+      );
+    }),
+    [rowVirtualizer.virtualItems, items, getItemProps]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    renderSearch,
+    /* @__PURE__ */ jsxRuntime.jsx(MenuItemList, { ref: parentRef, role: "presentation", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        role: "presentation",
+        className: styles["VirtualMenu-item-list"],
+        style: {
+          height: `${rowVirtualizer.totalSize}px`
+        },
+        children: renderItems
+      }
+    ) })
+  ] });
 };
 exports.Menu = Menu;
 exports.MenuBase = MenuBase;
@@ -370,5 +413,4 @@ exports.MenuDivider = MenuDivider;
 exports.MenuItem = MenuItem;
 exports.MenuItemList = MenuItemList;
 exports.MenuSearch = MenuSearch;
-
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map