react-resizable-panels 2.1.5 → 2.1.6

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+# 2.1.6
+
+- Removed `"engines"` block and replaced with `"packageManager"`
+- Don't read `document.direction` for RTL detection; use inherited style instead
+
 ## 2.1.5
 
 - Add react v19 to peer deps

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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);

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

@@ -1806,6 +1806,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;
@@ -1828,10 +1836,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.esm.js

@@ -1927,6 +1927,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;
@@ -1949,10 +1957,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.node.cjs.js

@@ -1729,6 +1729,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;
@@ -1751,10 +1759,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.node.esm.js

@@ -1705,6 +1705,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;
@@ -1727,10 +1735,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-resizable-panels",
-  "version": "2.1.5",
+  "version": "2.1.6",
   "description": "React components for resizable panel groups/layouts",
   "author": "Brian Vaughn <brian.david.vaughn@gmail.com>",
   "license": "MIT",

package/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;
       }