fix(menu): close menu on Tab key press

packages/react/src/components/menu/menu-content.tsx

@@ -1,23 +1,49 @@
-import { mergeProps } from '@zag-js/react'
-import { forwardRef } from 'react'
-import { composeRefs } from '../../utils/compose-refs'
-import { type HTMLProps, type PolymorphicProps, ark } from '../factory'
-import { usePresenceContext } from '../presence'
-import { useMenuContext } from './use-menu-context'
+import { mergeProps } from "@zag-js/react";
+import { forwardRef } from "react";
+import { composeRefs } from "../../utils/compose-refs";
+import { type HTMLProps, type PolymorphicProps, ark } from "../factory";
+import { usePresenceContext } from "../presence";
+import { useMenuContext } from "./use-menu-context";
 
 export interface MenuContentBaseProps extends PolymorphicProps {}
-export interface MenuContentProps extends HTMLProps<'div'>, MenuContentBaseProps {}
+export interface MenuContentProps
+	extends HTMLProps<"div">,
+		MenuContentBaseProps {}
 
-export const MenuContent = forwardRef<HTMLDivElement, MenuContentProps>((props, ref) => {
-  const menu = useMenuContext()
-  const presence = usePresenceContext()
-  const mergedProps = mergeProps(menu.getContentProps(), presence.getPresenceProps(), props)
+export const MenuContent = forwardRef<HTMLDivElement, MenuContentProps>(
+	(props, ref) => {
+		const menu = useMenuContext();
+		const presence = usePresenceContext();
+		const mergedProps = mergeProps(
+			menu.getContentProps(),
+			presence.getPresenceProps(),
+			props,
+		);
 
-  if (presence.unmounted) {
-    return null
-  }
+		// Extract the original onKeyDown if present
+		const { onKeyDown, ...rest } = mergedProps;
 
-  return <ark.div {...mergedProps} ref={composeRefs(presence.ref, ref)} />
-})
+		const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+			if (event.key === "Tab") {
+				// Instead of menu?.close?.(), use setOpen(false)
+				menu?.setOpen?.(false);
+			}
+			// Call any original onKeyDown prop
+			onKeyDown?.(event);
+		};
 
-MenuContent.displayName = 'MenuContent'
+		if (presence.unmounted) {
+			return null;
+		}
+
+		return (
+			<ark.div
+				{...rest}
+				onKeyDown={handleKeyDown}
+				ref={composeRefs(presence.ref, ref)}
+			/>
+		);
+	},
+);
+
+MenuContent.displayName = "MenuContent";