diff --git a/packages/react-resizable-panels/src/utils/dom/getPanelGroupElement.ts b/packages/react-resizable-panels/src/utils/dom/getPanelGroupElement.ts index 76d91d3e7..42ac17ef1 100644 --- a/packages/react-resizable-panels/src/utils/dom/getPanelGroupElement.ts +++ b/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}"]` ); diff --git a/packages/react-resizable-panels/src/utils/dom/isHTMLElement.ts b/packages/react-resizable-panels/src/utils/dom/isHTMLElement.ts new file mode 100644 index 000000000..215b1e9b5 --- /dev/null +++ b/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 + ); +}