From 6b3a95bd11c4b8490f55b96bdcc61873a4c877c8 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Sun, 27 Oct 2024 10:04:11 -0400
Subject: [PATCH] Don't read "direction" from the document; use inherited style
 instead

---
 .../react-resizable-panels/src/PanelGroup.ts   | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/react-resizable-panels/src/PanelGroup.ts b/packages/react-resizable-panels/src/PanelGroup.ts
index f8aae953..82a8d172 100644
--- a/packages/react-resizable-panels/src/PanelGroup.ts
+++ b/packages/react-resizable-panels/src/PanelGroup.ts
@@ -98,6 +98,9 @@ export type PanelGroupProps = Omit<
     storage?: PanelGroupStorage;
     style?: CSSProperties;
     tagName?: keyof HTMLElementTagNameMap;
+
+    // Better TypeScript hinting
+    dir?: "auto" | "ltr" | "rtl" | undefined;
   }>;
 
 const debounceMap: {
@@ -613,8 +616,19 @@ function PanelGroupWithForwardedRef({
   }, []);
 
   const registerResizeHandle = useCallback((dragHandleId: string) => {
+    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: ResizeEvent) {
       event.preventDefault();
+
       const panelGroupElement = panelGroupElementRef.current;
       if (!panelGroupElement) {
         return () => null;
@@ -646,9 +660,9 @@ function PanelGroupWithForwardedRef({
         panelGroupElement
       );
 
-      // Support RTL layouts
       const isHorizontal = direction === "horizontal";
-      if (document.dir === "rtl" && isHorizontal) {
+
+      if (isHorizontal && isRTL) {
         delta = -delta;
       }