feat(MenuTrigger): pass state to trigger * 2

Author: tenphi

src/components/pickers/Menu/Menu.stories.tsx

@@ -18,6 +18,7 @@ import {
   AlertDialog,
   DialogContainer,
   TooltipProvider,
+  DirectionIcon,
 } from '../../../index';
 import { baseProps } from '../../../stories/lists/baseProps';
 import { MoreIcon, PlusIcon } from '../../../icons';
@@ -403,3 +404,41 @@ export const ItemWithTooltip = (props) => {
 //
 //   await waitFor(() => expect(canvas.getByRole('tooltip')).toBeInTheDocument());
 // };
+
+export const WithTriggerState = ({ ...props }) => {
+  const menu = (
+    <Menu id="menu" {...props} width="220px">
+      <Menu.Item key="red" postfix="Ctr+C">
+        Copy
+      </Menu.Item>
+      <Menu.Item key="orange" postfix="Ctr+V">
+        Paste
+      </Menu.Item>
+      <Menu.Item key="yellow" postfix="Ctr+X">
+        Cut
+      </Menu.Item>
+    </Menu>
+  );
+
+  return (
+    <Space
+      gap="10x"
+      placeContent="start start"
+      placeItems="start"
+      height="400px"
+    >
+      <MenuTrigger>
+        {({ isOpen }) => (
+          <Button
+            size="small"
+            rightIcon={<DirectionIcon to={isOpen ? 'top' : 'bottom'} />}
+            aria-label="Open Context Menu"
+          >
+            Menu
+          </Button>
+        )}
+        {menu}
+      </MenuTrigger>
+    </Space>
+  );
+};

src/components/pickers/Menu/MenuTrigger.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, Fragment, useRef, ReactElement } from 'react';
+import { forwardRef, Fragment, useRef, ReactElement } from 'react';
 import { AriaMenuTriggerProps } from 'react-aria';
 import { useDOMRef, useIsMobileDevice } from '@react-spectrum/utils';
 import {
@@ -48,7 +48,7 @@ function MenuTrigger(props: CubeMenuTriggerProps, ref: DOMRef<HTMLElement>) {
     isDisabled,
   } = props;
 
-  let [menuTrigger, menu] = React.Children.toArray(children);
+  let [menuTrigger, menu] = children;
   const state: MenuTriggerState = useMenuTriggerState(props);
 
   if (typeof menuTrigger === 'function') {