@launchpad-ui/menu 0.10.1 → 0.10.3

package/dist/Menu.d.ts

@@ -31,13 +31,13 @@ type ControlledMenuProps<T> = {
     'data-test-id'?: string;
 };
 type MenuProps<T extends number | string> = ControlledMenuProps<T>;
-declare const Menu: <T extends string | number>(props: MenuProps<T>) => JSX.Element;
+declare const Menu: <T extends string | number>(props: MenuProps<T>) => import("react/jsx-runtime").JSX.Element;
 type ItemVirtualizerProps<T> = Omit<ControlledMenuProps<T>, 'children'> & {
     items: ReactElement[] | null;
     searchElement?: ReactElement | null;
     focusManager: FocusManager;
 };
-declare const ItemVirtualizer: <T extends string | number>(props: ItemVirtualizerProps<T>) => JSX.Element;
+declare const ItemVirtualizer: <T extends string | number>(props: ItemVirtualizerProps<T>) => import("react/jsx-runtime").JSX.Element;
 export { Menu, ItemVirtualizer };
 export type { MenuProps, ItemVirtualizerProps };
 //# sourceMappingURL=Menu.d.ts.map

package/dist/Menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../src/Menu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,KAAK,EAAiB,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AA4BpE,KAAK,mBAAmB,CAAC,CAAC,IAAI;IAC5B,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,KAAK,SAAS,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,mBAAmB,CAAC,CAAC,CAAC,CAAC;AAEnE,QAAA,MAAM,IAAI,iEAuHT,CAAC;AAEF,KAAK,oBAAoB,CAAC,CAAC,IAAI,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,GAAG;IACxE,KAAK,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC;IAC7B,aAAa,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IACpC,YAAY,EAAE,YAAY,CAAC;CAC5B,CAAC;AAEF,QAAA,MAAM,eAAe,4EA+MpB,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC;AACjC,YAAY,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC"}
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../src/Menu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,KAAK,EAAiB,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AA4BpE,KAAK,mBAAmB,CAAC,CAAC,IAAI;IAC5B,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,KAAK,SAAS,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,mBAAmB,CAAC,CAAC,CAAC,CAAC;AAEnE,QAAA,MAAM,IAAI,6FAuHT,CAAC;AAEF,KAAK,oBAAoB,CAAC,CAAC,IAAI,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,GAAG;IACxE,KAAK,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC;IAC7B,aAAa,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IACpC,YAAY,EAAE,YAAY,CAAC;CAC5B,CAAC;AAEF,QAAA,MAAM,eAAe,wGA+MpB,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC;AACjC,YAAY,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC"}

package/dist/MenuDivider.d.ts

@@ -5,7 +5,7 @@ type MenuDividerProps = SeparatorProps & {
     innerRef?: RefObject<HTMLDivElement>;
     'data-test-id'?: string;
 };
-declare const MenuDivider: ({ elementType, orientation, innerRef, "data-test-id": testId, }: MenuDividerProps) => JSX.Element;
+declare const MenuDivider: ({ elementType, orientation, innerRef, "data-test-id": testId, }: MenuDividerProps) => import("react/jsx-runtime").JSX.Element;
 export { MenuDivider };
 export type { MenuDividerProps };
 //# sourceMappingURL=MenuDivider.d.ts.map

package/dist/MenuDivider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuDivider.d.ts","sourceRoot":"","sources":["../src/MenuDivider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,mBAAmB,CAAC;AAE3B,KAAK,gBAAgB,GAAG,cAAc,GAAG;IACvC,QAAQ,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACrC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,QAAA,MAAM,WAAW,oEAKd,gBAAgB,gBAOlB,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC;AACvB,YAAY,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"MenuDivider.d.ts","sourceRoot":"","sources":["../src/MenuDivider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,mBAAmB,CAAC;AAE3B,KAAK,gBAAgB,GAAG,cAAc,GAAG;IACvC,QAAQ,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACrC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,QAAA,MAAM,WAAW,oEAKd,gBAAgB,4CAOlB,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC;AACvB,YAAY,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/MenuItem.d.ts

@@ -26,7 +26,7 @@ type MenuItemProps<P, T extends ElementType = typeof defaultElement> = Polymorph
 }) | (MenuItemOwnProps & {
     item?: undefined;
 }), T>;
-declare const MenuItem: <P, T extends ElementType<any> = "button">({ ...props }: MenuItemProps<P, T>) => JSX.Element;
+declare const MenuItem: <P, T extends ElementType = "button">({ ...props }: MenuItemProps<P, T>) => import("react/jsx-runtime").JSX.Element;
 export { MenuItem };
 export type { MenuItemProps };
 //# sourceMappingURL=MenuItem.d.ts.map

package/dist/MenuItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../src/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,KAAK,EAAE,qBAAqB,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE5F,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAKhD,OAAO,mBAAmB,CAAC;AAG3B,KAAK,KAAK,CAAC,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC;AAExC,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,SAAS,WAAW,IAAI,CAAC,GAAG;IAAE,SAAS,CAAC,EAAE,CAAC,CAAA;CAAE,CAAC;AAE1E,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,SAAS,WAAW,IAAI,KAAK,CAC5D,CAAC,SAAS,MAAM,GAAG,CAAC,iBAAiB,GACjC,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,GACtC,qBAAqB,CAAC,CAAC,CAAC,EAC5B,kBAAkB,CAAC,CAAC,EAAE,CAAC,CAAC,CACzB,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,IAAI,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IAChC,cAAc,CAAC,EAAE,OAAO,OAAO,CAAC;IAChC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,QAAA,MAAM,cAAc,WAAW,CAAC;AAEhC,KAAK,aAAa,CAAC,CAAC,EAAE,CAAC,SAAS,WAAW,GAAG,OAAO,cAAc,IAAI,uBAAuB,CAC1F,CAAC,gBAAgB,GAAG;IAClB,IAAI,EAAE,CAAC,CAAC;CACT,CAAC,GACF,CAAC,gBAAgB,GAAG;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC,EACJ,CAAC,CACF,CAAC;AAEF,QAAA,MAAM,QAAQ,8FA0Eb,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC;AACpB,YAAY,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../src/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,KAAK,EAAE,qBAAqB,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE5F,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAKhD,OAAO,mBAAmB,CAAC;AAG3B,KAAK,KAAK,CAAC,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC;AAExC,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,SAAS,WAAW,IAAI,CAAC,GAAG;IAAE,SAAS,CAAC,EAAE,CAAC,CAAA;CAAE,CAAC;AAE1E,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,SAAS,WAAW,IAAI,KAAK,CAC5D,CAAC,SAAS,MAAM,GAAG,CAAC,iBAAiB,GACjC,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,GACtC,qBAAqB,CAAC,CAAC,CAAC,EAC5B,kBAAkB,CAAC,CAAC,EAAE,CAAC,CAAC,CACzB,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,IAAI,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IAChC,cAAc,CAAC,EAAE,OAAO,OAAO,CAAC;IAChC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,QAAA,MAAM,cAAc,WAAW,CAAC;AAEhC,KAAK,aAAa,CAAC,CAAC,EAAE,CAAC,SAAS,WAAW,GAAG,OAAO,cAAc,IAAI,uBAAuB,CAC1F,CAAC,gBAAgB,GAAG;IAClB,IAAI,EAAE,CAAC,CAAC;CACT,CAAC,GACF,CAAC,gBAAgB,GAAG;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC,EACJ,CAAC,CACF,CAAC;AAEF,QAAA,MAAM,QAAQ,qHA0Eb,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC;AACpB,YAAY,EAAE,aAAa,EAAE,CAAC"}

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, useCallback, useMemo, Children, cloneElement, useRef, useId, useState, useEffect } from "react";
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useSeparator } from "@react-aria/separator";
 import { Tooltip } from "@launchpad-ui/tooltip";
 import { Slot } from "@radix-ui/react-slot";
@@ -9,21 +9,12 @@ import { FocusRing, useFocusManager } from "@react-aria/focus";
 import { TextField } from "@launchpad-ui/form";
 import { useVirtual } from "react-virtual";
 const Menu$1 = "";
-const MenuBase = forwardRef(({
-  children,
-  size,
-  isVirtual,
-  ...props
-}, ref) => {
-  const classes = cx("Menu", isVirtual && "Menu--isVirtual", size && `MenuSize--${size}`);
-  return /* @__PURE__ */ jsx("div", {
-    ...props,
-    role: "menu",
-    className: classes,
-    ref,
-    children
-  });
-});
+const MenuBase = forwardRef(
+  ({ children, size, isVirtual, ...props }, ref) => {
+    const classes = cx("Menu", isVirtual && "Menu--isVirtual", size && `MenuSize--${size}`);
+    return /* @__PURE__ */ jsx("div", { ...props, role: "menu", className: classes, ref, children });
+  }
+);
 MenuBase.displayName = "MenuBase";
 const MenuDivider = ({
   elementType = "div",
@@ -31,24 +22,18 @@ const MenuDivider = ({
   innerRef,
   "data-test-id": testId = "menu-divider"
 }) => {
-  const {
-    separatorProps
-  } = useSeparator({
+  const { separatorProps } = useSeparator({
     orientation,
     elementType
   });
-  return /* @__PURE__ */ jsx("div", {
-    ...separatorProps,
-    "data-test-id": testId,
-    ref: innerRef,
-    className: "Menu-divider"
-  });
+  return /* @__PURE__ */ jsx("div", { ...separatorProps, "data-test-id": testId, ref: innerRef, className: "Menu-divider" });
 };
 const defaultElement = "button";
 const MenuItem = ({
   ...props
 }) => {
   const {
+    // TODO: remove component prop once we migrate over to asChild format
     component,
     children,
     isHighlighted,
@@ -68,50 +53,44 @@ const MenuItem = ({
     ...rest
   } = props;
   const Component = component || (asChild ? Slot : defaultElement);
-  const renderedItem = /* @__PURE__ */ jsx(FocusRing, {
-    focusRingClass: "has-focus",
-    children: /* @__PURE__ */ jsx(Component, {
+  const renderedItem = /* @__PURE__ */ jsx(FocusRing, { focusRingClass: "has-focus", children: /* @__PURE__ */ jsx(
+    Component,
+    {
       ...rest,
       disabled,
       "aria-disabled": disabled ? disabled : void 0,
-      className: cx("Menu-item", className, isHighlighted && "is-highlighted", nested && "Menu-item--nested", groupHeader && "Menu-item--header"),
+      className: cx(
+        "Menu-item",
+        className,
+        isHighlighted && "is-highlighted",
+        nested && "Menu-item--nested",
+        groupHeader && "Menu-item--header"
+      ),
       "data-test-id": testId,
       role,
       onKeyDown,
-      children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, {
-        children: [Icon && /* @__PURE__ */ jsx("span", {
-          className: "Menu-item-icon",
-          children: /* @__PURE__ */ jsx(Icon, {
-            size: "small"
-          })
-        }), children]
-      })
-    })
-  });
+      children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+        Icon && /* @__PURE__ */ jsx("span", { className: "Menu-item-icon", children: /* @__PURE__ */ jsx(Icon, { size: "small" }) }),
+        children
+      ] })
+    }
+  ) });
   if (tooltip) {
-    return /* @__PURE__ */ jsx(Tooltip, {
-      content: tooltip,
-      rootElementStyle: {
-        display: "block"
-      },
-      allowBoundaryElementOverflow: true,
-      placement: tooltipPlacement ? tooltipPlacement : "bottom",
-      ...tooltipOptions || {},
-      children: renderedItem
-    });
+    return /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        content: tooltip,
+        rootElementStyle: { display: "block" },
+        allowBoundaryElementOverflow: true,
+        placement: tooltipPlacement ? tooltipPlacement : "bottom",
+        ...tooltipOptions || {},
+        children: renderedItem
+      }
+    );
   }
   return renderedItem;
 };
-const MenuItemList = forwardRef(({
-  children,
-  ...rest
-}, ref) => /* @__PURE__ */ jsx("div", {
-  ...rest,
-  ref,
-  "data-test-id": "menu-item-list",
-  className: "Menu-item-list",
-  children
-}));
+const MenuItemList = forwardRef(({ children, ...rest }, ref) => /* @__PURE__ */ jsx("div", { ...rest, ref, "data-test-id": "menu-item-list", className: "Menu-item-list", children }));
 MenuItemList.displayName = "MenuItemList";
 const MenuSearch = forwardRef((props, ref) => {
   const {
@@ -121,9 +100,9 @@ const MenuSearch = forwardRef((props, ref) => {
     "data-test-id": testId = "menu-search",
     ...finalProps
   } = props;
-  return /* @__PURE__ */ jsx("div", {
-    className: "Menu-search",
-    children: /* @__PURE__ */ jsx(TextField, {
+  return /* @__PURE__ */ jsx("div", { className: "Menu-search", children: /* @__PURE__ */ jsx(
+    TextField,
+    {
       ...finalProps,
       ref,
       className: "Menu-search-input",
@@ -134,8 +113,8 @@ const MenuSearch = forwardRef((props, ref) => {
       autoComplete: "off",
       placeholder,
       "aria-label": ariaLabel || "Search"
-    })
-  });
+    }
+  ) });
 });
 MenuSearch.displayName = "MenuSearch";
 const createItemId = (index, id) => `${id}-item-${index}`;
@@ -168,14 +147,10 @@ const Menu = (props) => {
   } = props;
   const focusManager = useFocusManager();
   const handleArrowDown = useCallback(() => {
-    focusManager.focusNext({
-      wrap: true
-    });
+    focusManager.focusNext({ wrap: true });
   }, [focusManager]);
   const handleArrowUp = useCallback(() => {
-    focusManager.focusPrevious({
-      wrap: true
-    });
+    focusManager.focusPrevious({ wrap: true });
   }, [focusManager]);
   const reduceItems = useMemo(() => {
     const childrenProps = Children.toArray(children);
@@ -193,70 +168,57 @@ const Menu = (props) => {
             break;
         }
       });
-      return {
-        items: elements,
-        searchElement: searchElem
-      };
+      return { items: elements, searchElement: searchElem };
     }
-    return childrenProps.reduce(({
-      items,
-      searchElement
-    }, child) => {
-      var _a;
-      switch (child.type) {
-        case MenuSearch:
-          return {
-            items,
-            searchElement: cloneElement(child, {
-              onKeyDown: (e) => handleKeyboardInteractions(e, {
-                handleDown: handleArrowDown,
-                handleUp: handleArrowUp
-              })
-            })
-          };
-        case MenuItem:
-          return {
-            items: items.concat(child.props.disabled ? cloneElement(child, {
-              onClick: () => void 0,
-              onKeyDown: () => void 0,
-              tabIndex: -1,
-              disabled: true
-            }) : cloneElement(child, {
-              className: 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
+    return childrenProps.reduce(
+      ({ items, searchElement }, child) => {
+        switch (child.type) {
+          case MenuSearch:
+            return {
+              items,
+              searchElement: cloneElement(child, {
+                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:
+            return {
+              items: items.concat(
+                child.props.disabled ? cloneElement(child, {
+                  onClick: () => void 0,
+                  onKeyDown: () => void 0,
+                  tabIndex: -1,
+                  disabled: true
+                }) : 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, {
+    return /* @__PURE__ */ jsx(MenuBase, { "data-test-id": testId, isVirtual: true, size, children: /* @__PURE__ */ jsx(
+      ItemVirtualizer,
+      {
         items: Children.toArray(reduceItems.items),
         searchElement: reduceItems.searchElement,
         overscan,
@@ -264,17 +226,13 @@ const Menu = (props) => {
         onSelect,
         itemHeight,
         focusManager
-      })
-    });
+      }
+    ) });
   }
-  return /* @__PURE__ */ jsxs(MenuBase, {
-    "data-test-id": testId,
-    size,
-    children: [reduceItems.searchElement, /* @__PURE__ */ jsx(MenuItemList, {
-      role: "presentation",
-      children: reduceItems.items
-    })]
-  });
+  return /* @__PURE__ */ jsxs(MenuBase, { "data-test-id": testId, size, children: [
+    reduceItems.searchElement,
+    /* @__PURE__ */ jsx(MenuItemList, { role: "presentation", children: reduceItems.items })
+  ] });
 };
 const ItemVirtualizer = (props) => {
   const {
@@ -304,60 +262,70 @@ const ItemVirtualizer = (props) => {
     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);
+  const focusMenuItem = useCallback(
+    (index) => {
+      rowVirtualizer.scrollToIndex(index);
+      setNextFocusValue(index);
+    },
+    [rowVirtualizer]
+  );
+  const handleKeyboardFocusInteraction = useCallback(
+    (direction) => {
+      if (focusedItemIndex.current === null || focusedItemIndex.current === void 0) {
+        return;
       }
-      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 = 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 == null ? void 0 : onSelect(childProps.item);
-          })
-        };
-      default:
-        return {};
-    }
-  }, [handleKeyboardFocusInteraction, menuItemClassName, onSelect]);
+      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 = 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(() => {
@@ -380,42 +348,52 @@ const ItemVirtualizer = (props) => {
       }
     }
   };
-  const renderSearch = useMemo(() => searchElement ? cloneElement(searchElement, {
-    onKeyDown: (e) => handleKeyboardFocusKeydown(e, {
-      handleFocusBackward: () => focusMenuItem(lastVirtualItemIndex),
-      handleFocusForward: () => focusMenuItem(0)
+  const renderSearch = useMemo(
+    () => searchElement ? 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: cx("VirtualMenu-item"),
+          style: {
+            transform: `translateY(${virtualRow.start}px)`
+          },
+          children: cloneElement(elem, getItemProps(elem, virtualRow.index))
+        },
+        virtualRow.index
+      );
     }),
-    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: cx("VirtualMenu-item"),
-      style: {
-        transform: `translateY(${virtualRow.start}px)`
-      },
-      children: 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", {
+    [rowVirtualizer.virtualItems, items, getItemProps]
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    renderSearch,
+    /* @__PURE__ */ jsx(MenuItemList, { ref: parentRef, role: "presentation", children: /* @__PURE__ */ jsx(
+      "div",
+      {
         role: "presentation",
         className: "VirtualMenu-item-list",
         style: {
           height: `${rowVirtualizer.totalSize}px`
         },
         children: renderItems
-      })
-    })]
-  });
+      }
+    ) })
+  ] });
 };
 export {
   Menu,