react-resizable-panels 3.0.4 → 3.0.6-alpha.0

package/README.md

@@ -80,7 +80,6 @@ import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 | `getSize(): number`      | Gets the current size of the panel as a percentage (`1 - 100`).                    |
 | `isCollapsed(): boolean` | Returns `true` if the panel is currently _collapsed_ (`size === 0`).               |
 | `isExpanded(): boolean`  | Returns `true` if the panel is currently _not collapsed_ (`!isCollapsed()`).       |
-| `getSize(): number`      | Returns the most recently committed size of the panel as a percentage (`1 - 100`). |
 | `resize(size: number)`   | Resize panel to the specified _percentage_ (`1 - 100`).                            |
 
 ### `PanelResizeHandle`
@@ -124,7 +123,7 @@ The `Panel` API doesn't _require_ `id` and `order` props because they aren't nec
 </PanelGroup>
 ```
 
-### Can a attach a ref to the DOM elements?
+### Can I attach a ref to the DOM elements?
 
 No. I think exposing two refs (one for the component's imperative API and one for a DOM element) would be awkward. This library does export several utility methods for accessing the underlying DOM elements though. For example:
 

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

@@ -525,7 +525,9 @@ function handlePointerMove(event) {
 
   // Edge case (see #340)
   // Detect when the pointer has been released outside an iframe on a different domain
-  if (isPointerDown && event.buttons === 0) {
+  if (isPointerDown &&
+  // Skip this check for "pointerleave" events, else Firefox triggers a false positive (see #514)
+  event.type !== "pointerleave" && event.buttons === 0) {
     isPointerDown = false;
     updateResizeHandlerStates("up", event);
   }
@@ -957,7 +959,7 @@ function adjustLayoutByDelta({
       if (!fuzzyNumbersEqual(prevSize, safeSize)) {
         deltaApplied += prevSize - safeSize;
         nextLayout[index] = safeSize;
-        if (deltaApplied.toPrecision(3).localeCompare(Math.abs(delta).toPrecision(3), undefined, {
+        if (deltaApplied.toFixed(3).localeCompare(Math.abs(delta).toFixed(3), undefined, {
           numeric: true
         }) >= 0) {
           break;
@@ -1455,12 +1457,12 @@ function computePanelFlexBoxStyle({
   if (size == null) {
     // Initial render (before panels have registered themselves)
     // In order to support server rendering, fall back to default size if provided
-    flexGrow = defaultSize != undefined ? defaultSize.toPrecision(precision) : "1";
+    flexGrow = defaultSize != undefined ? defaultSize.toFixed(precision) : "1";
   } else if (panelData.length === 1) {
     // Special case: Single panel group should always fill full width/height
     flexGrow = "1";
   } else {
-    flexGrow = size.toPrecision(precision);
+    flexGrow = size.toFixed(precision);
   }
   return {
     flexBasis: 0,

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

@@ -519,7 +519,9 @@ function handlePointerMove(event) {
 
   // Edge case (see #340)
   // Detect when the pointer has been released outside an iframe on a different domain
-  if (isPointerDown && event.buttons === 0) {
+  if (isPointerDown &&
+  // Skip this check for "pointerleave" events, else Firefox triggers a false positive (see #514)
+  event.type !== "pointerleave" && event.buttons === 0) {
     isPointerDown = false;
     updateResizeHandlerStates("up", event);
   }
@@ -951,7 +953,7 @@ function adjustLayoutByDelta({
       if (!fuzzyNumbersEqual(prevSize, safeSize)) {
         deltaApplied += prevSize - safeSize;
         nextLayout[index] = safeSize;
-        if (deltaApplied.toPrecision(3).localeCompare(Math.abs(delta).toPrecision(3), undefined, {
+        if (deltaApplied.toFixed(3).localeCompare(Math.abs(delta).toFixed(3), undefined, {
           numeric: true
         }) >= 0) {
           break;
@@ -1439,12 +1441,12 @@ function computePanelFlexBoxStyle({
   if (size == null) {
     // Initial render (before panels have registered themselves)
     // In order to support server rendering, fall back to default size if provided
-    flexGrow = defaultSize != undefined ? defaultSize.toPrecision(precision) : "1";
+    flexGrow = defaultSize != undefined ? defaultSize.toFixed(precision) : "1";
   } else if (panelData.length === 1) {
     // Special case: Single panel group should always fill full width/height
     flexGrow = "1";
   } else {
-    flexGrow = size.toPrecision(precision);
+    flexGrow = size.toFixed(precision);
   }
   return {
     flexBasis: 0,

package/dist/react-resizable-panels.development.edge-light.js

@@ -495,7 +495,9 @@ function handlePointerMove(event) {
 
   // Edge case (see #340)
   // Detect when the pointer has been released outside an iframe on a different domain
-  if (isPointerDown && event.buttons === 0) {
+  if (isPointerDown &&
+  // Skip this check for "pointerleave" events, else Firefox triggers a false positive (see #514)
+  event.type !== "pointerleave" && event.buttons === 0) {
     isPointerDown = false;
     updateResizeHandlerStates("up", event);
   }
@@ -927,7 +929,7 @@ function adjustLayoutByDelta({
       if (!fuzzyNumbersEqual(prevSize, safeSize)) {
         deltaApplied += prevSize - safeSize;
         nextLayout[index] = safeSize;
-        if (deltaApplied.toPrecision(3).localeCompare(Math.abs(delta).toPrecision(3), undefined, {
+        if (deltaApplied.toFixed(3).localeCompare(Math.abs(delta).toFixed(3), undefined, {
           numeric: true
         }) >= 0) {
           break;
@@ -1301,12 +1303,12 @@ function computePanelFlexBoxStyle({
   if (size == null) {
     // Initial render (before panels have registered themselves)
     // In order to support server rendering, fall back to default size if provided
-    flexGrow = defaultSize != undefined ? defaultSize.toPrecision(precision) : "1";
+    flexGrow = defaultSize != undefined ? defaultSize.toFixed(precision) : "1";
   } else if (panelData.length === 1) {
     // Special case: Single panel group should always fill full width/height
     flexGrow = "1";
   } else {
-    flexGrow = size.toPrecision(precision);
+    flexGrow = size.toFixed(precision);
   }
   return {
     flexBasis: 0,

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

@@ -532,7 +532,9 @@ function handlePointerMove(event) {
 
   // Edge case (see #340)
   // Detect when the pointer has been released outside an iframe on a different domain
-  if (isPointerDown && event.buttons === 0) {
+  if (isPointerDown &&
+  // Skip this check for "pointerleave" events, else Firefox triggers a false positive (see #514)
+  event.type !== "pointerleave" && event.buttons === 0) {
     isPointerDown = false;
     updateResizeHandlerStates("up", event);
   }
@@ -964,7 +966,7 @@ function adjustLayoutByDelta({
       if (!fuzzyNumbersEqual(prevSize, safeSize)) {
         deltaApplied += prevSize - safeSize;
         nextLayout[index] = safeSize;
-        if (deltaApplied.toPrecision(3).localeCompare(Math.abs(delta).toPrecision(3), undefined, {
+        if (deltaApplied.toFixed(3).localeCompare(Math.abs(delta).toFixed(3), undefined, {
           numeric: true
         }) >= 0) {
           break;
@@ -1462,12 +1464,12 @@ function computePanelFlexBoxStyle({
   if (size == null) {
     // Initial render (before panels have registered themselves)
     // In order to support server rendering, fall back to default size if provided
-    flexGrow = defaultSize != undefined ? defaultSize.toPrecision(precision) : "1";
+    flexGrow = defaultSize != undefined ? defaultSize.toFixed(precision) : "1";
   } else if (panelData.length === 1) {
     // Special case: Single panel group should always fill full width/height
     flexGrow = "1";
   } else {
-    flexGrow = size.toPrecision(precision);
+    flexGrow = size.toFixed(precision);
   }
   return {
     flexBasis: 0,

package/dist/react-resizable-panels.edge-light.js

@@ -484,7 +484,9 @@ function handlePointerMove(event) {
 
   // Edge case (see #340)
   // Detect when the pointer has been released outside an iframe on a different domain
-  if (isPointerDown && event.buttons === 0) {
+  if (isPointerDown &&
+  // Skip this check for "pointerleave" events, else Firefox triggers a false positive (see #514)
+  event.type !== "pointerleave" && event.buttons === 0) {
     isPointerDown = false;
     updateResizeHandlerStates("up", event);
   }
@@ -916,7 +918,7 @@ function adjustLayoutByDelta({
       if (!fuzzyNumbersEqual(prevSize, safeSize)) {
         deltaApplied += prevSize - safeSize;
         nextLayout[index] = safeSize;
-        if (deltaApplied.toPrecision(3).localeCompare(Math.abs(delta).toPrecision(3), undefined, {
+        if (deltaApplied.toFixed(3).localeCompare(Math.abs(delta).toFixed(3), undefined, {
           numeric: true
         }) >= 0) {
           break;
@@ -1290,12 +1292,12 @@ function computePanelFlexBoxStyle({
   if (size == null) {
     // Initial render (before panels have registered themselves)
     // In order to support server rendering, fall back to default size if provided
-    flexGrow = defaultSize != undefined ? defaultSize.toPrecision(precision) : "1";
+    flexGrow = defaultSize != undefined ? defaultSize.toFixed(precision) : "1";
   } else if (panelData.length === 1) {
     // Special case: Single panel group should always fill full width/height
     flexGrow = "1";
   } else {
-    flexGrow = size.toPrecision(precision);
+    flexGrow = size.toFixed(precision);
   }
   return {
     flexBasis: 0,

package/dist/react-resizable-panels.js

@@ -521,7 +521,9 @@ function handlePointerMove(event) {
 
   // Edge case (see #340)
   // Detect when the pointer has been released outside an iframe on a different domain
-  if (isPointerDown && event.buttons === 0) {
+  if (isPointerDown &&
+  // Skip this check for "pointerleave" events, else Firefox triggers a false positive (see #514)
+  event.type !== "pointerleave" && event.buttons === 0) {
     isPointerDown = false;
     updateResizeHandlerStates("up", event);
   }
@@ -953,7 +955,7 @@ function adjustLayoutByDelta({
       if (!fuzzyNumbersEqual(prevSize, safeSize)) {
         deltaApplied += prevSize - safeSize;
         nextLayout[index] = safeSize;
-        if (deltaApplied.toPrecision(3).localeCompare(Math.abs(delta).toPrecision(3), undefined, {
+        if (deltaApplied.toFixed(3).localeCompare(Math.abs(delta).toFixed(3), undefined, {
           numeric: true
         }) >= 0) {
           break;
@@ -1441,12 +1443,12 @@ function computePanelFlexBoxStyle({
   if (size == null) {
     // Initial render (before panels have registered themselves)
     // In order to support server rendering, fall back to default size if provided
-    flexGrow = defaultSize != undefined ? defaultSize.toPrecision(precision) : "1";
+    flexGrow = defaultSize != undefined ? defaultSize.toFixed(precision) : "1";
   } else if (panelData.length === 1) {
     // Special case: Single panel group should always fill full width/height
     flexGrow = "1";
   } else {
-    flexGrow = size.toPrecision(precision);
+    flexGrow = size.toFixed(precision);
   }
   return {
     flexBasis: 0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-resizable-panels",
-  "version": "3.0.4",
+  "version": "3.0.6-alpha.0",
   "type": "module",
   "description": "React components for resizable panel groups/layouts",
   "author": "Brian Vaughn <brian.david.vaughn@gmail.com>",
@@ -51,6 +51,15 @@
     }
   },
   "types": "dist/react-resizable-panels.d.ts",
+  "scripts": {
+    "clear": "pnpm run clear:builds & pnpm run clear:node_modules",
+    "clear:builds": "rm -rf ./packages/*/dist",
+    "clear:node_modules": "rm -rf ./node_modules",
+    "lint": "eslint \"src/**/*.{ts,tsx}\"",
+    "test:browser": "vitest",
+    "test:node": "vitest -c vitest.node.config.ts",
+    "watch": "parcel watch --port=2345"
+  },
   "devDependencies": {
     "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6",
     "@babel/plugin-proposal-optional-chaining": "7.21.0",
@@ -68,14 +77,5 @@
   },
   "browserslist": [
     "Chrome 79"
-  ],
-  "scripts": {
-    "clear": "pnpm run clear:builds & pnpm run clear:node_modules",
-    "clear:builds": "rm -rf ./packages/*/dist",
-    "clear:node_modules": "rm -rf ./node_modules",
-    "lint": "eslint \"src/**/*.{ts,tsx}\"",
-    "test:browser": "vitest",
-    "test:node": "vitest -c vitest.node.config.ts",
-    "watch": "parcel watch --port=2345"
-  }
-}
+  ]
+}

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2023 Brian Vaughn
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.