diff --git a/CHANGELOG.md b/CHANGELOG.md index 4f9c16ade..c7c57ab6c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # Changelog +## 4.5.6 + +- [644](https://github.com/bvaughn/react-resizable-panels/pull/644): Disabled the change to collapsible panel behavior that was originally made in [635](https://github.com/bvaughn/react-resizable-panels/pull/635). + ## 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)) diff --git a/lib/global/utils/adjustLayoutByDelta.test.ts b/lib/global/utils/adjustLayoutByDelta.test.ts index 09fd60b23..79557a3b5 100644 --- a/lib/global/utils/adjustLayoutByDelta.test.ts +++ b/lib/global/utils/adjustLayoutByDelta.test.ts @@ -1999,24 +1999,25 @@ describe("adjustLayoutByDelta", () => { expectedLayout: closed } ], - [ - "open if delta is greater than minimum threshold", - { - initialLayout: closed, - prevLayout: closed, - delta: panelId === "left" ? 6 : -6, - expectedLayout: open - } - ], - [ - "close if delta is less than minimum threshold", - { - initialLayout: closed, - prevLayout: open, - delta: panelId === "left" ? 4 : -4, - expectedLayout: closed - } - ], + // TODO Re-enable if/when this behavior change is re-enabled + // [ + // "open if delta is greater than minimum threshold", + // { + // initialLayout: closed, + // prevLayout: closed, + // delta: panelId === "left" ? 6 : -6, + // expectedLayout: open + // } + // ], + // [ + // "close if delta is less than minimum threshold", + // { + // initialLayout: closed, + // prevLayout: open, + // delta: panelId === "left" ? 4 : -4, + // expectedLayout: closed + // } + // ], [ "remain open if delta is more than minimum threshold", { @@ -2101,24 +2102,25 @@ describe("adjustLayoutByDelta", () => { expectedLayout: closed } ], - [ - "open if delta is greater than minimum threshold", - { - initialLayout: closed, - prevLayout: closed, - delta: panelId === "left" ? 6 : -6, - expectedLayout: open - } - ], - [ - "close if delta is less than minimum threshold", - { - initialLayout: closed, - prevLayout: open, - delta: panelId === "left" ? 4 : -4, - expectedLayout: closed - } - ], + // TODO Re-enable if/when this behavior change is re-enabled + // [ + // "open if delta is greater than minimum threshold", + // { + // initialLayout: closed, + // prevLayout: closed, + // delta: panelId === "left" ? 6 : -6, + // expectedLayout: open + // } + // ], + // [ + // "close if delta is less than minimum threshold", + // { + // initialLayout: closed, + // prevLayout: open, + // delta: panelId === "left" ? 4 : -4, + // expectedLayout: closed + // } + // ], [ "remain open if delta is more than minimum threshold", { diff --git a/lib/global/utils/adjustLayoutByDelta.ts b/lib/global/utils/adjustLayoutByDelta.ts index 878534051..d07e764f3 100644 --- a/lib/global/utils/adjustLayoutByDelta.ts +++ b/lib/global/utils/adjustLayoutByDelta.ts @@ -131,67 +131,69 @@ export function adjustLayoutByDelta({ } break; } - default: { - // If we're starting from a collapsed state, dragging past the halfway point should cause the panel to expand - // This can happen for positive or negative drags, and panels on either side of the separator can be collapsible - // The easiest way to support this is to detect this scenario and pre-adjust the delta before applying the rest of the layout algorithm - // DEBUG.push(`edge case check 3: collapsible panels`); - - const index = delta < 0 ? secondPivotIndex : firstPivotIndex; - const panelConstraints = panelConstraintsArray[index]; - assert( - panelConstraints, - `Panel constraints not found for index ${index}` - ); - - const { collapsible, collapsedSize, minSize } = panelConstraints; - if (collapsible) { - 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 to: ${delta}`); - } - } else { - const gapSize = minSize - collapsedSize; - const halfwayPoint = 100 - gapSize / 2; - // 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}`); - } - } - } - } - break; - } + // TODO Re-enable this once the Firefox behavior has been corrected + // See github.com/bvaughn/react-resizable-panels/discussions/643 + // default: { + // // If we're starting from a collapsed state, dragging past the halfway point should cause the panel to expand + // // This can happen for positive or negative drags, and panels on either side of the separator can be collapsible + // // The easiest way to support this is to detect this scenario and pre-adjust the delta before applying the rest of the layout algorithm + // // DEBUG.push(`edge case check 3: collapsible panels`); + + // const index = delta < 0 ? secondPivotIndex : firstPivotIndex; + // const panelConstraints = panelConstraintsArray[index]; + // assert( + // panelConstraints, + // `Panel constraints not found for index ${index}` + // ); + + // const { collapsible, collapsedSize, minSize } = panelConstraints; + // if (collapsible) { + // 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 to: ${delta}`); + // } + // } else { + // const gapSize = minSize - collapsedSize; + // const halfwayPoint = 100 - gapSize / 2; + // // 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}`); + // } + // } + // } + // } + // break; + // } } // DEBUG.push(""); } diff --git a/package.json b/package.json index c3cfde781..ce4d8cee4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-resizable-panels", - "version": "4.5.5", + "version": "4.5.6", "type": "module", "author": "Brian Vaughn (https://github.com/bvaughn/)", "contributors": [