react-resizable-panels 2.0.12 → 2.0.14

package/src/Panel.test.tsx

@@ -144,6 +144,55 @@ describe("PanelGroup", () => {
         });
         verifyExpandedPanelGroupLayout(mostRecentLayout, [30, 70]);
       });
+
+      it("should report the correct state with collapsedSizes that have many decimal places", () => {
+        act(() => {
+          root.render(
+            <PanelGroup direction="horizontal">
+              <Panel
+                collapsedSize={3.8764385221078133}
+                collapsible
+                defaultSize={50}
+                minSize={15}
+                ref={leftPanelRef}
+              />
+              <PanelResizeHandle />
+              <Panel collapsible defaultSize={50} ref={rightPanelRef} />
+            </PanelGroup>
+          );
+        });
+
+        act(() => {
+          leftPanelRef.current?.collapse();
+        });
+        expect(leftPanelRef.current?.isCollapsed()).toBe(true);
+        expect(leftPanelRef.current?.isExpanded()).toBe(false);
+
+        act(() => {
+          root.render(
+            <PanelGroup direction="horizontal">
+              <Panel
+                collapsedSize={3.8764385221078132}
+                collapsible
+                defaultSize={50}
+                minSize={15}
+                ref={leftPanelRef}
+              />
+              <PanelResizeHandle />
+              <Panel collapsible defaultSize={50} ref={rightPanelRef} />
+            </PanelGroup>
+          );
+        });
+
+        expect(leftPanelRef.current?.isCollapsed()).toBe(true);
+        expect(leftPanelRef.current?.isExpanded()).toBe(false);
+
+        act(() => {
+          leftPanelRef.current?.expand();
+        });
+        expect(leftPanelRef.current?.isCollapsed()).toBe(false);
+        expect(leftPanelRef.current?.isExpanded()).toBe(true);
+      });
     });
 
     describe("resize", () => {

package/src/PanelGroup.ts

@@ -31,6 +31,10 @@ import { getResizeHandleElement } from "./utils/dom/getResizeHandleElement";
 import { isKeyDown, isMouseEvent, isTouchEvent } from "./utils/events";
 import { getResizeEventCursorPosition } from "./utils/events/getResizeEventCursorPosition";
 import { initializeDefaultStorage } from "./utils/initializeDefaultStorage";
+import {
+  fuzzyCompareNumbers,
+  fuzzyNumbersEqual,
+} from "./utils/numbers/fuzzyCompareNumbers";
 import {
   loadPanelGroupState,
   savePanelGroupState,
@@ -341,7 +345,7 @@ function PanelGroupWithForwardedRef({
         `Panel size not found for panel "${panelData.id}"`
       );
 
-      if (panelSize !== collapsedSize) {
+      if (!fuzzyNumbersEqual(panelSize, collapsedSize)) {
         // Store size before collapse;
         // This is the size that gets restored if the expand() API is used.
         panelSizeBeforeCollapseRef.current.set(panelData.id, panelSize);
@@ -393,12 +397,12 @@ function PanelGroupWithForwardedRef({
 
       const {
         collapsedSize = 0,
-        panelSize,
+        panelSize = 0,
         minSize = 0,
         pivotIndices,
       } = panelDataHelper(panelDataArray, panelData, prevLayout);
 
-      if (panelSize === collapsedSize) {
+      if (fuzzyNumbersEqual(panelSize, collapsedSize)) {
         // Restore this panel to the size it was before it was collapsed, if possible.
         const prevPanelSize = panelSizeBeforeCollapseRef.current.get(
           panelData.id
@@ -484,7 +488,12 @@ function PanelGroupWithForwardedRef({
       panelSize,
     } = panelDataHelper(panelDataArray, panelData, layout);
 
-    return collapsible === true && panelSize === collapsedSize;
+    assert(
+      panelSize != null,
+      `Panel size not found for panel "${panelData.id}"`
+    );
+
+    return collapsible === true && fuzzyNumbersEqual(panelSize, collapsedSize);
   }, []);
 
   // External APIs are safe to memoize via committed values ref
@@ -502,7 +511,7 @@ function PanelGroupWithForwardedRef({
       `Panel size not found for panel "${panelData.id}"`
     );
 
-    return !collapsible || panelSize > collapsedSize;
+    return !collapsible || fuzzyCompareNumbers(panelSize, collapsedSize) > 0;
   }, []);
 
   const registerPanel = useCallback((panelData: PanelData) => {
@@ -780,9 +789,9 @@ function PanelGroupWithForwardedRef({
       if (
         prevCollapsible &&
         nextCollapsible &&
-        prevPanelSize === prevCollapsedSize
+        fuzzyNumbersEqual(prevPanelSize, prevCollapsedSize)
       ) {
-        if (prevCollapsedSize !== nextCollapsedSize) {
+        if (!fuzzyNumbersEqual(prevCollapsedSize, nextCollapsedSize)) {
           resizePanel(panelData, nextCollapsedSize);
         } else {
           // Stay collapsed

package/src/utils/numbers/fuzzyCompareNumbers.ts

@@ -5,13 +5,17 @@ export function fuzzyCompareNumbers(
   expected: number,
   fractionDigits: number = PRECISION
 ): number {
-  actual = parseFloat(actual.toFixed(fractionDigits));
-  expected = parseFloat(expected.toFixed(fractionDigits));
-
-  const delta = actual - expected;
-  if (delta === 0) {
+  if (actual.toFixed(fractionDigits) === expected.toFixed(fractionDigits)) {
     return 0;
   } else {
-    return delta > 0 ? 1 : -1;
+    return actual > expected ? 1 : -1;
   }
 }
+
+export function fuzzyNumbersEqual(
+  actual: number,
+  expected: number,
+  fractionDigits: number = PRECISION
+): boolean {
+  return fuzzyCompareNumbers(actual, expected, fractionDigits) === 0;
+}

package/src/vendor/stacking-order.ts

@@ -1,5 +1,6 @@
 // Forked from NPM stacking-order@2.0.0
 // Background at https://github.com/Rich-Harris/stacking-order/issues/3
+// Background at https://github.com/Rich-Harris/stacking-order/issues/6
 
 import { assert } from "..";
 
@@ -61,7 +62,8 @@ const props =
 
 /** @param {HTMLElement} node */
 function is_flex_item(node: HTMLElement) {
-  const display = getComputedStyle(get_parent(node)).display;
+  // @ts-ignore
+  const display = getComputedStyle(get_parent(node) ?? node).display;
   return display === "flex" || display === "inline-flex";
 }
 
@@ -115,11 +117,12 @@ function get_z_index(node: HTMLElement | null) {
 }
 
 /** @param {HTMLElement} node */
-function get_ancestors(node: HTMLElement) {
+function get_ancestors(node: HTMLElement | null) {
   const ancestors = [];
 
   while (node) {
     ancestors.push(node);
+    // @ts-ignore
     node = get_parent(node);
   }
 
@@ -128,6 +131,9 @@ function get_ancestors(node: HTMLElement) {
 
 /** @param {HTMLElement} node */
 function get_parent(node: HTMLElement) {
-  // @ts-ignore
-  return node.parentNode?.host || node.parentNode;
+  const { parentNode } = node;
+  if (parentNode && parentNode instanceof ShadowRoot) {
+    return parentNode.host
+  }
+  return parentNode;
 }