[pull] main from bvaughn:main

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 4.5.5
+
+- [641](https://github.com/bvaughn/react-resizable-panels/pull/641): Removed `aria-orientation` role from root `Group` element as this was invalid according to the ARIA spec; (for more information see the discussion on issue [#640](https://github.com/bvaughn/react-resizable-panels/issues/640))
+- [642](https://github.com/bvaughn/react-resizable-panels/pull/642): **Bugfix**: Fix collapsible `Panel` regression introduced in 4.5.3
+
 ## 4.5.4
 
 - [638](https://github.com/bvaughn/react-resizable-panels/pull/638): `Panel` avoids unnecessary re-renders in response to mouse-hover state.

lib/components/group/Group.tsx

@@ -314,7 +314,6 @@ export function Group({
     <GroupContext.Provider value={context}>
       <div
         {...rest}
-        aria-orientation={orientation}
         className={className}
         data-group
         data-testid={id}

lib/global/utils/adjustLayoutByDelta.test.ts

@@ -2141,5 +2141,62 @@ describe("adjustLayoutByDelta", () => {
         });
       });
     });
+
+    describe("3-panel layouts", () => {
+      const collapsibleConstraints = {
+        collapsedSize: 5,
+        collapsible: true,
+        minSize: 15
+      };
+
+      test.each([
+        [
+          "expand left when there are multiple panels",
+          {
+            delta: -70,
+            initialLayout: l([25, 50, 25]),
+            panelConstraints: c([{}, {}, collapsibleConstraints]),
+            prevLayout: l([25, 50, 25]),
+            expectedLayout: l([5, 0, 95]),
+            pivotIndices: [1, 2]
+          }
+        ],
+        [
+          "expand right when there are multiple panels",
+          {
+            delta: 70,
+            initialLayout: l([25, 50, 25]),
+            panelConstraints: c([collapsibleConstraints, {}, {}]),
+            prevLayout: l([25, 50, 25]),
+            expectedLayout: l([95, 0, 5]),
+            pivotIndices: [0, 1]
+          }
+        ]
+      ])(
+        "%s",
+        (
+          _,
+          {
+            delta,
+            initialLayout,
+            panelConstraints,
+            prevLayout,
+            pivotIndices,
+            expectedLayout
+          }
+        ) => {
+          expect(
+            adjustLayoutByDelta({
+              delta,
+              initialLayout,
+              panelConstraints,
+              pivotIndices,
+              prevLayout,
+              trigger: "mouse-or-touch"
+            })
+          ).toEqual(expectedLayout);
+        }
+      );
+    });
   });
 });

lib/global/utils/adjustLayoutByDelta.ts

@@ -146,27 +146,47 @@ export function adjustLayoutByDelta({
 
         const { collapsible, collapsedSize, minSize } = panelConstraints;
         if (collapsible) {
-          // DEBUG.push(`  -> collapsible panel`);
-          // DEBUG.push(`  -> halfway point: ${halfwayPoint}`);
+          const isSecondPanel = index === secondPivotIndex;
+
+          // DEBUG.push(`  -> collapsible ${isSecondPanel ? "2nd" : "1st"} panel`);
           if (delta > 0) {
             const gapSize = minSize - collapsedSize;
             const halfwayPoint = gapSize / 2;
+            // DEBUG.push(`  -> halfway point: ${halfwayPoint}`);
+            // DEBUG.push(`    -> between collapsed: ${collapsedSize}`);
+            // DEBUG.push(`    -> and min: ${minSize}`);
 
             if (compareLayoutNumbers(delta, minSize) < 0) {
+              // DEBUG.push(`  -> adjusting delta from: ${delta}`);
               delta =
                 compareLayoutNumbers(delta, halfwayPoint) <= 0 ? 0 : gapSize;
-              // DEBUG.push(`  -> adjusting delta for collapse: ${delta}`);
+              // DEBUG.push(`  -> adjusting delta to: ${delta}`);
             }
           } else {
             const gapSize = minSize - collapsedSize;
             const halfwayPoint = 100 - gapSize / 2;
-
-            if (compareLayoutNumbers(100 + delta, minSize) > 0) {
-              delta =
-                compareLayoutNumbers(100 + delta, halfwayPoint) > 0
-                  ? 0
-                  : -gapSize;
-              // DEBUG.push(`  -> adjusting delta for collapse: ${delta}`);
+            // DEBUG.push(`  -> halfway point: ${halfwayPoint}`);
+            // DEBUG.push(`    -> between collapsed: ${100 - collapsedSize}`);
+            // DEBUG.push(`    -> and min: ${100 - minSize}`);
+
+            if (isSecondPanel) {
+              if (compareLayoutNumbers(Math.abs(delta), minSize) < 0) {
+                // DEBUG.push(`  -> adjusting delta from: ${delta}`);
+                delta =
+                  compareLayoutNumbers(100 + delta, halfwayPoint) > 0
+                    ? 0
+                    : -gapSize;
+                // DEBUG.push(`  -> adjusting delta to: ${delta}`);
+              }
+            } else {
+              if (compareLayoutNumbers(100 + delta, minSize) < 0) {
+                // DEBUG.push(`  -> adjusting delta from: ${delta}`);
+                delta =
+                  compareLayoutNumbers(100 + delta, halfwayPoint) > 0
+                    ? 0
+                    : -gapSize;
+                // DEBUG.push(`  -> adjusting delta to: ${delta}`);
+              }
             }
           }
         }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-resizable-panels",
-  "version": "4.5.4",
+  "version": "4.5.5",
   "type": "module",
   "author": "Brian Vaughn <brian.david.vaughn@gmail.com> (https://github.com/bvaughn/)",
   "contributors": [