feat(Support SVG elements on modals): expand utils for stacking order to include SVGElements (#427)

The issue:
When hovering over SVG icons on elements "above" a handle (e.g. modal)
the resize cursor appears and users can drag it to resize the panels
"bellow".

Suggested solution:
Expand the `recalculateIntersectingHandles` function to include
`SVGElement` when looking at the stacking order of elements which fire
pointer events.

Author: gatzjames

packages/react-resizable-panels/src/PanelResizeHandleRegistry.ts

@@ -167,8 +167,8 @@ function recalculateIntersectingHandles({
 }) {
   intersectingHandles.splice(0);
 
-  let targetElement: HTMLElement | null = null;
-  if (target instanceof HTMLElement) {
+  let targetElement: HTMLElement | SVGElement | null = null;
+  if (target instanceof HTMLElement || target instanceof SVGElement) {
     targetElement = target;
   }
 
@@ -212,7 +212,7 @@ function recalculateIntersectingHandles({
         // It's not enough to compare only the target
         // The target might be a small element inside of a larger container
         // (For example, a SPAN or a DIV inside of a larger modal dialog)
-        let currentElement: HTMLElement | null = targetElement;
+        let currentElement: HTMLElement | SVGElement | null = targetElement;
         let didIntersect = false;
         while (currentElement) {
           if (currentElement.contains(dragHandleElement)) {

packages/react-resizable-panels/src/vendor/stacking-order.ts

@@ -7,10 +7,10 @@ import { assert } from "..";
 /**
  * Determine which of two nodes appears in front of the other —
  * if `a` is in front, returns 1, otherwise returns -1
- * @param {HTMLElement} a
- * @param {HTMLElement} b
+ * @param {HTMLElement | SVGElement} a
+ * @param {HTMLElement | SVGElement} b
  */
-export function compare(a: HTMLElement, b: HTMLElement): number {
+export function compare(a: HTMLElement | SVGElement, b: HTMLElement | SVGElement): number {
   if (a === b) throw new Error("Cannot compare node with itself");
 
   const ancestors = {
@@ -60,15 +60,15 @@ export function compare(a: HTMLElement, b: HTMLElement): number {
 const props =
   /\b(?:position|zIndex|opacity|transform|webkitTransform|mixBlendMode|filter|webkitFilter|isolation)\b/;
 
-/** @param {HTMLElement} node */
-function is_flex_item(node: HTMLElement) {
+/** @param {HTMLElement | SVGElement} node */
+function is_flex_item(node: HTMLElement | SVGElement) {
   // @ts-ignore
   const display = getComputedStyle(get_parent(node) ?? node).display;
   return display === "flex" || display === "inline-flex";
 }
 
-/** @param {HTMLElement} node */
-function creates_stacking_context(node: HTMLElement) {
+/** @param {HTMLElement | SVGElement} node */
+function creates_stacking_context(node: HTMLElement | SVGElement) {
   const style = getComputedStyle(node);
 
   // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
@@ -98,8 +98,8 @@ function creates_stacking_context(node: HTMLElement) {
   return false;
 }
 
-/** @param {HTMLElement[]} nodes */
-function find_stacking_context(nodes: HTMLElement[]) {
+/** @param {(HTMLElement| SVGElement)[]} nodes */
+function find_stacking_context(nodes: (HTMLElement | SVGElement)[]) {
   let i = nodes.length;
 
   while (i--) {
@@ -111,13 +111,13 @@ function find_stacking_context(nodes: HTMLElement[]) {
   return null;
 }
 
-/** @param {HTMLElement} node */
-function get_z_index(node: HTMLElement | null) {
+/** @param {HTMLElement | SVGElement} node */
+function get_z_index(node: HTMLElement | SVGElement | null) {
   return (node && Number(getComputedStyle(node).zIndex)) || 0;
 }
 
 /** @param {HTMLElement} node */
-function get_ancestors(node: HTMLElement | null) {
+function get_ancestors(node: HTMLElement | SVGElement | null) {
   const ancestors = [];
 
   while (node) {