@launchpad-ui/menu 0.13.56 → 0.13.58

package/dist/index.es.js

@@ -1,7 +1,7 @@
 import './style.css';
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { cx } from "classix";
-import { forwardRef, cloneElement, useCallback, useMemo, Children, useRef, useId, useState, useEffect } from "react";
+import { Children, cloneElement, forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useSeparator } from "@react-aria/separator";
 import { Tooltip } from "@launchpad-ui/tooltip";
 import { Slot } from "@radix-ui/react-slot";
@@ -9,438 +9,375 @@ import { FocusRing, useFocusManager } from "@react-aria/focus";
 import { TextField } from "@launchpad-ui/form";
 import { useVirtual } from "react-virtual";
 const Menu$1 = "C73R2W_Menu";
-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 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 MenuBase = /* @__PURE__ */ forwardRef(
-  ({ children, size, isVirtual, ...props }, ref) => {
-    const classes = cx(
-      styles.Menu,
-      isVirtual && styles["Menu--isVirtual"],
-      size && styles[`MenuSize--${size}`]
-    );
-    return /* @__PURE__ */ jsx("div", { ...props, role: "menu", className: classes, ref, children });
-  }
-);
+const MenuBase = /* @__PURE__ */ forwardRef(({ children, size, isVirtual,...props }, ref) => {
+	const classes = cx(Menu_module_default.Menu, isVirtual && Menu_module_default["Menu--isVirtual"], size && Menu_module_default[`MenuSize--${size}`]);
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		role: "menu",
+		className: classes,
+		ref,
+		children
+	});
+});
 MenuBase.displayName = "MenuBase";
-const MenuDivider = ({
-  elementType = "div",
-  orientation,
-  innerRef,
-  "data-test-id": testId = "menu-divider"
-}) => {
-  const { separatorProps } = useSeparator({
-    orientation,
-    elementType
-  });
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...separatorProps,
-      "data-test-id": testId,
-      ref: innerRef,
-      className: styles["Menu-divider"]
-    }
-  );
+const MenuDivider = ({ elementType = "div", orientation, innerRef, "data-test-id": testId = "menu-divider" }) => {
+	const { separatorProps } = useSeparator({
+		orientation,
+		elementType
+	});
+	return /* @__PURE__ */ jsx("div", {
+		...separatorProps,
+		"data-test-id": testId,
+		ref: innerRef,
+		className: Menu_module_default["Menu-divider"]
+	});
 };
 const defaultElement = "button";
-const MenuItem = ({
-  ...props
-}) => {
-  const {
-    // TODO: remove component prop once we migrate over to asChild format
-    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 ? Slot : defaultElement);
-  const renderIcon = icon && /* @__PURE__ */ cloneElement(icon, { size: "small" });
-  const renderedItem = /* @__PURE__ */ jsx(FocusRing, { focusRingClass: styles["has-focus"], children: /* @__PURE__ */ jsx(
-    Component,
-    {
-      ...rest,
-      disabled,
-      "aria-disabled": disabled ? disabled : void 0,
-      className: 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__ */ jsxs(Fragment, { children: [
-        icon && /* @__PURE__ */ jsx("span", { className: styles["Menu-item-icon"], children: renderIcon }),
-        children
-      ] })
-    }
-  ) });
-  if (tooltip) {
-    return /* @__PURE__ */ jsx(
-      Tooltip,
-      {
-        content: tooltip,
-        rootElementStyle: { display: "block" },
-        allowBoundaryElementOverflow: true,
-        placement: tooltipPlacement ? tooltipPlacement : "bottom",
-        ...tooltipOptions || {},
-        children: renderedItem
-      }
-    );
-  }
-  return renderedItem;
+const 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 ? Slot : defaultElement);
+	const renderIcon = icon && /* @__PURE__ */ cloneElement(icon, { size: "small" });
+	const renderedItem = /* @__PURE__ */ jsx(FocusRing, {
+		focusRingClass: Menu_module_default["has-focus"],
+		children: /* @__PURE__ */ jsx(Component, {
+			...rest,
+			disabled,
+			"aria-disabled": disabled ? disabled : void 0,
+			className: 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__ */ jsxs(Fragment, { children: [icon && /* @__PURE__ */ jsx("span", {
+				className: Menu_module_default["Menu-item-icon"],
+				children: renderIcon
+			}), children] })
+		})
+	});
+	if (tooltip) return /* @__PURE__ */ jsx(Tooltip, {
+		content: tooltip,
+		rootElementStyle: { display: "block" },
+		allowBoundaryElementOverflow: true,
+		placement: tooltipPlacement ? tooltipPlacement : "bottom",
+		...tooltipOptions || {},
+		children: renderedItem
+	});
+	return renderedItem;
 };
-const MenuItemList = /* @__PURE__ */ forwardRef(({ children, ...rest }, ref) => /* @__PURE__ */ jsx("div", { ...rest, ref, "data-test-id": "menu-item-list", className: styles["Menu-item-list"], children }));
+const MenuItemList = /* @__PURE__ */ forwardRef(({ children,...rest }, ref) => /* @__PURE__ */ jsx("div", {
+	...rest,
+	ref,
+	"data-test-id": "menu-item-list",
+	className: Menu_module_default["Menu-item-list"],
+	children
+}));
 MenuItemList.displayName = "MenuItemList";
 const MenuSearch = /* @__PURE__ */ forwardRef((props, ref) => {
-  const {
-    ariaLabel,
-    placeholder,
-    id,
-    "data-test-id": testId = "menu-search",
-    ...finalProps
-  } = props;
-  return /* @__PURE__ */ jsx("div", { className: styles["Menu-search"], children: /* @__PURE__ */ jsx(
-    TextField,
-    {
-      ...finalProps,
-      ref,
-      className: styles["Menu-search-input"],
-      tiny: true,
-      id,
-      type: "search",
-      "data-test-id": testId,
-      autoComplete: "off",
-      placeholder,
-      "aria-label": ariaLabel || "Search"
-    }
-  ) });
+	const { ariaLabel, placeholder, id, "data-test-id": testId = "menu-search",...finalProps } = props;
+	return /* @__PURE__ */ jsx("div", {
+		className: Menu_module_default["Menu-search"],
+		children: /* @__PURE__ */ jsx(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"
+		})
+	});
 });
 MenuSearch.displayName = "MenuSearch";
 const createItemId = (index, id) => `${id}-item-${index}`;
 const getNodeForIndex = (index, menuId) => index === null ? index : document.getElementById(createItemId(index, menuId));
 const handleKeyboardInteractions = (event, keyHandlers) => {
-  var _a;
-  const ops = {
-    ArrowUp: keyHandlers.handleUp,
-    ArrowDown: keyHandlers.handleDown,
-    Enter: keyHandlers.handleEnter
-    // biome-ignore lint/suspicious/noConfusingVoidType: <explanation>
-  };
-  if (ops[event.key]) {
-    event.preventDefault();
-    (_a = ops[event.key]) == null ? void 0 : _a.call(globalThis, event);
-  }
+	const ops = {
+		ArrowUp: keyHandlers.handleUp,
+		ArrowDown: keyHandlers.handleDown,
+		Enter: keyHandlers.handleEnter
+	};
+	if (ops[event.key]) {
+		event.preventDefault();
+		ops[event.key]?.call(globalThis, event);
+	}
 };
 const chainEventHandlers = (...handlers) => (event) => {
-  for (const h of handlers) {
-    typeof h === "function" && h(event);
-  }
+	for (const h of handlers) typeof h === "function" && h(event);
 };
+/**
+* @deprecated use `Menu` or `ListBox` from `@launchpad-ui/components` instead
+*
+* https://launchpad.launchdarkly.com/?path=/docs/components-collections-menu--docs
+*/
 const Menu = (props) => {
-  const {
-    children,
-    menuItemClassName,
-    onSelect,
-    enableVirtualization,
-    itemHeight,
-    size,
-    overscan = 1,
-    "data-test-id": testId = "menu"
-  } = props;
-  const focusManager = useFocusManager();
-  const handleArrowDown = useCallback(() => {
-    focusManager == null ? void 0 : focusManager.focusNext({ wrap: true });
-  }, [focusManager]);
-  const handleArrowUp = useCallback(() => {
-    focusManager == null ? void 0 : focusManager.focusPrevious({ wrap: true });
-  }, [focusManager]);
-  const reduceItems = useMemo(() => {
-    const childrenProps = 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 }, child) => {
-        switch (child.type) {
-          case MenuSearch:
-            return {
-              items,
-              searchElement: /* @__PURE__ */ cloneElement(child, {
-                onKeyDown: (e) => handleKeyboardInteractions(e, {
-                  handleDown: handleArrowDown,
-                  handleUp: handleArrowUp
-                })
-              })
-            };
-          case MenuItem:
-            return {
-              items: items.concat(
-                child.props.disabled ? /* @__PURE__ */ cloneElement(child, {
-                  className: cx(child.props.className, menuItemClassName),
-                  onClick: () => void 0,
-                  onKeyDown: () => void 0,
-                  tabIndex: -1,
-                  disabled: true
-                }) : /* @__PURE__ */ cloneElement(child, {
-                  className: 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 == null ? void 0 : 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__ */ jsx(MenuBase, { "data-test-id": testId, isVirtual: true, size, children: /* @__PURE__ */ jsx(
-      ItemVirtualizer,
-      {
-        items: Children.toArray(reduceItems.items),
-        searchElement: reduceItems.searchElement,
-        overscan,
-        menuItemClassName,
-        onSelect,
-        itemHeight,
-        focusManager
-      }
-    ) });
-  }
-  return /* @__PURE__ */ jsxs(MenuBase, { "data-test-id": testId, size, children: [
-    reduceItems.searchElement,
-    /* @__PURE__ */ jsx(MenuItemList, { role: "presentation", children: reduceItems.items })
-  ] });
+	const { children, menuItemClassName, onSelect, enableVirtualization, itemHeight, size, overscan = 1, "data-test-id": testId = "menu" } = props;
+	const focusManager = useFocusManager();
+	const handleArrowDown = useCallback(() => {
+		focusManager?.focusNext({ wrap: true });
+	}, [focusManager]);
+	const handleArrowUp = useCallback(() => {
+		focusManager?.focusPrevious({ wrap: true });
+	}, [focusManager]);
+	const reduceItems = useMemo(() => {
+		const childrenProps = 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__ */ cloneElement(child, { onKeyDown: (e) => handleKeyboardInteractions(e, {
+						handleDown: handleArrowDown,
+						handleUp: handleArrowUp
+					}) })
+				};
+				case MenuItem: return {
+					items: items.concat(child.props.disabled ? /* @__PURE__ */ cloneElement(child, {
+						className: cx(child.props.className, menuItemClassName),
+						onClick: () => void 0,
+						onKeyDown: () => void 0,
+						tabIndex: -1,
+						disabled: true
+					}) : /* @__PURE__ */ cloneElement(child, {
+						className: 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__ */ jsx(MenuBase, {
+		"data-test-id": testId,
+		isVirtual: true,
+		size,
+		children: /* @__PURE__ */ jsx(ItemVirtualizer, {
+			items: Children.toArray(reduceItems.items),
+			searchElement: reduceItems.searchElement,
+			overscan,
+			menuItemClassName,
+			onSelect,
+			itemHeight,
+			focusManager
+		})
+	});
+	return /* @__PURE__ */ jsxs(MenuBase, {
+		"data-test-id": testId,
+		size,
+		children: [reduceItems.searchElement, /* @__PURE__ */ jsx(MenuItemList, {
+			role: "presentation",
+			children: reduceItems.items
+		})]
+	});
 };
 const ItemVirtualizer = (props) => {
-  const {
-    overscan,
-    searchElement,
-    itemHeight = 31.5,
-    menuItemClassName,
-    items,
-    focusManager,
-    onSelect
-  } = props;
-  const menuId = useRef(`menu-ctrl-${useId()}`);
-  const focusedItemIndex = useRef(null);
-  const parentRef = useRef(null);
-  const searchRef = useRef(null);
-  const [nextFocusValue, setNextFocusValue] = useState(null);
-  const hasSearch = !!searchElement;
-  const lastVirtualItemIndex = items ? items.length - 1 : 0;
-  const rowVirtualizer = useVirtual({
-    size: items !== null ? items.length : 0,
-    parentRef,
-    estimateSize: useCallback(() => itemHeight, [itemHeight]),
-    overscan
-  });
-  const focusSearchBar = useCallback(() => {
-    var _a, _b;
-    rowVirtualizer.scrollToIndex(0);
-    (_b = (_a = searchRef.current) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
-  }, [rowVirtualizer]);
-  const focusMenuItem = useCallback(
-    (index) => {
-      rowVirtualizer.scrollToIndex(index);
-      setNextFocusValue(index);
-    },
-    [rowVirtualizer]
-  );
-  const handleKeyboardFocusInteraction = 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 == null ? void 0 : focusManager.focusNext();
-          break;
-        case "previous":
-          rowVirtualizer.scrollToIndex(nextIndex);
-          focusManager == null ? void 0 : focusManager.focusPrevious();
-          break;
-      }
-    },
-    [focusManager, focusMenuItem, focusSearchBar, hasSearch, lastVirtualItemIndex, rowVirtualizer]
-  );
-  const getItemProps = useCallback(
-    (itemElem, index) => {
-      const childProps = itemElem.props;
-      switch (itemElem.type) {
-        case MenuItem:
-          return {
-            className: 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 == null ? void 0 : onSelect(childProps.item);
-            })
-          };
-        default:
-          return {};
-      }
-    },
-    [handleKeyboardFocusInteraction, menuItemClassName, onSelect]
-  );
-  useEffect(() => {
-    if (nextFocusValue !== null) {
-      requestAnimationFrame(() => {
-        const element = getNodeForIndex(nextFocusValue, menuId.current);
-        element == null ? void 0 : element.focus();
-      });
-      setNextFocusValue(null);
-    }
-  }, [nextFocusValue]);
-  const handleKeyboardFocusKeydown = (e, callbacks) => {
-    var _a, _b;
-    const keyOps = ["Tab", "ArrowUp", "ArrowDown"];
-    if (keyOps.includes(e.key)) {
-      e.preventDefault();
-      e.stopPropagation();
-      if (e.key === "Tab" && e.shiftKey || e.key === "ArrowUp") {
-        (_a = callbacks.handleFocusBackward) == null ? void 0 : _a.call(callbacks, "previous");
-      } else if (e.key === "ArrowDown" || e.key === "Tab") {
-        (_b = callbacks.handleFocusForward) == null ? void 0 : _b.call(callbacks, "next");
-      }
-    }
-  };
-  const renderSearch = useMemo(
-    () => searchElement ? (
-      // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-      /* @__PURE__ */ cloneElement(searchElement, {
-        onKeyDown: (e) => handleKeyboardFocusKeydown(e, {
-          handleFocusBackward: () => focusMenuItem(lastVirtualItemIndex),
-          handleFocusForward: () => focusMenuItem(0)
-        }),
-        ref: searchRef
-      })
-    ) : null,
-    [searchElement, lastVirtualItemIndex, focusMenuItem]
-  );
-  const renderItems = useMemo(
-    () => rowVirtualizer.virtualItems.map((virtualRow) => {
-      if (!items) {
-        return null;
-      }
-      const elem = items[virtualRow.index];
-      return /* @__PURE__ */ jsx(
-        "div",
-        {
-          ref: virtualRow.measureRef,
-          role: "presentation",
-          className: styles["VirtualMenu-item"],
-          style: {
-            transform: `translateY(${virtualRow.start}px)`
-          },
-          children: /* @__PURE__ */ cloneElement(elem, getItemProps(elem, virtualRow.index))
-        },
-        virtualRow.index
-      );
-    }),
-    [rowVirtualizer.virtualItems, items, getItemProps]
-  );
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    renderSearch,
-    /* @__PURE__ */ jsx(MenuItemList, { ref: parentRef, role: "presentation", children: /* @__PURE__ */ jsx(
-      "div",
-      {
-        role: "presentation",
-        className: styles["VirtualMenu-item-list"],
-        style: {
-          height: `${rowVirtualizer.totalSize}px`
-        },
-        children: renderItems
-      }
-    ) })
-  ] });
-};
-export {
-  Menu,
-  MenuBase,
-  MenuDivider,
-  MenuItem,
-  MenuItemList,
-  MenuSearch
+	const { overscan, searchElement, itemHeight = 31.5, menuItemClassName, items, focusManager, onSelect } = props;
+	const menuId = useRef(`menu-ctrl-${useId()}`);
+	const focusedItemIndex = useRef(null);
+	const parentRef = useRef(null);
+	const searchRef = useRef(null);
+	const [nextFocusValue, setNextFocusValue] = useState(null);
+	const hasSearch = !!searchElement;
+	const lastVirtualItemIndex = items ? items.length - 1 : 0;
+	const rowVirtualizer = useVirtual({
+		size: items !== null ? items.length : 0,
+		parentRef,
+		estimateSize: useCallback(() => itemHeight, [itemHeight]),
+		overscan
+	});
+	const focusSearchBar = useCallback(() => {
+		rowVirtualizer.scrollToIndex(0);
+		searchRef.current?.focus?.();
+	}, [rowVirtualizer]);
+	/**
+	* Scrolls to the menu item with the index provided and
+	* then manually focuses it using a side effect in useEffect
+	*/
+	const focusMenuItem = useCallback((index) => {
+		rowVirtualizer.scrollToIndex(index);
+		setNextFocusValue(index);
+	}, [rowVirtualizer]);
+	const handleKeyboardFocusInteraction = 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;
+			default: break;
+		}
+	}, [
+		focusManager,
+		focusMenuItem,
+		focusSearchBar,
+		hasSearch,
+		lastVirtualItemIndex,
+		rowVirtualizer
+	]);
+	const getItemProps = useCallback((itemElem, index) => {
+		const childProps = itemElem.props;
+		switch (itemElem.type) {
+			case MenuItem: return {
+				className: 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
+	]);
+	useEffect(() => {
+		if (nextFocusValue !== null) {
+			requestAnimationFrame(() => {
+				const element = getNodeForIndex(nextFocusValue, menuId.current);
+				element?.focus();
+			});
+			setNextFocusValue(null);
+		}
+	}, [nextFocusValue]);
+	/**
+	* Calls handleFocusForward when the user is attempting to focus forward using
+	* tab or arrow keys. Calls handleFocusBackward when the users wants to move backward.
+	*/
+	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 = useMemo(() => searchElement ? /* @__PURE__ */ cloneElement(searchElement, {
+		onKeyDown: (e) => handleKeyboardFocusKeydown(e, {
+			handleFocusBackward: () => focusMenuItem(lastVirtualItemIndex),
+			handleFocusForward: () => focusMenuItem(0)
+		}),
+		ref: searchRef
+	}) : null, [
+		searchElement,
+		lastVirtualItemIndex,
+		focusMenuItem
+	]);
+	const renderItems = useMemo(() => rowVirtualizer.virtualItems.map((virtualRow) => {
+		if (!items) return null;
+		const elem = items[virtualRow.index];
+		return /* @__PURE__ */ jsx("div", {
+			ref: virtualRow.measureRef,
+			role: "presentation",
+			className: Menu_module_default["VirtualMenu-item"],
+			style: { transform: `translateY(${virtualRow.start}px)` },
+			children: /* @__PURE__ */ cloneElement(elem, getItemProps(elem, virtualRow.index))
+		}, virtualRow.index);
+	}), [
+		rowVirtualizer.virtualItems,
+		items,
+		getItemProps
+	]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [renderSearch, /* @__PURE__ */ jsx(MenuItemList, {
+		ref: parentRef,
+		role: "presentation",
+		children: /* @__PURE__ */ jsx("div", {
+			role: "presentation",
+			className: Menu_module_default["VirtualMenu-item-list"],
+			style: { height: `${rowVirtualizer.totalSize}px` },
+			children: renderItems
+		})
+	})] });
 };
-//# sourceMappingURL=index.es.js.map
+export { Menu, MenuBase, MenuDivider, MenuItem, MenuItemList, MenuSearch };
+
+//# sourceMappingURL=index.es.js.map