react-resizable-panels 2.1.5 → 2.1.7

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

@@ -282,8 +282,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");
@@ -321,7 +321,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
@@ -329,7 +329,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);
 
@@ -354,7 +354,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--) {
@@ -365,7 +365,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;
 }
@@ -527,7 +527,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 => {
@@ -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

@@ -309,8 +309,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");
@@ -348,7 +348,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
@@ -356,7 +356,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);
 
@@ -381,7 +381,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--) {
@@ -392,7 +392,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;
 }
@@ -554,7 +554,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 => {
@@ -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

@@ -295,8 +295,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");
@@ -334,7 +334,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
@@ -342,7 +342,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);
 
@@ -367,7 +367,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--) {
@@ -378,7 +378,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;
 }
@@ -540,7 +540,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 => {
@@ -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

@@ -271,8 +271,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");
@@ -310,7 +310,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
@@ -318,7 +318,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);
 
@@ -343,7 +343,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--) {
@@ -354,7 +354,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;
 }
@@ -516,7 +516,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 => {
@@ -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.7",
   "description": "React components for resizable panel groups/layouts",
   "author": "Brian Vaughn <brian.david.vaughn@gmail.com>",
   "license": "MIT",
@@ -11,6 +11,12 @@
   "source": "src/index.ts",
   "main": "dist/react-resizable-panels.cjs.js",
   "module": "dist/react-resizable-panels.esm.js",
+  "files": [
+    "dist",
+    "package.json",
+    "README.md",
+    "LICENSE"
+  ],
   "exports": {
     ".": {
       "types": {

package/.eslintrc.cjs

@@ -1,27 +0,0 @@
-/* eslint-env node */
-module.exports = {
-  ignorePatterns: [".parcel-cache", "dist", "node_modules"],
-  parser: "@typescript-eslint/parser",
-  parserOptions: {
-    project: "../../tsconfig.json",
-    tsconfigRootDir: __dirname,
-  },
-  plugins: ["@typescript-eslint", "no-restricted-imports", "react-hooks"],
-  root: true,
-  rules: {
-    "@typescript-eslint/no-non-null-assertion": "error",
-    "no-restricted-imports": [
-      "error",
-      {
-        paths: ["react"],
-      },
-    ],
-    "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": [
-      "warn",
-      {
-        additionalHooks: "(useIsomorphicLayoutEffect)",
-      },
-    ],
-  },
-};