From 5d0e8c293574fa04daa6556a926f27b8964031ed Mon Sep 17 00:00:00 2001 From: Daniel Kostro Date: Tue, 11 Jun 2024 18:15:17 +0200 Subject: [PATCH 1/2] fix: prevent PanelStack2 from opening in the wrong direction Fixes: https://github.com/palantir/blueprint/issues/6723 --- packages/core/src/components/panel-stack2/panelStack2.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/core/src/components/panel-stack2/panelStack2.tsx b/packages/core/src/components/panel-stack2/panelStack2.tsx index ac59b25ba7..997eeb84da 100644 --- a/packages/core/src/components/panel-stack2/panelStack2.tsx +++ b/packages/core/src/components/panel-stack2/panelStack2.tsx @@ -97,7 +97,6 @@ export const PanelStack2: PanelStack2Component = >(props stack: propsStack, } = props; const isControlled = propsStack != null; - const [direction, setDirection] = React.useState("push"); const [localStack, setLocalStack] = React.useState(initialPanel !== undefined ? [initialPanel] : []); const stack = React.useMemo( @@ -105,11 +104,9 @@ export const PanelStack2: PanelStack2Component = >(props [localStack, isControlled, propsStack], ); const stackLength = React.useRef(stack.length); + // Adjust the direction in case the stack size has changed, controlled or uncontrolled + const direction = stack.length - stackLength.current < 0 ? "pop" : "push"; React.useEffect(() => { - if (stack.length !== stackLength.current) { - // Adjust the direction in case the stack size has changed, controlled or uncontrolled - setDirection(stack.length - stackLength.current < 0 ? "pop" : "push"); - } stackLength.current = stack.length; }, [stack]); From cbf3061fcbf927cccd723682ac02f4b6cbe84f8c Mon Sep 17 00:00:00 2001 From: Daniel Kostro Date: Tue, 25 Jun 2024 17:06:24 +0200 Subject: [PATCH 2/2] refactor: implement review suggestions --- .../core/src/components/panel-stack2/panelStack2.tsx | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/packages/core/src/components/panel-stack2/panelStack2.tsx b/packages/core/src/components/panel-stack2/panelStack2.tsx index 997eeb84da..8ca7986952 100644 --- a/packages/core/src/components/panel-stack2/panelStack2.tsx +++ b/packages/core/src/components/panel-stack2/panelStack2.tsx @@ -19,6 +19,7 @@ import * as React from "react"; import { CSSTransition, TransitionGroup } from "react-transition-group"; import { Classes, DISPLAYNAME_PREFIX, type Props } from "../../common"; +import { usePrevious } from "../../hooks"; import type { Panel } from "./panelTypes"; import { PanelView2 } from "./panelView2"; @@ -103,12 +104,8 @@ export const PanelStack2: PanelStack2Component = >(props () => (isControlled ? propsStack.slice().reverse() : localStack), [localStack, isControlled, propsStack], ); - const stackLength = React.useRef(stack.length); - // Adjust the direction in case the stack size has changed, controlled or uncontrolled - const direction = stack.length - stackLength.current < 0 ? "pop" : "push"; - React.useEffect(() => { - stackLength.current = stack.length; - }, [stack]); + const prevStackLength = usePrevious(stack.length) ?? stack.length; + const direction = stack.length - prevStackLength < 0 ? "pop" : "push"; const handlePanelOpen = React.useCallback( (panel: T) => {