react-resizable-panels 2.1.5 → 2.1.7

package/dist/declarations/src/PanelGroup.d.ts

@@ -20,6 +20,7 @@ export type PanelGroupProps = Omit<HTMLAttributes<keyof HTMLElementTagNameMap>,
     storage?: PanelGroupStorage;
     style?: CSSProperties;
     tagName?: keyof HTMLElementTagNameMap;
+    dir?: "auto" | "ltr" | "rtl" | undefined;
 }>;
 export declare const PanelGroup: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<keyof HTMLElementTagNameMap>, "id"> & {
     autoSaveId?: string | null | undefined;
@@ -31,6 +32,7 @@ export declare const PanelGroup: import("react").ForwardRefExoticComponent<Omit<
     storage?: PanelGroupStorage | undefined;
     style?: CSSProperties | undefined;
     tagName?: keyof HTMLElementTagNameMap | undefined;
+    dir?: "auto" | "ltr" | "rtl" | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<ImperativePanelGroupHandle>>;

package/dist/react-resizable-panels.browser.cjs.js

@@ -331,8 +331,8 @@ function intersects(rectOne, rectTwo, strict) {
 /**
  * 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
  */
 function compare(a, b) {
   if (a === b) throw new Error("Cannot compare node with itself");
@@ -370,7 +370,7 @@ function compare(a, b) {
 }
 const props = /\b(?:position|zIndex|opacity|transform|webkitTransform|mixBlendMode|filter|webkitFilter|isolation)\b/;
 
-/** @param {HTMLElement} node */
+/** @param {HTMLElement | SVGElement} node */
 function is_flex_item(node) {
   var _get_parent;
   // @ts-ignore
@@ -378,7 +378,7 @@ function is_flex_item(node) {
   return display === "flex" || display === "inline-flex";
 }
 
-/** @param {HTMLElement} node */
+/** @param {HTMLElement | SVGElement} node */
 function creates_stacking_context(node) {
   const style = getComputedStyle(node);
 
@@ -403,7 +403,7 @@ function creates_stacking_context(node) {
   return false;
 }
 
-/** @param {HTMLElement[]} nodes */
+/** @param {(HTMLElement| SVGElement)[]} nodes */
 function find_stacking_context(nodes) {
   let i = nodes.length;
   while (i--) {
@@ -414,7 +414,7 @@ function find_stacking_context(nodes) {
   return null;
 }
 
-/** @param {HTMLElement} node */
+/** @param {HTMLElement | SVGElement} node */
 function get_z_index(node) {
   return node && Number(getComputedStyle(node).zIndex) || 0;
 }
@@ -576,7 +576,7 @@ function recalculateIntersectingHandles({
 }) {
   intersectingHandles.splice(0);
   let targetElement = null;
-  if (target instanceof HTMLElement) {
+  if (target instanceof HTMLElement || target instanceof SVGElement) {
     targetElement = target;
   }
   registeredResizeHandlers.forEach(data => {
@@ -1949,6 +1949,14 @@ function PanelGroupWithForwardedRef({
     };
   }, []);
   const registerResizeHandle = useCallback(dragHandleId => {
+    let isRTL = false;
+    const panelGroupElement = panelGroupElementRef.current;
+    if (panelGroupElement) {
+      const style = window.getComputedStyle(panelGroupElement, null);
+      if (style.getPropertyValue("direction") === "rtl") {
+        isRTL = true;
+      }
+    }
     return function resizeHandler(event) {
       event.preventDefault();
       const panelGroupElement = panelGroupElementRef.current;
@@ -1971,10 +1979,8 @@ function PanelGroupWithForwardedRef({
       } = dragState !== null && dragState !== void 0 ? dragState : {};
       const pivotIndices = determinePivotIndices(groupId, dragHandleId, panelGroupElement);
       let delta = calculateDeltaPercentage(event, dragHandleId, direction, dragState, keyboardResizeBy, panelGroupElement);
-
-      // Support RTL layouts
       const isHorizontal = direction === "horizontal";
-      if (document.dir === "rtl" && isHorizontal) {
+      if (isHorizontal && isRTL) {
         delta = -delta;
       }
       const panelConstraints = panelDataArray.map(panelData => panelData.constraints);

package/dist/react-resizable-panels.browser.development.cjs.js

@@ -337,8 +337,8 @@ function intersects(rectOne, rectTwo, strict) {
 /**
  * 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
  */
 function compare(a, b) {
   if (a === b) throw new Error("Cannot compare node with itself");
@@ -376,7 +376,7 @@ function compare(a, b) {
 }
 const props = /\b(?:position|zIndex|opacity|transform|webkitTransform|mixBlendMode|filter|webkitFilter|isolation)\b/;
 
-/** @param {HTMLElement} node */
+/** @param {HTMLElement | SVGElement} node */
 function is_flex_item(node) {
   var _get_parent;
   // @ts-ignore
@@ -384,7 +384,7 @@ function is_flex_item(node) {
   return display === "flex" || display === "inline-flex";
 }
 
-/** @param {HTMLElement} node */
+/** @param {HTMLElement | SVGElement} node */
 function creates_stacking_context(node) {
   const style = getComputedStyle(node);
 
@@ -409,7 +409,7 @@ function creates_stacking_context(node) {
   return false;
 }
 
-/** @param {HTMLElement[]} nodes */
+/** @param {(HTMLElement| SVGElement)[]} nodes */
 function find_stacking_context(nodes) {
   let i = nodes.length;
   while (i--) {
@@ -420,7 +420,7 @@ function find_stacking_context(nodes) {
   return null;
 }
 
-/** @param {HTMLElement} node */
+/** @param {HTMLElement | SVGElement} node */
 function get_z_index(node) {
   return node && Number(getComputedStyle(node).zIndex) || 0;
 }
@@ -582,7 +582,7 @@ function recalculateIntersectingHandles({
 }) {
   intersectingHandles.splice(0);
   let targetElement = null;
-  if (target instanceof HTMLElement) {
+  if (target instanceof HTMLElement || target instanceof SVGElement) {
     targetElement = target;
   }
   registeredResizeHandlers.forEach(data => {
@@ -2055,6 +2055,14 @@ function PanelGroupWithForwardedRef({
     };
   }, []);
   const registerResizeHandle = useCallback(dragHandleId => {
+    let isRTL = false;
+    const panelGroupElement = panelGroupElementRef.current;
+    if (panelGroupElement) {
+      const style = window.getComputedStyle(panelGroupElement, null);
+      if (style.getPropertyValue("direction") === "rtl") {
+        isRTL = true;
+      }
+    }
     return function resizeHandler(event) {
       event.preventDefault();
       const panelGroupElement = panelGroupElementRef.current;
@@ -2077,10 +2085,8 @@ function PanelGroupWithForwardedRef({
       } = dragState !== null && dragState !== void 0 ? dragState : {};
       const pivotIndices = determinePivotIndices(groupId, dragHandleId, panelGroupElement);
       let delta = calculateDeltaPercentage(event, dragHandleId, direction, dragState, keyboardResizeBy, panelGroupElement);
-
-      // Support RTL layouts
       const isHorizontal = direction === "horizontal";
-      if (document.dir === "rtl" && isHorizontal) {
+      if (isHorizontal && isRTL) {
         delta = -delta;
       }
       const panelConstraints = panelDataArray.map(panelData => panelData.constraints);

package/dist/react-resizable-panels.browser.development.esm.js

@@ -313,8 +313,8 @@ function intersects(rectOne, rectTwo, strict) {
 /**
  * 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
  */
 function compare(a, b) {
   if (a === b) throw new Error("Cannot compare node with itself");
@@ -352,7 +352,7 @@ function compare(a, b) {
 }
 const props = /\b(?:position|zIndex|opacity|transform|webkitTransform|mixBlendMode|filter|webkitFilter|isolation)\b/;
 
-/** @param {HTMLElement} node */
+/** @param {HTMLElement | SVGElement} node */
 function is_flex_item(node) {
   var _get_parent;
   // @ts-ignore
@@ -360,7 +360,7 @@ function is_flex_item(node) {
   return display === "flex" || display === "inline-flex";
 }
 
-/** @param {HTMLElement} node */
+/** @param {HTMLElement | SVGElement} node */
 function creates_stacking_context(node) {
   const style = getComputedStyle(node);
 
@@ -385,7 +385,7 @@ function creates_stacking_context(node) {
   return false;
 }
 
-/** @param {HTMLElement[]} nodes */
+/** @param {(HTMLElement| SVGElement)[]} nodes */
 function find_stacking_context(nodes) {
   let i = nodes.length;
   while (i--) {
@@ -396,7 +396,7 @@ function find_stacking_context(nodes) {
   return null;
 }
 
-/** @param {HTMLElement} node */
+/** @param {HTMLElement | SVGElement} node */
 function get_z_index(node) {
   return node && Number(getComputedStyle(node).zIndex) || 0;
 }
@@ -558,7 +558,7 @@ function recalculateIntersectingHandles({
 }) {
   intersectingHandles.splice(0);
   let targetElement = null;
-  if (target instanceof HTMLElement) {
+  if (target instanceof HTMLElement || target instanceof SVGElement) {
     targetElement = target;
   }
   registeredResizeHandlers.forEach(data => {
@@ -2031,6 +2031,14 @@ function PanelGroupWithForwardedRef({
     };
   }, []);
   const registerResizeHandle = useCallback(dragHandleId => {
+    let isRTL = false;
+    const panelGroupElement = panelGroupElementRef.current;
+    if (panelGroupElement) {
+      const style = window.getComputedStyle(panelGroupElement, null);
+      if (style.getPropertyValue("direction") === "rtl") {
+        isRTL = true;
+      }
+    }
     return function resizeHandler(event) {
       event.preventDefault();
       const panelGroupElement = panelGroupElementRef.current;
@@ -2053,10 +2061,8 @@ function PanelGroupWithForwardedRef({
       } = dragState !== null && dragState !== void 0 ? dragState : {};
       const pivotIndices = determinePivotIndices(groupId, dragHandleId, panelGroupElement);
       let delta = calculateDeltaPercentage(event, dragHandleId, direction, dragState, keyboardResizeBy, panelGroupElement);
-
-      // Support RTL layouts
       const isHorizontal = direction === "horizontal";
-      if (document.dir === "rtl" && isHorizontal) {
+      if (isHorizontal && isRTL) {
         delta = -delta;
       }
       const panelConstraints = panelDataArray.map(panelData => panelData.constraints);

package/dist/react-resizable-panels.browser.esm.js

@@ -307,8 +307,8 @@ function intersects(rectOne, rectTwo, strict) {
 /**
  * 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
  */
 function compare(a, b) {
   if (a === b) throw new Error("Cannot compare node with itself");
@@ -346,7 +346,7 @@ function compare(a, b) {
 }
 const props = /\b(?:position|zIndex|opacity|transform|webkitTransform|mixBlendMode|filter|webkitFilter|isolation)\b/;
 
-/** @param {HTMLElement} node */
+/** @param {HTMLElement | SVGElement} node */
 function is_flex_item(node) {
   var _get_parent;
   // @ts-ignore
@@ -354,7 +354,7 @@ function is_flex_item(node) {
   return display === "flex" || display === "inline-flex";
 }
 
-/** @param {HTMLElement} node */
+/** @param {HTMLElement | SVGElement} node */
 function creates_stacking_context(node) {
   const style = getComputedStyle(node);
 
@@ -379,7 +379,7 @@ function creates_stacking_context(node) {
   return false;
 }
 
-/** @param {HTMLElement[]} nodes */
+/** @param {(HTMLElement| SVGElement)[]} nodes */
 function find_stacking_context(nodes) {
   let i = nodes.length;
   while (i--) {
@@ -390,7 +390,7 @@ function find_stacking_context(nodes) {
   return null;
 }
 
-/** @param {HTMLElement} node */
+/** @param {HTMLElement | SVGElement} node */
 function get_z_index(node) {
   return node && Number(getComputedStyle(node).zIndex) || 0;
 }
@@ -552,7 +552,7 @@ function recalculateIntersectingHandles({
 }) {
   intersectingHandles.splice(0);
   let targetElement = null;
-  if (target instanceof HTMLElement) {
+  if (target instanceof HTMLElement || target instanceof SVGElement) {
     targetElement = target;
   }
   registeredResizeHandlers.forEach(data => {
@@ -1925,6 +1925,14 @@ function PanelGroupWithForwardedRef({
     };
   }, []);
   const registerResizeHandle = useCallback(dragHandleId => {
+    let isRTL = false;
+    const panelGroupElement = panelGroupElementRef.current;
+    if (panelGroupElement) {
+      const style = window.getComputedStyle(panelGroupElement, null);
+      if (style.getPropertyValue("direction") === "rtl") {
+        isRTL = true;
+      }
+    }
     return function resizeHandler(event) {
       event.preventDefault();
       const panelGroupElement = panelGroupElementRef.current;
@@ -1947,10 +1955,8 @@ function PanelGroupWithForwardedRef({
       } = dragState !== null && dragState !== void 0 ? dragState : {};
       const pivotIndices = determinePivotIndices(groupId, dragHandleId, panelGroupElement);
       let delta = calculateDeltaPercentage(event, dragHandleId, direction, dragState, keyboardResizeBy, panelGroupElement);
-
-      // Support RTL layouts
       const isHorizontal = direction === "horizontal";
-      if (document.dir === "rtl" && isHorizontal) {
+      if (isHorizontal && isRTL) {
         delta = -delta;
       }
       const panelConstraints = panelDataArray.map(panelData => panelData.constraints);

package/dist/react-resizable-panels.cjs.js

@@ -333,8 +333,8 @@ function intersects(rectOne, rectTwo, strict) {
 /**
  * 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
  */
 function compare(a, b) {
   if (a === b) throw new Error("Cannot compare node with itself");
@@ -372,7 +372,7 @@ function compare(a, b) {
 }
 const props = /\b(?:position|zIndex|opacity|transform|webkitTransform|mixBlendMode|filter|webkitFilter|isolation)\b/;
 
-/** @param {HTMLElement} node */
+/** @param {HTMLElement | SVGElement} node */
 function is_flex_item(node) {
   var _get_parent;
   // @ts-ignore
@@ -380,7 +380,7 @@ function is_flex_item(node) {
   return display === "flex" || display === "inline-flex";
 }
 
-/** @param {HTMLElement} node */
+/** @param {HTMLElement | SVGElement} node */
 function creates_stacking_context(node) {
   const style = getComputedStyle(node);
 
@@ -405,7 +405,7 @@ function creates_stacking_context(node) {
   return false;
 }
 
-/** @param {HTMLElement[]} nodes */
+/** @param {(HTMLElement| SVGElement)[]} nodes */
 function find_stacking_context(nodes) {
   let i = nodes.length;
   while (i--) {
@@ -416,7 +416,7 @@ function find_stacking_context(nodes) {
   return null;
 }
 
-/** @param {HTMLElement} node */
+/** @param {HTMLElement | SVGElement} node */
 function get_z_index(node) {
   return node && Number(getComputedStyle(node).zIndex) || 0;
 }
@@ -578,7 +578,7 @@ function recalculateIntersectingHandles({
 }) {
   intersectingHandles.splice(0);
   let targetElement = null;
-  if (target instanceof HTMLElement) {
+  if (target instanceof HTMLElement || target instanceof SVGElement) {
     targetElement = target;
   }
   registeredResizeHandlers.forEach(data => {
@@ -1951,6 +1951,14 @@ function PanelGroupWithForwardedRef({
     };
   }, []);
   const registerResizeHandle = useCallback(dragHandleId => {
+    let isRTL = false;
+    const panelGroupElement = panelGroupElementRef.current;
+    if (panelGroupElement) {
+      const style = window.getComputedStyle(panelGroupElement, null);
+      if (style.getPropertyValue("direction") === "rtl") {
+        isRTL = true;
+      }
+    }
     return function resizeHandler(event) {
       event.preventDefault();
       const panelGroupElement = panelGroupElementRef.current;
@@ -1973,10 +1981,8 @@ function PanelGroupWithForwardedRef({
       } = dragState !== null && dragState !== void 0 ? dragState : {};
       const pivotIndices = determinePivotIndices(groupId, dragHandleId, panelGroupElement);
       let delta = calculateDeltaPercentage(event, dragHandleId, direction, dragState, keyboardResizeBy, panelGroupElement);
-
-      // Support RTL layouts
       const isHorizontal = direction === "horizontal";
-      if (document.dir === "rtl" && isHorizontal) {
+      if (isHorizontal && isRTL) {
         delta = -delta;
       }
       const panelConstraints = panelDataArray.map(panelData => panelData.constraints);

package/dist/react-resizable-panels.development.cjs.js

@@ -344,8 +344,8 @@ function intersects(rectOne, rectTwo, strict) {
 /**
  * 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
  */
 function compare(a, b) {
   if (a === b) throw new Error("Cannot compare node with itself");
@@ -383,7 +383,7 @@ function compare(a, b) {
 }
 const props = /\b(?:position|zIndex|opacity|transform|webkitTransform|mixBlendMode|filter|webkitFilter|isolation)\b/;
 
-/** @param {HTMLElement} node */
+/** @param {HTMLElement | SVGElement} node */
 function is_flex_item(node) {
   var _get_parent;
   // @ts-ignore
@@ -391,7 +391,7 @@ function is_flex_item(node) {
   return display === "flex" || display === "inline-flex";
 }
 
-/** @param {HTMLElement} node */
+/** @param {HTMLElement | SVGElement} node */
 function creates_stacking_context(node) {
   const style = getComputedStyle(node);
 
@@ -416,7 +416,7 @@ function creates_stacking_context(node) {
   return false;
 }
 
-/** @param {HTMLElement[]} nodes */
+/** @param {(HTMLElement| SVGElement)[]} nodes */
 function find_stacking_context(nodes) {
   let i = nodes.length;
   while (i--) {
@@ -427,7 +427,7 @@ function find_stacking_context(nodes) {
   return null;
 }
 
-/** @param {HTMLElement} node */
+/** @param {HTMLElement | SVGElement} node */
 function get_z_index(node) {
   return node && Number(getComputedStyle(node).zIndex) || 0;
 }
@@ -589,7 +589,7 @@ function recalculateIntersectingHandles({
 }) {
   intersectingHandles.splice(0);
   let targetElement = null;
-  if (target instanceof HTMLElement) {
+  if (target instanceof HTMLElement || target instanceof SVGElement) {
     targetElement = target;
   }
   registeredResizeHandlers.forEach(data => {
@@ -2062,6 +2062,14 @@ function PanelGroupWithForwardedRef({
     };
   }, []);
   const registerResizeHandle = useCallback(dragHandleId => {
+    let isRTL = false;
+    const panelGroupElement = panelGroupElementRef.current;
+    if (panelGroupElement) {
+      const style = window.getComputedStyle(panelGroupElement, null);
+      if (style.getPropertyValue("direction") === "rtl") {
+        isRTL = true;
+      }
+    }
     return function resizeHandler(event) {
       event.preventDefault();
       const panelGroupElement = panelGroupElementRef.current;
@@ -2084,10 +2092,8 @@ function PanelGroupWithForwardedRef({
       } = dragState !== null && dragState !== void 0 ? dragState : {};
       const pivotIndices = determinePivotIndices(groupId, dragHandleId, panelGroupElement);
       let delta = calculateDeltaPercentage(event, dragHandleId, direction, dragState, keyboardResizeBy, panelGroupElement);
-
-      // Support RTL layouts
       const isHorizontal = direction === "horizontal";
-      if (document.dir === "rtl" && isHorizontal) {
+      if (isHorizontal && isRTL) {
         delta = -delta;
       }
       const panelConstraints = panelDataArray.map(panelData => panelData.constraints);

package/dist/react-resizable-panels.development.esm.js

@@ -320,8 +320,8 @@ function intersects(rectOne, rectTwo, strict) {
 /**
  * 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
  */
 function compare(a, b) {
   if (a === b) throw new Error("Cannot compare node with itself");
@@ -359,7 +359,7 @@ function compare(a, b) {
 }
 const props = /\b(?:position|zIndex|opacity|transform|webkitTransform|mixBlendMode|filter|webkitFilter|isolation)\b/;
 
-/** @param {HTMLElement} node */
+/** @param {HTMLElement | SVGElement} node */
 function is_flex_item(node) {
   var _get_parent;
   // @ts-ignore
@@ -367,7 +367,7 @@ function is_flex_item(node) {
   return display === "flex" || display === "inline-flex";
 }
 
-/** @param {HTMLElement} node */
+/** @param {HTMLElement | SVGElement} node */
 function creates_stacking_context(node) {
   const style = getComputedStyle(node);
 
@@ -392,7 +392,7 @@ function creates_stacking_context(node) {
   return false;
 }
 
-/** @param {HTMLElement[]} nodes */
+/** @param {(HTMLElement| SVGElement)[]} nodes */
 function find_stacking_context(nodes) {
   let i = nodes.length;
   while (i--) {
@@ -403,7 +403,7 @@ function find_stacking_context(nodes) {
   return null;
 }
 
-/** @param {HTMLElement} node */
+/** @param {HTMLElement | SVGElement} node */
 function get_z_index(node) {
   return node && Number(getComputedStyle(node).zIndex) || 0;
 }
@@ -565,7 +565,7 @@ function recalculateIntersectingHandles({
 }) {
   intersectingHandles.splice(0);
   let targetElement = null;
-  if (target instanceof HTMLElement) {
+  if (target instanceof HTMLElement || target instanceof SVGElement) {
     targetElement = target;
   }
   registeredResizeHandlers.forEach(data => {
@@ -2038,6 +2038,14 @@ function PanelGroupWithForwardedRef({
     };
   }, []);
   const registerResizeHandle = useCallback(dragHandleId => {
+    let isRTL = false;
+    const panelGroupElement = panelGroupElementRef.current;
+    if (panelGroupElement) {
+      const style = window.getComputedStyle(panelGroupElement, null);
+      if (style.getPropertyValue("direction") === "rtl") {
+        isRTL = true;
+      }
+    }
     return function resizeHandler(event) {
       event.preventDefault();
       const panelGroupElement = panelGroupElementRef.current;
@@ -2060,10 +2068,8 @@ function PanelGroupWithForwardedRef({
       } = dragState !== null && dragState !== void 0 ? dragState : {};
       const pivotIndices = determinePivotIndices(groupId, dragHandleId, panelGroupElement);
       let delta = calculateDeltaPercentage(event, dragHandleId, direction, dragState, keyboardResizeBy, panelGroupElement);
-
-      // Support RTL layouts
       const isHorizontal = direction === "horizontal";
-      if (document.dir === "rtl" && isHorizontal) {
+      if (isHorizontal && isRTL) {
         delta = -delta;
       }
       const panelConstraints = panelDataArray.map(panelData => panelData.constraints);

package/dist/react-resizable-panels.development.node.cjs.js

@@ -306,8 +306,8 @@ function intersects(rectOne, rectTwo, strict) {
 /**
  * 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
  */
 function compare(a, b) {
   if (a === b) throw new Error("Cannot compare node with itself");
@@ -345,7 +345,7 @@ function compare(a, b) {
 }
 const props = /\b(?:position|zIndex|opacity|transform|webkitTransform|mixBlendMode|filter|webkitFilter|isolation)\b/;
 
-/** @param {HTMLElement} node */
+/** @param {HTMLElement | SVGElement} node */
 function is_flex_item(node) {
   var _get_parent;
   // @ts-ignore
@@ -353,7 +353,7 @@ function is_flex_item(node) {
   return display === "flex" || display === "inline-flex";
 }
 
-/** @param {HTMLElement} node */
+/** @param {HTMLElement | SVGElement} node */
 function creates_stacking_context(node) {
   const style = getComputedStyle(node);
 
@@ -378,7 +378,7 @@ function creates_stacking_context(node) {
   return false;
 }
 
-/** @param {HTMLElement[]} nodes */
+/** @param {(HTMLElement| SVGElement)[]} nodes */
 function find_stacking_context(nodes) {
   let i = nodes.length;
   while (i--) {
@@ -389,7 +389,7 @@ function find_stacking_context(nodes) {
   return null;
 }
 
-/** @param {HTMLElement} node */
+/** @param {HTMLElement | SVGElement} node */
 function get_z_index(node) {
   return node && Number(getComputedStyle(node).zIndex) || 0;
 }
@@ -551,7 +551,7 @@ function recalculateIntersectingHandles({
 }) {
   intersectingHandles.splice(0);
   let targetElement = null;
-  if (target instanceof HTMLElement) {
+  if (target instanceof HTMLElement || target instanceof SVGElement) {
     targetElement = target;
   }
   registeredResizeHandlers.forEach(data => {
@@ -1830,6 +1830,14 @@ function PanelGroupWithForwardedRef({
     forceUpdate();
   }, [forceUpdate]);
   const registerResizeHandle = useCallback(dragHandleId => {
+    let isRTL = false;
+    const panelGroupElement = panelGroupElementRef.current;
+    if (panelGroupElement) {
+      const style = window.getComputedStyle(panelGroupElement, null);
+      if (style.getPropertyValue("direction") === "rtl") {
+        isRTL = true;
+      }
+    }
     return function resizeHandler(event) {
       event.preventDefault();
       const panelGroupElement = panelGroupElementRef.current;
@@ -1852,10 +1860,8 @@ function PanelGroupWithForwardedRef({
       } = dragState !== null && dragState !== void 0 ? dragState : {};
       const pivotIndices = determinePivotIndices(groupId, dragHandleId, panelGroupElement);
       let delta = calculateDeltaPercentage(event, dragHandleId, direction, dragState, keyboardResizeBy, panelGroupElement);
-
-      // Support RTL layouts
       const isHorizontal = direction === "horizontal";
-      if (document.dir === "rtl" && isHorizontal) {
+      if (isHorizontal && isRTL) {
         delta = -delta;
       }
       const panelConstraints = panelDataArray.map(panelData => panelData.constraints);