npm - react-resizable-panels - Versions diffs - 2.0.14 → 2.0.15 - Mend

react-resizable-panels 2.0.14 → 2.0.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,9 @@
 # Changelog
+## 2.0.15
+- Better account for high-precision sizes with `onCollapse` and `onExpand` callbacks (#325)
 ## 2.0.14
 - Better account for high-precision `collapsedSize` values (#325)

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

@@ -1340,10 +1340,10 @@ function callPanelCallbacks(panelsArray, layout, panelIdToLastNotifiedSizeMap) {
         onResize(size, lastNotifiedSize);
       }
       if (collapsible && (onCollapse || onExpand)) {
-        if (onExpand && (lastNotifiedSize == null || lastNotifiedSize === collapsedSize) && size !== collapsedSize) {
+        if (onExpand && (lastNotifiedSize == null || fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && !fuzzyNumbersEqual$1(size, collapsedSize)) {
           onExpand();
         }
-        if (onCollapse && (lastNotifiedSize == null || lastNotifiedSize !== collapsedSize) && size === collapsedSize) {
+        if (onCollapse && (lastNotifiedSize == null || !fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && fuzzyNumbersEqual$1(size, collapsedSize)) {
           onCollapse();
         }
       }

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

@@ -1356,10 +1356,10 @@ function callPanelCallbacks(panelsArray, layout, panelIdToLastNotifiedSizeMap) {
         onResize(size, lastNotifiedSize);
       }
       if (collapsible && (onCollapse || onExpand)) {
-        if (onExpand && (lastNotifiedSize == null || lastNotifiedSize === collapsedSize) && size !== collapsedSize) {
+        if (onExpand && (lastNotifiedSize == null || fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && !fuzzyNumbersEqual$1(size, collapsedSize)) {
           onExpand();
         }
-        if (onCollapse && (lastNotifiedSize == null || lastNotifiedSize !== collapsedSize) && size === collapsedSize) {
+        if (onCollapse && (lastNotifiedSize == null || !fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && fuzzyNumbersEqual$1(size, collapsedSize)) {
           onCollapse();
         }
       }

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

@@ -1332,10 +1332,10 @@ function callPanelCallbacks(panelsArray, layout, panelIdToLastNotifiedSizeMap) {
         onResize(size, lastNotifiedSize);
       }
       if (collapsible && (onCollapse || onExpand)) {
-        if (onExpand && (lastNotifiedSize == null || lastNotifiedSize === collapsedSize) && size !== collapsedSize) {
+        if (onExpand && (lastNotifiedSize == null || fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && !fuzzyNumbersEqual$1(size, collapsedSize)) {
           onExpand();
         }
-        if (onCollapse && (lastNotifiedSize == null || lastNotifiedSize !== collapsedSize) && size === collapsedSize) {
+        if (onCollapse && (lastNotifiedSize == null || !fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && fuzzyNumbersEqual$1(size, collapsedSize)) {
           onCollapse();
         }
       }

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

@@ -1316,10 +1316,10 @@ function callPanelCallbacks(panelsArray, layout, panelIdToLastNotifiedSizeMap) {
         onResize(size, lastNotifiedSize);
       }
       if (collapsible && (onCollapse || onExpand)) {
-        if (onExpand && (lastNotifiedSize == null || lastNotifiedSize === collapsedSize) && size !== collapsedSize) {
+        if (onExpand && (lastNotifiedSize == null || fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && !fuzzyNumbersEqual$1(size, collapsedSize)) {
           onExpand();
         }
-        if (onCollapse && (lastNotifiedSize == null || lastNotifiedSize !== collapsedSize) && size === collapsedSize) {
+        if (onCollapse && (lastNotifiedSize == null || !fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && fuzzyNumbersEqual$1(size, collapsedSize)) {
           onCollapse();
         }
       }

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

@@ -1342,10 +1342,10 @@ function callPanelCallbacks(panelsArray, layout, panelIdToLastNotifiedSizeMap) {
         onResize(size, lastNotifiedSize);
       }
       if (collapsible && (onCollapse || onExpand)) {
-        if (onExpand && (lastNotifiedSize == null || lastNotifiedSize === collapsedSize) && size !== collapsedSize) {
+        if (onExpand && (lastNotifiedSize == null || fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && !fuzzyNumbersEqual$1(size, collapsedSize)) {
           onExpand();
         }
-        if (onCollapse && (lastNotifiedSize == null || lastNotifiedSize !== collapsedSize) && size === collapsedSize) {
+        if (onCollapse && (lastNotifiedSize == null || !fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && fuzzyNumbersEqual$1(size, collapsedSize)) {
           onCollapse();
         }
       }

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

@@ -1363,10 +1363,10 @@ function callPanelCallbacks(panelsArray, layout, panelIdToLastNotifiedSizeMap) {
         onResize(size, lastNotifiedSize);
       }
       if (collapsible && (onCollapse || onExpand)) {
-        if (onExpand && (lastNotifiedSize == null || lastNotifiedSize === collapsedSize) && size !== collapsedSize) {
+        if (onExpand && (lastNotifiedSize == null || fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && !fuzzyNumbersEqual$1(size, collapsedSize)) {
           onExpand();
         }
-        if (onCollapse && (lastNotifiedSize == null || lastNotifiedSize !== collapsedSize) && size === collapsedSize) {
+        if (onCollapse && (lastNotifiedSize == null || !fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && fuzzyNumbersEqual$1(size, collapsedSize)) {
           onCollapse();
         }
       }

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

@@ -1339,10 +1339,10 @@ function callPanelCallbacks(panelsArray, layout, panelIdToLastNotifiedSizeMap) {
         onResize(size, lastNotifiedSize);
       }
       if (collapsible && (onCollapse || onExpand)) {
-        if (onExpand && (lastNotifiedSize == null || lastNotifiedSize === collapsedSize) && size !== collapsedSize) {
+        if (onExpand && (lastNotifiedSize == null || fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && !fuzzyNumbersEqual$1(size, collapsedSize)) {
           onExpand();
         }
-        if (onCollapse && (lastNotifiedSize == null || lastNotifiedSize !== collapsedSize) && size === collapsedSize) {
+        if (onCollapse && (lastNotifiedSize == null || !fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && fuzzyNumbersEqual$1(size, collapsedSize)) {
           onCollapse();
         }
       }

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

@@ -1201,10 +1201,10 @@ function callPanelCallbacks(panelsArray, layout, panelIdToLastNotifiedSizeMap) {
         onResize(size, lastNotifiedSize);
       }
       if (collapsible && (onCollapse || onExpand)) {
-        if (onExpand && (lastNotifiedSize == null || lastNotifiedSize === collapsedSize) && size !== collapsedSize) {
+        if (onExpand && (lastNotifiedSize == null || fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && !fuzzyNumbersEqual$1(size, collapsedSize)) {
           onExpand();
         }
-        if (onCollapse && (lastNotifiedSize == null || lastNotifiedSize !== collapsedSize) && size === collapsedSize) {
+        if (onCollapse && (lastNotifiedSize == null || !fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && fuzzyNumbersEqual$1(size, collapsedSize)) {
           onCollapse();
         }
       }

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

@@ -1177,10 +1177,10 @@ function callPanelCallbacks(panelsArray, layout, panelIdToLastNotifiedSizeMap) {
         onResize(size, lastNotifiedSize);
       }
       if (collapsible && (onCollapse || onExpand)) {
-        if (onExpand && (lastNotifiedSize == null || lastNotifiedSize === collapsedSize) && size !== collapsedSize) {
+        if (onExpand && (lastNotifiedSize == null || fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && !fuzzyNumbersEqual$1(size, collapsedSize)) {
           onExpand();
         }
-        if (onCollapse && (lastNotifiedSize == null || lastNotifiedSize !== collapsedSize) && size === collapsedSize) {
+        if (onCollapse && (lastNotifiedSize == null || !fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && fuzzyNumbersEqual$1(size, collapsedSize)) {
           onCollapse();
         }
       }

package/dist/react-resizable-panels.esm.js CHANGED Viewed

@@ -1318,10 +1318,10 @@ function callPanelCallbacks(panelsArray, layout, panelIdToLastNotifiedSizeMap) {
         onResize(size, lastNotifiedSize);
       }
       if (collapsible && (onCollapse || onExpand)) {
-        if (onExpand && (lastNotifiedSize == null || lastNotifiedSize === collapsedSize) && size !== collapsedSize) {
+        if (onExpand && (lastNotifiedSize == null || fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && !fuzzyNumbersEqual$1(size, collapsedSize)) {
           onExpand();
         }
-        if (onCollapse && (lastNotifiedSize == null || lastNotifiedSize !== collapsedSize) && size === collapsedSize) {
+        if (onCollapse && (lastNotifiedSize == null || !fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && fuzzyNumbersEqual$1(size, collapsedSize)) {
           onCollapse();
         }
       }

package/dist/react-resizable-panels.node.cjs.js CHANGED Viewed

@@ -1190,10 +1190,10 @@ function callPanelCallbacks(panelsArray, layout, panelIdToLastNotifiedSizeMap) {
         onResize(size, lastNotifiedSize);
       }
       if (collapsible && (onCollapse || onExpand)) {
-        if (onExpand && (lastNotifiedSize == null || lastNotifiedSize === collapsedSize) && size !== collapsedSize) {
+        if (onExpand && (lastNotifiedSize == null || fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && !fuzzyNumbersEqual$1(size, collapsedSize)) {
           onExpand();
         }
-        if (onCollapse && (lastNotifiedSize == null || lastNotifiedSize !== collapsedSize) && size === collapsedSize) {
+        if (onCollapse && (lastNotifiedSize == null || !fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && fuzzyNumbersEqual$1(size, collapsedSize)) {
           onCollapse();
         }
       }

package/dist/react-resizable-panels.node.esm.js CHANGED Viewed

@@ -1166,10 +1166,10 @@ function callPanelCallbacks(panelsArray, layout, panelIdToLastNotifiedSizeMap) {
         onResize(size, lastNotifiedSize);
       }
       if (collapsible && (onCollapse || onExpand)) {
-        if (onExpand && (lastNotifiedSize == null || lastNotifiedSize === collapsedSize) && size !== collapsedSize) {
+        if (onExpand && (lastNotifiedSize == null || fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && !fuzzyNumbersEqual$1(size, collapsedSize)) {
           onExpand();
         }
-        if (onCollapse && (lastNotifiedSize == null || lastNotifiedSize !== collapsedSize) && size === collapsedSize) {
+        if (onCollapse && (lastNotifiedSize == null || !fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && fuzzyNumbersEqual$1(size, collapsedSize)) {
           onCollapse();
         }
       }

package/package.json CHANGED Viewed

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

package/src/Panel.test.tsx CHANGED Viewed

@@ -545,6 +545,44 @@ describe("PanelGroup", () => {
         expect(onCollapse).toHaveBeenCalledTimes(1);
       });
+      it("should be called with collapsedSizes that have many decimal places", () => {
+        let onCollapse = jest.fn();
+        let panelRef = createRef<ImperativePanelHandle>();
+        act(() => {
+          root.render(
+            <PanelGroup direction="horizontal">
+              <Panel
+                collapsible
+                onCollapse={onCollapse}
+                collapsedSize={3.8764385221078133}
+                minSize={10}
+                ref={panelRef}
+              />
+              <PanelResizeHandle />
+              <Panel />
+            </PanelGroup>
+          );
+        });
+        expect(onCollapse).not.toHaveBeenCalled();
+        act(() => {
+          panelRef.current?.collapse();
+        });
+        expect(onCollapse).toHaveBeenCalledTimes(1);
+        act(() => {
+          panelRef.current?.expand();
+        });
+        expect(onCollapse).toHaveBeenCalledTimes(1);
+        act(() => {
+          panelRef.current?.collapse();
+        });
+        expect(onCollapse).toHaveBeenCalledTimes(2);
+      });
     });
     describe("onExpand", () => {
@@ -594,6 +632,45 @@ describe("PanelGroup", () => {
         expect(onExpand).toHaveBeenCalledTimes(1);
       });
+      it("should be called with collapsedSizes that have many decimal places", () => {
+        let onExpand = jest.fn();
+        let panelRef = createRef<ImperativePanelHandle>();
+        act(() => {
+          root.render(
+            <PanelGroup direction="horizontal">
+              <Panel
+                collapsible
+                collapsedSize={3.8764385221078133}
+                defaultSize={3.8764385221078133}
+                minSize={10}
+                onExpand={onExpand}
+                ref={panelRef}
+              />
+              <PanelResizeHandle />
+              <Panel />
+            </PanelGroup>
+          );
+        });
+        expect(onExpand).not.toHaveBeenCalled();
+        act(() => {
+          panelRef.current?.resize(25);
+        });
+        expect(onExpand).toHaveBeenCalledTimes(1);
+        act(() => {
+          panelRef.current?.collapse();
+        });
+        expect(onExpand).toHaveBeenCalledTimes(1);
+        act(() => {
+          panelRef.current?.expand();
+        });
+        expect(onExpand).toHaveBeenCalledTimes(2);
+      });
     });
     describe("onResize", () => {
@@ -723,6 +800,33 @@ describe("PanelGroup", () => {
         expect(onResizeRight).not.toHaveBeenCalled();
       });
     });
+    it("should support sizes with many decimal places", () => {
+      let panelRef = createRef<ImperativePanelHandle>();
+      let onResize = jest.fn();
+      act(() => {
+        root.render(
+          <PanelGroup direction="horizontal">
+            <Panel onResize={onResize} ref={panelRef} />
+            <PanelResizeHandle />
+            <Panel />
+          </PanelGroup>
+        );
+      });
+      expect(onResize).toHaveBeenCalledTimes(1);
+      act(() => {
+        panelRef.current?.resize(3.8764385221078133);
+      });
+      expect(onResize).toHaveBeenCalledTimes(2);
+      // An overly-high precision change should be ignored
+      act(() => {
+        panelRef.current?.resize(3.8764385221078132);
+      });
+      expect(onResize).toHaveBeenCalledTimes(2);
+    });
   });
   describe("data attributes", () => {

package/src/utils/callPanelCallbacks.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import { PanelData } from "../Panel";
 import { assert } from "./assert";
+import { fuzzyNumbersEqual } from "./numbers/fuzzyCompareNumbers";
 // Layout should be pre-converted into percentages
 export function callPanelCallbacks(
@@ -27,16 +28,18 @@ export function callPanelCallbacks(
       if (collapsible && (onCollapse || onExpand)) {
         if (
           onExpand &&
-          (lastNotifiedSize == null || lastNotifiedSize === collapsedSize) &&
-          size !== collapsedSize
+          (lastNotifiedSize == null ||
+            fuzzyNumbersEqual(lastNotifiedSize, collapsedSize)) &&
+          !fuzzyNumbersEqual(size, collapsedSize)
         ) {
           onExpand();
         }
         if (
           onCollapse &&
-          (lastNotifiedSize == null || lastNotifiedSize !== collapsedSize) &&
-          size === collapsedSize
+          (lastNotifiedSize == null ||
+            !fuzzyNumbersEqual(lastNotifiedSize, collapsedSize)) &&
+          fuzzyNumbersEqual(size, collapsedSize)
         ) {
           onCollapse();
         }