New source found from dndbeyond.com

ddb_main/components/Popover/Popover.tsx

@@ -7,21 +7,23 @@ import React, {
   useEffect,
 } from "react";
 
-import { Dialog } from "@dndbeyond/ttui/components/Dialog";
 import { useIsVisible } from "@dndbeyond/ttui/hooks/useIsVisible";
 
+import { Dialog } from "~/components/Dialog";
 import { useCharacterTheme } from "~/contexts/CharacterTheme";
 
 import styles from "./styles.module.css";
 
 /**
- * This is a popover component to handle dialogs that are dependent on a location from a trigger element.
- * It uses the useIsVisible hook to handle the visibility of the dialog. The position of the dialog
- * is determined by the position prop, which can be set to topLeft, topRight, left, right, bottomLeft, or bottomRight.
- * The maxWidth prop can be used to set the maximum width of the dialog. The trigger prop is the element that will trigger
- * the dialog to open.The popover component also handles the positioning of the dialog based on the trigger element. The
- * handleToggle function toggles the visibility of the dialog, and the handleClose function closes the dialog. The popover
- * component also adds an event listener to the cancel button in the dialog to close the dialog when clicked.
+ * This is a popover component to handle dialogs that are dependent on a location from a trigger
+ * element. It uses the useIsVisible hook to handle the visibility of the dialog. The position of
+ * the dialog is determined by the position prop, which can be set to topLeft, topRight, left,
+ * right, bottomLeft, or bottomRight. The maxWidth prop can be used to set the maximum width of the
+ * dialog. The trigger prop is the element that will trigger the dialog to open.The popover
+ * component also handles the positioning of the dialog based on the trigger element. The
+ * handleToggle function toggles the visibility of the dialog, and the handleClose function closes
+ * the dialog. The popover component also adds an event listener to the cancel button in the dialog
+ * to close the dialog when clicked.
  *
  * In order for a cancel button to work, it must have a `data-cancel` attribute.
  **/
@@ -36,7 +38,7 @@ interface PopoverProps {
     | "bottomLeft"
     | "bottomRight"
     | "bottom";
-  trigger: ReactElement;
+  trigger: ReactElement<{ onClick?: (e: MouseEvent) => void }>;
   maxWidth?: number;
   variant?: "default" | "menu";
   "data-testid"?: string;
@@ -85,9 +87,12 @@ export const Popover: FC<PopoverProps> = ({
     // Check if children is a ReactElement
     if (React.isValidElement(children)) {
       // Create a copy of the ReactElement and attach handleClose function to it
-      return cloneElement(children as ReactElement, {
-        handleClose,
-      });
+      return cloneElement(
+        children as ReactElement<{ handleClose: (e: MouseEvent) => void }>,
+        {
+          handleClose,
+        }
+      );
     }
     // If not just return the children - means its a primitive type
     else {