feat(DialogTrigger): pass state to trigger

Author: tenphi

src/components/overlays/Dialog/DialogTrigger.tsx

@@ -1,5 +1,5 @@
 import { Fragment, ReactElement, RefObject, useEffect, useRef } from 'react';
-import { useOverlayTriggerState } from 'react-stately';
+import { OverlayTriggerState, useOverlayTriggerState } from 'react-stately';
 import { PressResponder } from '@react-aria/interactions';
 import { useMediaQuery } from '@react-spectrum/utils';
 import {
@@ -23,7 +23,10 @@ export interface CubeDialogTriggerProps
     PositionProps,
     WithCloseBehavior {
   /** The Dialog and its trigger element. See the DialogTrigger [Content section](#content) for more information on what to provide as children. */
-  children: [ReactElement, CubeDialogClose | ReactElement];
+  children: [
+    ReactElement | ((state: OverlayTriggerState) => ReactElement),
+    CubeDialogClose | ReactElement,
+  ];
   /**
    * The type of Dialog that should be rendered. See the DialogTrigger [types section](#dialog-types) for an explanation on each.
    * @default 'modal'
@@ -102,6 +105,10 @@ function DialogTrigger(props: CubeDialogTriggerProps) {
 
   let state = useOverlayTriggerState(props);
 
+  if (typeof trigger === 'function') {
+    trigger = trigger(state);
+  }
+
   let wasOpen = useRef(false);
   let isExiting = useRef(false);
   let onExiting = () => (isExiting.current = true);

src/components/overlays/Dialog/stories/Dialog.stories.tsx

@@ -17,6 +17,7 @@ import {
   Paragraph,
   Title,
   Space,
+  DirectionIcon,
 } from '../../../../index';
 import { timeout } from '../../../../utils/promise';
 import { baseProps } from '../../../../stories/lists/baseProps';
@@ -64,6 +65,25 @@ const Template: StoryFn<
   );
 };
 
+const WithTriggerStateTemplate: StoryFn<
+  CubeDialogTriggerProps & { size: CubeDialogProps['size'] }
+> = ({ size, styles, ...props }) => {
+  return (
+    <DialogTrigger {...props} type="popover">
+      {({ isOpen }) => (
+        <Button rightIcon={<DirectionIcon to={isOpen ? 'top' : 'bottom'} />}>
+          Open modal
+        </Button>
+      )}
+      <Dialog size={size} styles={styles}>
+        <Content>
+          <Paragraph>Test content</Paragraph>
+        </Content>
+      </Dialog>
+    </DialogTrigger>
+  );
+};
+
 export const Default = Template.bind({});
 Default.play = async ({ canvasElement, viewMode }) => {
   if (viewMode === 'docs') return;
@@ -312,3 +332,7 @@ DoNotCloseOnClickAtParticularElement.play = async (context) => {
   await expect(await findByRole('dialog')).toBeInTheDocument();
   await expect(button).toHaveTextContent('It works!');
 };
+
+export const WithTriggerState = WithTriggerStateTemplate.bind({});
+WithTriggerState.args = {};
+WithTriggerState.play = Default.play;

src/components/pickers/Menu/MenuTrigger.tsx

@@ -48,6 +48,10 @@ function MenuTrigger(props: CubeMenuTriggerProps, ref: DOMRef<HTMLElement>) {
     isDisabled,
   } = props;
 
+  if (!Array.isArray(children) || children.length > 2) {
+    throw new Error('MenuTrigger must have exactly 2 children');
+  }
+
   let [menuTrigger, menu] = children;
   const state: MenuTriggerState = useMenuTriggerState(props);
 

src/icons/DirectionIcon.tsx

@@ -77,6 +77,7 @@ export const DirectionIcon = memo(function DirectionIcon(
 
   return (
     <StyledUpIcon
+      data-direction={direction}
       {...iconProps}
       style={{
         rotate: `${rotate}deg`,