@launchpad-ui/menu 0.4.7 → 0.5.1

package/dist/index.js

@@ -1,82 +1,53 @@
+require('./style.css');
 "use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  Menu: () => Menu,
-  MenuBase: () => MenuBase,
-  MenuDivider: () => MenuDivider,
-  MenuItem: () => MenuItem,
-  MenuItemLink: () => MenuItemLink,
-  MenuItemList: () => MenuItemList,
-  MenuSearch: () => MenuSearch,
-  MenuSize: () => MenuSize
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const classix = require("classix");
+const react = require("react");
+const jsxRuntime = require("react/jsx-runtime");
+const separator = require("@react-aria/separator");
+const icons = require("@launchpad-ui/icons");
+const tooltip = require("@launchpad-ui/tooltip");
+const reactSlot = require("@radix-ui/react-slot");
+const focus = require("@react-aria/focus");
+const reactRouterDom = require("react-router-dom");
+const form = require("@launchpad-ui/form");
+const reactVirtual = require("react-virtual");
+const Menu$1 = "";
+const MenuBase = react.forwardRef(({
+  children,
+  size,
+  isVirtual,
+  ...props
+}, ref) => {
+  const classes = classix.cx("Menu", isVirtual && "Menu--isVirtual", size && `MenuSize--${size}`);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    ...props,
+    role: "menu",
+    className: classes,
+    ref,
+    children
+  });
 });
-module.exports = __toCommonJS(src_exports);
-
-// src/MenuBase.tsx
-var import_classix = require("classix");
-var import_react = require("react");
-var import_Menu = require("./styles/Menu.css");
-var import_jsx_runtime = require("react/jsx-runtime");
-var MenuBase = (0, import_react.forwardRef)(
-  ({ children, size, isVirtual, ...props }, ref) => {
-    const classes = (0, import_classix.cx)("Menu", isVirtual && "Menu--isVirtual", size && `MenuSize--${size}`);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-      ...props,
-      role: "menu",
-      className: classes,
-      ref,
-      children
-    });
-  }
-);
 MenuBase.displayName = "MenuBase";
-
-// src/MenuDivider.tsx
-var import_separator = require("@react-aria/separator");
-var import_Menu2 = require("./styles/Menu.css");
-var import_jsx_runtime = require("react/jsx-runtime");
-var MenuDivider = ({ elementType = "div", orientation, innerRef }) => {
-  const { separatorProps } = (0, import_separator.useSeparator)({
+const MenuDivider = ({
+  elementType = "div",
+  orientation,
+  innerRef
+}) => {
+  const {
+    separatorProps
+  } = separator.useSeparator({
     orientation,
     elementType
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
     ...separatorProps,
     ref: innerRef,
     className: "Menu-divider"
   });
 };
-
-// src/MenuItem.tsx
-var import_icons = require("@launchpad-ui/icons");
-var import_tooltip = require("@launchpad-ui/tooltip");
-var import_react_slot = require("@radix-ui/react-slot");
-var import_focus = require("@react-aria/focus");
-var import_classix2 = require("classix");
-var import_react_router_dom = require("react-router-dom");
-var import_Menu3 = require("./styles/Menu.css");
-var import_jsx_runtime = require("react/jsx-runtime");
-var defaultElement = "button";
-var MenuItem = ({
+const defaultElement = "button";
+const MenuItem = ({
   ...props
 }) => {
   const {
@@ -89,7 +60,7 @@ var MenuItem = ({
     item,
     disabled,
     className,
-    tooltip,
+    tooltip: tooltip$1,
     role = "menuitem",
     tooltipPlacement,
     onKeyDown,
@@ -97,39 +68,32 @@ var MenuItem = ({
     asChild,
     ...rest
   } = props;
-  const Component = component || (asChild ? import_react_slot.Slot : defaultElement);
-  const renderedItem = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_focus.FocusRing, {
+  const Component = component || (asChild ? reactSlot.Slot : defaultElement);
+  const renderedItem = /* @__PURE__ */ jsxRuntime.jsx(focus.FocusRing, {
     focusRingClass: "has-focus",
-    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {
+    children: /* @__PURE__ */ jsxRuntime.jsx(Component, {
       ...rest,
       disabled,
       "aria-disabled": disabled ? disabled : void 0,
-      className: (0, import_classix2.cx)(
-        "Menu-item",
-        className,
-        isHighlighted && "is-highlighted",
-        nested && "Menu-item--nested",
-        groupHeader && "Menu-item--header"
-      ),
+      className: classix.cx("Menu-item", className, isHighlighted && "is-highlighted", nested && "Menu-item--nested", groupHeader && "Menu-item--header"),
       role,
       onKeyDown,
-      children: asChild ? children : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-        children: [
-          Icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-            className: "Menu-item-icon",
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {
-              size: import_icons.IconSize.SMALL
-            })
-          }),
-          children
-        ]
+      children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [Icon && /* @__PURE__ */ jsxRuntime.jsx("span", {
+          className: "Menu-item-icon",
+          children: /* @__PURE__ */ jsxRuntime.jsx(Icon, {
+            size: icons.IconSize.SMALL
+          })
+        }), children]
       })
     })
   });
-  if (tooltip) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tooltip.Tooltip, {
-      content: tooltip,
-      rootElementStyle: { display: "block" },
+  if (tooltip$1) {
+    return /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip, {
+      content: tooltip$1,
+      rootElementStyle: {
+        display: "block"
+      },
       allowBoundaryElementOverflow: true,
       placement: tooltipPlacement ? tooltipPlacement : "bottom",
       ...tooltipOptions || {},
@@ -138,7 +102,7 @@ var MenuItem = ({
   }
   return renderedItem;
 };
-var MenuItemLink = ({
+const MenuItemLink = ({
   to,
   disabled = false,
   useHistory = true,
@@ -149,22 +113,20 @@ var MenuItemLink = ({
   const finalProps = {
     ...props,
     disabled,
-    component: useHistory ? import_react_router_dom.Link : "a",
+    component: useHistory ? reactRouterDom.Link : "a",
     [useHistory ? "to" : "href"]: disabled ? "" : to,
     rel: newTab ? "noopener noreferrer" : void 0,
     target: newTab ? "_blank" : void 0
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuItem, {
+  return /* @__PURE__ */ jsxRuntime.jsx(MenuItem, {
     ...finalProps,
     children
   });
 };
-
-// src/MenuItemList.tsx
-var import_react2 = require("react");
-var import_Menu4 = require("./styles/Menu.css");
-var import_jsx_runtime = require("react/jsx-runtime");
-var MenuItemList = (0, import_react2.forwardRef)(({ children, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+const MenuItemList = react.forwardRef(({
+  children,
+  ...rest
+}, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", {
   ...rest,
   ref,
   "data-test-id": "menu-item-list",
@@ -172,17 +134,15 @@ var MenuItemList = (0, import_react2.forwardRef)(({ children, ...rest }, ref) =>
   children
 }));
 MenuItemList.displayName = "MenuItemList";
-
-// src/MenuSearch.tsx
-var import_form = require("@launchpad-ui/form");
-var import_react3 = require("react");
-var import_Menu5 = require("./styles/Menu.css");
-var import_jsx_runtime = require("react/jsx-runtime");
-var MenuSearch = (0, import_react3.forwardRef)((props, ref) => {
-  const { ariaLabel, placeholder, ...finalProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+const MenuSearch = react.forwardRef((props, ref) => {
+  const {
+    ariaLabel,
+    placeholder,
+    ...finalProps
+  } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
     className: "Menu-search",
-    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form.TextField, {
+    children: /* @__PURE__ */ jsxRuntime.jsx(form.TextField, {
       ...finalProps,
       ref,
       className: "Menu-search-input",
@@ -195,17 +155,10 @@ var MenuSearch = (0, import_react3.forwardRef)((props, ref) => {
   });
 });
 MenuSearch.displayName = "MenuSearch";
-
-// src/Menu.tsx
-var import_focus2 = require("@react-aria/focus");
-var import_classix3 = require("classix");
-var import_react4 = require("react");
-var import_react_virtual = require("react-virtual");
-
-// src/utils.ts
-var createItemId = (index, id) => `${id}-item-${index}`;
-var getNodeForIndex = (index, menuId) => index === null ? index : document.getElementById(createItemId(index, menuId));
-var handleKeyboardInteractions = (event, keyHandlers) => {
+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,
@@ -213,16 +166,13 @@ var handleKeyboardInteractions = (event, keyHandlers) => {
   };
   if (ops[event.key]) {
     event.preventDefault();
-    ops[event.key]?.call(globalThis, event);
+    (_a = ops[event.key]) == null ? void 0 : _a.call(globalThis, event);
   }
 };
-var chainEventHandlers = (...handlers) => (event) => {
+const chainEventHandlers = (...handlers) => (event) => {
   handlers.forEach((h) => typeof h === "function" && h(event));
 };
-
-// src/Menu.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var Menu = (props) => {
+const Menu = (props) => {
   const {
     children,
     menuItemClassName,
@@ -232,15 +182,19 @@ var Menu = (props) => {
     size,
     overscan = 1
   } = props;
-  const focusManager = (0, import_focus2.useFocusManager)();
-  const handleArrowDown = (0, import_react4.useCallback)(() => {
-    focusManager.focusNext({ wrap: true });
+  const focusManager = focus.useFocusManager();
+  const handleArrowDown = react.useCallback(() => {
+    focusManager.focusNext({
+      wrap: true
+    });
   }, [focusManager]);
-  const handleArrowUp = (0, import_react4.useCallback)(() => {
-    focusManager.focusPrevious({ wrap: true });
+  const handleArrowUp = react.useCallback(() => {
+    focusManager.focusPrevious({
+      wrap: true
+    });
   }, [focusManager]);
-  const reduceItems = (0, import_react4.useMemo)(() => {
-    const childrenProps = import_react4.Children.toArray(children);
+  const reduceItems = react.useMemo(() => {
+    const childrenProps = react.Children.toArray(children);
     if (enableVirtualization) {
       let searchElem = null;
       let elements = [];
@@ -254,63 +208,73 @@ var Menu = (props) => {
           case MenuDivider:
             elements = elements.concat(child);
             break;
-          default:
-            break;
         }
       });
-      return { items: elements, searchElement: searchElem };
+      return {
+        items: elements,
+        searchElement: searchElem
+      };
     }
-    return childrenProps.reduce(
-      ({ items, searchElement }, child) => {
-        switch (child.type) {
-          case MenuSearch:
-            return {
-              items,
-              searchElement: (0, import_react4.cloneElement)(child, {
-                onKeyDown: (e) => handleKeyboardInteractions(e, {
-                  handleDown: handleArrowDown,
-                  handleUp: handleArrowUp
-                })
+    return childrenProps.reduce(({
+      items,
+      searchElement
+    }, child) => {
+      var _a;
+      switch (child.type) {
+        case MenuSearch:
+          return {
+            items,
+            searchElement: react.cloneElement(child, {
+              onKeyDown: (e) => handleKeyboardInteractions(e, {
+                handleDown: handleArrowDown,
+                handleUp: handleArrowUp
               })
-            };
-          case MenuItem:
-          case MenuItemLink:
-            return {
-              items: items.concat(
-                child.props.disabled ? (0, import_react4.cloneElement)(child, {
-                  onClick: () => void 0,
-                  onKeyDown: () => void 0,
-                  tabIndex: -1,
-                  disabled: true
-                }) : (0, import_react4.cloneElement)(child, {
-                  className: (0, import_classix3.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 }
-    );
+            })
+          };
+        case MenuItem:
+        case MenuItemLink:
+          return {
+            items: items.concat(child.props.disabled ? react.cloneElement(child, {
+              onClick: () => void 0,
+              onKeyDown: () => void 0,
+              tabIndex: -1,
+              disabled: true
+            }) : react.cloneElement(child, {
+              className: classix.cx(child.props.className, menuItemClassName),
+              item: (_a = child.props.item) != null ? _a : items.length,
+              onClick: chainEventHandlers(child.props.onClick, () => {
+                var _a2;
+                onSelect == null ? void 0 : onSelect((_a2 = child.props.item) != null ? _a2 : 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, import_jsx_runtime.jsx)(MenuBase, {
+    return /* @__PURE__ */ jsxRuntime.jsx(MenuBase, {
       isVirtual: true,
       size,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ItemVirtualizer, {
-        items: import_react4.Children.toArray(reduceItems.items),
+      children: /* @__PURE__ */ jsxRuntime.jsx(ItemVirtualizer, {
+        items: react.Children.toArray(reduceItems.items),
         searchElement: reduceItems.searchElement,
         overscan,
         menuItemClassName,
@@ -320,18 +284,15 @@ var Menu = (props) => {
       })
     });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MenuBase, {
+  return /* @__PURE__ */ jsxRuntime.jsxs(MenuBase, {
     size,
-    children: [
-      reduceItems.searchElement,
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuItemList, {
-        role: "presentation",
-        children: reduceItems.items
-      })
-    ]
+    children: [reduceItems.searchElement, /* @__PURE__ */ jsxRuntime.jsx(MenuItemList, {
+      role: "presentation",
+      children: reduceItems.items
+    })]
   });
 };
-var ItemVirtualizer = (props) => {
+const ItemVirtualizer = (props) => {
   const {
     overscan,
     searchElement,
@@ -341,158 +302,138 @@ var ItemVirtualizer = (props) => {
     focusManager,
     onSelect
   } = props;
-  const menuId = (0, import_react4.useRef)(`menu-ctrl-${(0, import_react4.useId)()}`);
-  const focusedItemIndex = (0, import_react4.useRef)(null);
-  const parentRef = (0, import_react4.useRef)(null);
-  const searchRef = (0, import_react4.useRef)();
-  const [nextFocusValue, setNextFocusValue] = (0, import_react4.useState)(null);
+  const menuId = react.useRef(`menu-ctrl-${react.useId()}`);
+  const focusedItemIndex = react.useRef(null);
+  const parentRef = react.useRef(null);
+  const searchRef = react.useRef();
+  const [nextFocusValue, setNextFocusValue] = react.useState(null);
   const hasSearch = !!searchElement;
   const lastVirtualItemIndex = items ? items.length - 1 : 0;
-  const rowVirtualizer = (0, import_react_virtual.useVirtual)({
+  const rowVirtualizer = reactVirtual.useVirtual({
     size: items !== null ? items.length : 0,
     parentRef,
-    estimateSize: (0, import_react4.useCallback)(() => itemHeight, [itemHeight]),
+    estimateSize: react.useCallback(() => itemHeight, [itemHeight]),
     overscan
   });
-  const focusSearchBar = (0, import_react4.useCallback)(() => {
+  const focusSearchBar = react.useCallback(() => {
+    var _a, _b;
     rowVirtualizer.scrollToIndex(0);
-    searchRef.current?.focus?.();
+    (_b = (_a = searchRef.current) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
   }, [rowVirtualizer]);
-  const focusMenuItem = (0, import_react4.useCallback)(
-    (index) => {
-      rowVirtualizer.scrollToIndex(index);
-      setNextFocusValue(index);
-    },
-    [rowVirtualizer]
-  );
-  const handleKeyboardFocusInteraction = (0, import_react4.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 = (0, import_react4.useCallback)(
-    (itemElem, index) => {
-      const childProps = itemElem.props;
-      switch (itemElem.type) {
-        case MenuItem:
-        case MenuItemLink:
-          return {
-            className: (0, import_classix3.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 {};
+  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);
       }
-    },
-    [handleKeyboardFocusInteraction, menuItemClassName, onSelect]
-  );
-  (0, import_react4.useEffect)(() => {
+      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:
+      case MenuItemLink:
+        return {
+          className: 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 == null ? void 0 : onSelect(childProps.item);
+          })
+        };
+      default:
+        return {};
+    }
+  }, [handleKeyboardFocusInteraction, menuItemClassName, onSelect]);
+  react.useEffect(() => {
     if (nextFocusValue !== null) {
       requestAnimationFrame(() => {
         const element = getNodeForIndex(nextFocusValue, menuId.current);
-        element?.focus();
+        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") {
-        callbacks.handleFocusBackward?.("previous");
+        (_a = callbacks.handleFocusBackward) == null ? void 0 : _a.call(callbacks, "previous");
       } else if (e.key === "ArrowDown" || e.key === "Tab") {
-        callbacks.handleFocusForward?.("next");
+        (_b = callbacks.handleFocusForward) == null ? void 0 : _b.call(callbacks, "next");
       }
     }
   };
-  const renderSearch = (0, import_react4.useMemo)(
-    () => searchElement ? (0, import_react4.cloneElement)(searchElement, {
-      onKeyDown: (e) => handleKeyboardFocusKeydown(e, {
-        handleFocusBackward: () => focusMenuItem(lastVirtualItemIndex),
-        handleFocusForward: () => focusMenuItem(0)
-      }),
-      ref: searchRef
-    }) : null,
-    [searchElement, lastVirtualItemIndex, focusMenuItem]
-  );
-  const renderItems = (0, import_react4.useMemo)(
-    () => rowVirtualizer.virtualItems.map((virtualRow) => {
-      if (!items) {
-        return null;
-      }
-      const elem = items[virtualRow.index];
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-        ref: elem.type !== MenuItem || elem.type !== MenuItemLink ? virtualRow.measureRef : void 0,
+  const renderSearch = react.useMemo(() => searchElement ? 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: elem.type !== MenuItem || elem.type !== MenuItemLink ? virtualRow.measureRef : void 0,
+      role: "presentation",
+      className: classix.cx("VirtualMenu-item"),
+      style: {
+        transform: `translateY(${virtualRow.start}px)`
+      },
+      children: 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: (0, import_classix3.cx)("VirtualMenu-item"),
+        className: "VirtualMenu-item-list",
         style: {
-          transform: `translateY(${virtualRow.start}px)`
+          height: `${rowVirtualizer.totalSize}px`
         },
-        children: (0, import_react4.cloneElement)(elem, getItemProps(elem, virtualRow.index))
-      }, virtualRow.index);
-    }),
-    [rowVirtualizer.virtualItems, items, getItemProps]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-    children: [
-      renderSearch,
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuItemList, {
-        ref: parentRef,
-        role: "presentation",
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-          role: "presentation",
-          className: "VirtualMenu-item-list",
-          style: {
-            height: `${rowVirtualizer.totalSize}px`
-          },
-          children: renderItems
-        })
+        children: renderItems
       })
-    ]
+    })]
   });
 };
-
-// src/types.ts
 var MenuSize = /* @__PURE__ */ ((MenuSize2) => {
   MenuSize2["SMALL"] = "sm";
   MenuSize2["MEDIUM"] = "md";
@@ -500,15 +441,12 @@ var MenuSize = /* @__PURE__ */ ((MenuSize2) => {
   MenuSize2["EXTRA_LARGE"] = "xl";
   return MenuSize2;
 })(MenuSize || {});
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Menu,
-  MenuBase,
-  MenuDivider,
-  MenuItem,
-  MenuItemLink,
-  MenuItemList,
-  MenuSearch,
-  MenuSize
-});
+exports.Menu = Menu;
+exports.MenuBase = MenuBase;
+exports.MenuDivider = MenuDivider;
+exports.MenuItem = MenuItem;
+exports.MenuItemLink = MenuItemLink;
+exports.MenuItemList = MenuItemList;
+exports.MenuSearch = MenuSearch;
+exports.MenuSize = MenuSize;
 //# sourceMappingURL=index.js.map