Fallback to check for type of HTMLElement using duck typing (#484)

Author: bvaughn

packages/react-resizable-panels/src/utils/dom/getPanelGroupElement.ts

@@ -1,16 +1,15 @@
+import { isHTMLElement } from "./isHTMLElement";
+
 export function getPanelGroupElement(
   id: string,
   rootElement: ParentNode | HTMLElement = document
 ): HTMLElement | null {
-  //If the root element is the PanelGroup
-  if (
-    rootElement instanceof HTMLElement &&
-    (rootElement as HTMLElement)?.dataset?.panelGroupId == id
-  ) {
+  // If the root element is the PanelGroup
+  if (isHTMLElement(rootElement) && rootElement.dataset.panelGroupId == id) {
     return rootElement as HTMLElement;
   }
 
-  //Else query children
+  // Else query children
   const element = rootElement.querySelector(
     `[data-panel-group][data-panel-group-id="${id}"]`
   );

packages/react-resizable-panels/src/utils/dom/isHTMLElement.ts

@@ -0,0 +1,13 @@
+export function isHTMLElement(target: unknown): target is HTMLElement {
+  if (target instanceof HTMLElement) {
+    return true;
+  }
+
+  // Fallback to duck typing to handle edge case of portals within a popup window
+  return (
+    typeof target === "object" &&
+    target !== null &&
+    "tagName" in target &&
+    "getAttribute" in target
+  );
+}