fix supplementary action type

EasyPost · Nov 13, 2023 · 9f4dba2 · 9f4dba2
1 parent b585b20
commit 9f4dba2
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 15 deletions.
diff --git a/easy-ui-react/src/VerticalNav/SupplementaryAction.tsx b/easy-ui-react/src/VerticalNav/SupplementaryAction.tsx
@@ -1,5 +1,12 @@
 import ArrowForwardIosIcon from "@easypost/easy-ui-icons/ArrowForwardIos";
-import React, { ComponentProps, ElementType, ReactNode } from "react";
+import { DOMRef } from "@react-types/shared";
+import React, {
+  ComponentProps,
+  ElementType,
+  ReactElement,
+  ReactNode,
+  forwardRef,
+} from "react";
 import { Icon } from "../Icon";
 import { Text } from "../Text";
 
@@ -11,12 +18,23 @@ export type SupplementaryActionProps<T extends ElementType = "button"> =
     children: ReactNode;
   };
 
-export function SupplementaryAction(props: SupplementaryActionProps) {
-  const { as: As = "button", children, ...elementProps } = props;
-  return (
-    <As className={styles.supplementaryAction} {...elementProps}>
-      <Text variant="subtitle2">{children}</Text>
-      <Icon symbol={ArrowForwardIosIcon} size="xs" />
-    </As>
-  );
-}
+type SupplementaryActionWithForwardRef = {
+  <T extends ElementType = "button">(
+    props: SupplementaryActionProps<T> & { ref?: DOMRef },
+  ): ReactElement;
+  displayName?: string;
+};
+
+export const SupplementaryAction = forwardRef<null, SupplementaryActionProps>(
+  (props, ref) => {
+    const { as: As = "button", children, ...elementProps } = props;
+    return (
+      <As ref={ref} className={styles.supplementaryAction} {...elementProps}>
+        <Text variant="subtitle2">{children}</Text>
+        <Icon symbol={ArrowForwardIosIcon} size="xs" />
+      </As>
+    );
+  },
+) as SupplementaryActionWithForwardRef;
+
+SupplementaryAction.displayName = "SupplementaryAction";
diff --git a/easy-ui-react/src/VerticalNav/VerticalNav.stories.tsx b/easy-ui-react/src/VerticalNav/VerticalNav.stories.tsx
@@ -12,6 +12,8 @@ import {
 import { ExpandableVerticalNav, VerticalNav } from "./VerticalNav";
 import { Icon } from "../Icon";
 import { Text } from "../Text";
+import { Menu } from "../Menu";
+import { UnstyledButton } from "../UnstyledButton";
 
 type Story = StoryObj<typeof VerticalNav>;
 
@@ -308,11 +310,21 @@ export const SupplementaryAction: Story = {
           aria-label="Sidebar"
           renderLogo={() => <EPLogo />}
           supplementaryAction={
-            <VerticalNav.SupplementaryAction
-              onClick={action("supplementary action clicked")}
-            >
-              Optional Bottom
-            </VerticalNav.SupplementaryAction>
+            <Menu>
+              <Menu.Trigger>
+                <VerticalNav.SupplementaryAction as={UnstyledButton}>
+                  Optional Bottom
+                </VerticalNav.SupplementaryAction>
+              </Menu.Trigger>
+              <Menu.Overlay
+                onAction={action("Selected")}
+                placement="left bottom"
+              >
+                <Menu.Item key="copy">Copy</Menu.Item>
+                <Menu.Item key="cut">Cut</Menu.Item>
+                <Menu.Item key="paste">Paste</Menu.Item>
+              </Menu.Overlay>
+            </Menu>
           }
           selectedKeys={[page.substring(0, 1)]}
         >