From c4242cc6e6e048f7a9903a75d5ddaebd6f013433 Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Wed, 26 Mar 2025 15:29:58 +0100 Subject: [PATCH 01/18] Improve useSidePane logic --- src/components/SidePane/index.tsx | 4 ++-- src/hooks/useSidePane.ts | 29 +++++++++++------------------ 2 files changed, 13 insertions(+), 20 deletions(-) diff --git a/src/components/SidePane/index.tsx b/src/components/SidePane/index.tsx index 73aeab56434f..88a16c61ea9b 100644 --- a/src/components/SidePane/index.tsx +++ b/src/components/SidePane/index.tsx @@ -3,9 +3,9 @@ import useSidePane from '@hooks/useSidePane'; import Help from './HelpModal'; function SidePane() { - const {shouldHideSidePane, isPaneHidden, sidePaneTranslateX, shouldHideSidePaneBackdrop, closeSidePane} = useSidePane(); + const {isSidePaneTransitionEnded, isPaneHidden, sidePaneTranslateX, shouldHideSidePaneBackdrop, closeSidePane} = useSidePane(); - if (shouldHideSidePane) { + if (isSidePaneTransitionEnded) { return null; } diff --git a/src/hooks/useSidePane.ts b/src/hooks/useSidePane.ts index d645f9bd55fa..030dcb08924c 100644 --- a/src/hooks/useSidePane.ts +++ b/src/hooks/useSidePane.ts @@ -14,7 +14,7 @@ import type * as OnyxTypes from '@src/types/onyx'; import useResponsiveLayout from './useResponsiveLayout'; import useWindowDimensions from './useWindowDimensions'; -function isSidePaneHidden(sidePane: OnyxEntry, isExtraLargeScreenWidth: boolean) { +function isSidePaneHiddenNVP(sidePane: OnyxEntry, isExtraLargeScreenWidth: boolean) { if (!isExtraLargeScreenWidth && !sidePane?.openNarrowScreen) { return true; } @@ -28,7 +28,9 @@ function isSidePaneHidden(sidePane: OnyxEntry, isExtraLargeS function useSidePane() { const {isExtraLargeScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout(); const {windowWidth} = useWindowDimensions(); + const sidePaneWidth = shouldUseNarrowLayout ? windowWidth : variables.sideBarWidth; + const [isSidePaneTransitionEnded, setIsSidePaneTransitionEnded] = useState(true); const [sidePaneNVP] = useOnyx(ONYXKEYS.NVP_SIDE_PANE); const [language] = useOnyx(ONYXKEYS.NVP_PREFERRED_LOCALE); const [isModalCenteredVisible = false] = useOnyx(ONYXKEYS.MODAL, { @@ -38,32 +40,23 @@ function useSidePane() { modal?.type === CONST.MODAL.MODAL_TYPE.CENTERED_SMALL, }); const isLanguageUnsupported = language !== CONST.LOCALES.EN; - const isPaneHidden = isSidePaneHidden(sidePaneNVP, isExtraLargeScreenWidth) || isLanguageUnsupported || isModalCenteredVisible; - - const sidePaneWidth = shouldUseNarrowLayout ? windowWidth : variables.sideBarWidth; - const shouldApplySidePaneOffset = isExtraLargeScreenWidth && !isPaneHidden; - - const [shouldHideSidePane, setShouldHideSidePane] = useState(true); - const [isAnimatingExtraLargeScree, setIsAnimatingExtraLargeScreen] = useState(false); - - const shouldHideSidePaneBackdrop = isPaneHidden || isExtraLargeScreenWidth || shouldUseNarrowLayout; - const shouldHideToolTip = isExtraLargeScreenWidth ? isAnimatingExtraLargeScree : !shouldHideSidePane; + const isPaneHidden = isSidePaneHiddenNVP(sidePaneNVP, isExtraLargeScreenWidth) || isLanguageUnsupported || isModalCenteredVisible; // The help button is hidden when: // - side pane nvp is not set // - side pane is displayed currently // - language is unsupported const shouldHideHelpButton = !sidePaneNVP || !isPaneHidden || isLanguageUnsupported; + const shouldHideSidePaneBackdrop = isPaneHidden || isExtraLargeScreenWidth || shouldUseNarrowLayout; + const shouldHideToolTip = isExtraLargeScreenWidth ? !isPaneHidden && isSidePaneTransitionEnded : !isPaneHidden; + const shouldApplySidePaneOffset = isExtraLargeScreenWidth && !isPaneHidden; const sidePaneOffset = useRef(new Animated.Value(shouldApplySidePaneOffset ? variables.sideBarWidth : 0)); const sidePaneTranslateX = useRef(new Animated.Value(isPaneHidden ? sidePaneWidth : 0)); useEffect(() => { if (!isPaneHidden) { - setShouldHideSidePane(false); - } - if (isExtraLargeScreenWidth) { - setIsAnimatingExtraLargeScreen(true); + setIsSidePaneTransitionEnded(false); } Animated.parallel([ @@ -78,8 +71,7 @@ function useSidePane() { useNativeDriver: true, }), ]).start(() => { - setShouldHideSidePane(isPaneHidden); - setIsAnimatingExtraLargeScreen(false); + setIsSidePaneTransitionEnded(isPaneHidden); }); }, [isPaneHidden, shouldApplySidePaneOffset, shouldUseNarrowLayout, sidePaneWidth, isExtraLargeScreenWidth]); @@ -96,6 +88,7 @@ function useSidePane() { }); // Focus the composer after closing the side pane + ReportActionComposeFocusManager.composerRef.current?.blur(); focusComposerWithDelay(ReportActionComposeFocusManager.composerRef.current, CONST.ANIMATED_TRANSITION + CONST.COMPOSER_FOCUS_DELAY)(true); }, [isExtraLargeScreenWidth, sidePaneNVP], @@ -104,7 +97,7 @@ function useSidePane() { return { sidePane: sidePaneNVP, isPaneHidden, - shouldHideSidePane, + isSidePaneTransitionEnded, shouldHideSidePaneBackdrop, shouldHideHelpButton, sidePaneOffset, From 28481ae1b4ca395760470f463c910355c5dd4f65 Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Wed, 26 Mar 2025 15:30:09 +0100 Subject: [PATCH 02/18] Remove focus trap on large screen --- src/components/SidePane/HelpModal/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SidePane/HelpModal/index.tsx b/src/components/SidePane/HelpModal/index.tsx index eb4d6cf0ca2b..5ada2302e17d 100644 --- a/src/components/SidePane/HelpModal/index.tsx +++ b/src/components/SidePane/HelpModal/index.tsx @@ -56,7 +56,7 @@ function Help({sidePaneTranslateX, closeSidePane, shouldHideSidePaneBackdrop}: H return ( - + {!shouldHideSidePaneBackdrop && ( From 6fa8374ad0b66a3dd0b9c2bb6c162577977d2d7c Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Wed, 26 Mar 2025 15:30:13 +0100 Subject: [PATCH 03/18] Auto focus inputs when side pane is closed --- src/hooks/useAutoFocusInput.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/hooks/useAutoFocusInput.ts b/src/hooks/useAutoFocusInput.ts index c8fdafd417b7..02a59ddee90f 100644 --- a/src/hooks/useAutoFocusInput.ts +++ b/src/hooks/useAutoFocusInput.ts @@ -6,6 +6,7 @@ import {InteractionManager} from 'react-native'; import {moveSelectionToEnd, scrollToBottom} from '@libs/InputUtils'; import CONST from '@src/CONST'; import {useSplashScreenStateContext} from '@src/SplashScreenStateContext'; +import useSidePane from './useSidePane'; type UseAutoFocusInput = { inputCallbackRef: (ref: TextInput | null) => void; @@ -53,6 +54,16 @@ export default function useAutoFocusInput(isMultiline = false): UseAutoFocusInpu }, []), ); + // Trigger focus when side pane transition ends + const {isSidePaneTransitionEnded, isPaneHidden} = useSidePane(); + useEffect(() => { + if (!isPaneHidden) { + return; + } + + setIsScreenTransitionEnded(isSidePaneTransitionEnded); + }, [isSidePaneTransitionEnded, isPaneHidden]); + const inputCallbackRef = (ref: TextInput | null) => { inputRef.current = ref; if (isInputInitialized) { From ea330ed0bd61a20835c622b0570ed30de772673f Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Wed, 26 Mar 2025 15:45:27 +0100 Subject: [PATCH 04/18] Remove unnecessary blur on composer --- src/hooks/useSidePane.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/hooks/useSidePane.ts b/src/hooks/useSidePane.ts index 030dcb08924c..dc6aa0e3c9fa 100644 --- a/src/hooks/useSidePane.ts +++ b/src/hooks/useSidePane.ts @@ -88,7 +88,6 @@ function useSidePane() { }); // Focus the composer after closing the side pane - ReportActionComposeFocusManager.composerRef.current?.blur(); focusComposerWithDelay(ReportActionComposeFocusManager.composerRef.current, CONST.ANIMATED_TRANSITION + CONST.COMPOSER_FOCUS_DELAY)(true); }, [isExtraLargeScreenWidth, sidePaneNVP], From bb293cf0ffc3482cfd5a6f86c5a01c8b404f5c33 Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Wed, 26 Mar 2025 18:07:28 +0100 Subject: [PATCH 05/18] Refactor and create useSidePaneDisplayStatus --- src/hooks/useSidePane.ts | 70 +++++++++++++++++++++++----------------- 1 file changed, 40 insertions(+), 30 deletions(-) diff --git a/src/hooks/useSidePane.ts b/src/hooks/useSidePane.ts index dc6aa0e3c9fa..6ccb20b4f533 100644 --- a/src/hooks/useSidePane.ts +++ b/src/hooks/useSidePane.ts @@ -2,7 +2,6 @@ import {useCallback, useEffect, useRef, useState} from 'react'; // Import Animated directly from 'react-native' as animations are used with navigation. // eslint-disable-next-line no-restricted-imports import {Animated} from 'react-native'; -import type {OnyxEntry} from 'react-native-onyx'; import {useOnyx} from 'react-native-onyx'; import {triggerSidePane} from '@libs/actions/SidePane'; import focusComposerWithDelay from '@libs/focusComposerWithDelay'; @@ -10,27 +9,14 @@ import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManag import variables from '@styles/variables'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; -import type * as OnyxTypes from '@src/types/onyx'; import useResponsiveLayout from './useResponsiveLayout'; import useWindowDimensions from './useWindowDimensions'; -function isSidePaneHiddenNVP(sidePane: OnyxEntry, isExtraLargeScreenWidth: boolean) { - if (!isExtraLargeScreenWidth && !sidePane?.openNarrowScreen) { - return true; - } - - return isExtraLargeScreenWidth && !sidePane?.open; -} - /** - * Hook to get the animated position of the side pane and the margin of the navigator + * Hook to get the display status of the side pane */ -function useSidePane() { +function useSidePaneDisplayStatus() { const {isExtraLargeScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout(); - const {windowWidth} = useWindowDimensions(); - const sidePaneWidth = shouldUseNarrowLayout ? windowWidth : variables.sideBarWidth; - - const [isSidePaneTransitionEnded, setIsSidePaneTransitionEnded] = useState(true); const [sidePaneNVP] = useOnyx(ONYXKEYS.NVP_SIDE_PANE); const [language] = useOnyx(ONYXKEYS.NVP_PREFERRED_LOCALE); const [isModalCenteredVisible = false] = useOnyx(ONYXKEYS.MODAL, { @@ -39,23 +25,48 @@ function useSidePane() { modal?.type === CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE || modal?.type === CONST.MODAL.MODAL_TYPE.CENTERED_SMALL, }); + const isLanguageUnsupported = language !== CONST.LOCALES.EN; - const isPaneHidden = isSidePaneHiddenNVP(sidePaneNVP, isExtraLargeScreenWidth) || isLanguageUnsupported || isModalCenteredVisible; + const isSidePaneVisible = isExtraLargeScreenWidth ? sidePaneNVP?.open : sidePaneNVP?.openNarrowScreen; + + // The side pane is completely hidden when: + // - NVP is not set or it is false + // - language is unsupported + const isSidePaneFullyHidden = !isSidePaneVisible || isLanguageUnsupported; + + // The side pane is collapsed when: + // - side pane is completely hidden + // - centered modal is visible + const shouldHideSidePane = isSidePaneFullyHidden || isModalCenteredVisible; // The help button is hidden when: // - side pane nvp is not set // - side pane is displayed currently // - language is unsupported - const shouldHideHelpButton = !sidePaneNVP || !isPaneHidden || isLanguageUnsupported; - const shouldHideSidePaneBackdrop = isPaneHidden || isExtraLargeScreenWidth || shouldUseNarrowLayout; - const shouldHideToolTip = isExtraLargeScreenWidth ? !isPaneHidden && isSidePaneTransitionEnded : !isPaneHidden; + const shouldHideHelpButton = !sidePaneNVP || !isSidePaneFullyHidden || isLanguageUnsupported; + const shouldHideSidePaneBackdrop = isSidePaneFullyHidden || isExtraLargeScreenWidth || shouldUseNarrowLayout; - const shouldApplySidePaneOffset = isExtraLargeScreenWidth && !isPaneHidden; + return {shouldHideSidePane, isSidePaneFullyHidden, shouldHideHelpButton, shouldHideSidePaneBackdrop, sidePaneNVP}; +} + +/** + * Hook to get the animated position of the side pane and the margin of the navigator + */ +function useSidePane() { + const {isExtraLargeScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout(); + const {windowWidth} = useWindowDimensions(); + const sidePaneWidth = shouldUseNarrowLayout ? windowWidth : variables.sideBarWidth; + + const [isSidePaneTransitionEnded, setIsSidePaneTransitionEnded] = useState(true); + const {shouldHideSidePane, shouldHideSidePaneBackdrop, shouldHideHelpButton, sidePaneNVP} = useSidePaneDisplayStatus(); + const shouldHideToolTip = isExtraLargeScreenWidth ? !shouldHideSidePane && isSidePaneTransitionEnded : !shouldHideSidePane; + + const shouldApplySidePaneOffset = isExtraLargeScreenWidth && !shouldHideSidePane; const sidePaneOffset = useRef(new Animated.Value(shouldApplySidePaneOffset ? variables.sideBarWidth : 0)); - const sidePaneTranslateX = useRef(new Animated.Value(isPaneHidden ? sidePaneWidth : 0)); + const sidePaneTranslateX = useRef(new Animated.Value(shouldHideSidePane ? sidePaneWidth : 0)); useEffect(() => { - if (!isPaneHidden) { + if (!shouldHideSidePane) { setIsSidePaneTransitionEnded(false); } @@ -66,14 +77,12 @@ function useSidePane() { useNativeDriver: true, }), Animated.timing(sidePaneTranslateX.current, { - toValue: isPaneHidden ? sidePaneWidth : 0, + toValue: shouldHideSidePane ? sidePaneWidth : 0, duration: CONST.ANIMATED_TRANSITION, useNativeDriver: true, }), - ]).start(() => { - setIsSidePaneTransitionEnded(isPaneHidden); - }); - }, [isPaneHidden, shouldApplySidePaneOffset, shouldUseNarrowLayout, sidePaneWidth, isExtraLargeScreenWidth]); + ]).start(() => setIsSidePaneTransitionEnded(shouldHideSidePane)); + }, [shouldHideSidePane, shouldApplySidePaneOffset, shouldUseNarrowLayout, sidePaneWidth, isExtraLargeScreenWidth]); const closeSidePane = useCallback( (shouldUpdateNarrow = false) => { @@ -95,15 +104,16 @@ function useSidePane() { return { sidePane: sidePaneNVP, - isPaneHidden, isSidePaneTransitionEnded, + shouldHideSidePane, shouldHideSidePaneBackdrop, shouldHideHelpButton, + shouldHideToolTip, sidePaneOffset, sidePaneTranslateX, - shouldHideToolTip, closeSidePane, }; } export default useSidePane; +export {useSidePaneDisplayStatus}; From 3ab8c60c8ac22ec42c024822af4deff7d1418466 Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Wed, 26 Mar 2025 18:08:27 +0100 Subject: [PATCH 06/18] Rename isPaneHidden to shouldHideSidePane --- src/components/SidePane/HelpModal/index.android.tsx | 4 ++-- src/components/SidePane/HelpModal/index.ios.tsx | 4 ++-- src/components/SidePane/HelpModal/types.ts | 2 +- src/components/SidePane/index.tsx | 4 ++-- src/hooks/useAutoFocusInput.ts | 6 +++--- 5 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/SidePane/HelpModal/index.android.tsx b/src/components/SidePane/HelpModal/index.android.tsx index 4d41bebac631..4737bb5d56f6 100644 --- a/src/components/SidePane/HelpModal/index.android.tsx +++ b/src/components/SidePane/HelpModal/index.android.tsx @@ -6,7 +6,7 @@ import HelpContent from '@components/SidePane/HelpComponents/HelpContent'; import CONST from '@src/CONST'; import type HelpProps from './types'; -function Help({isPaneHidden, closeSidePane}: HelpProps) { +function Help({shouldHideSidePane, closeSidePane}: HelpProps) { // SidePane isn't a native screen, this handles the back button press on Android useFocusEffect( useCallback(() => { @@ -23,7 +23,7 @@ function Help({isPaneHidden, closeSidePane}: HelpProps) { return ( closeSidePane()} - isVisible={!isPaneHidden} + isVisible={!shouldHideSidePane} type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED} shouldHandleNavigationBack > diff --git a/src/components/SidePane/HelpModal/index.ios.tsx b/src/components/SidePane/HelpModal/index.ios.tsx index d249bdf316a9..9939cac5fc19 100644 --- a/src/components/SidePane/HelpModal/index.ios.tsx +++ b/src/components/SidePane/HelpModal/index.ios.tsx @@ -4,11 +4,11 @@ import HelpContent from '@components/SidePane/HelpComponents/HelpContent'; import CONST from '@src/CONST'; import type HelpProps from './types'; -function Help({isPaneHidden, closeSidePane}: HelpProps) { +function Help({shouldHideSidePane, closeSidePane}: HelpProps) { return ( closeSidePane()} - isVisible={!isPaneHidden} + isVisible={!shouldHideSidePane} type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED} shouldHandleNavigationBack propagateSwipe diff --git a/src/components/SidePane/HelpModal/types.ts b/src/components/SidePane/HelpModal/types.ts index f54cff0d3d5c..6c7cccdcae6c 100644 --- a/src/components/SidePane/HelpModal/types.ts +++ b/src/components/SidePane/HelpModal/types.ts @@ -3,7 +3,7 @@ import type {MutableRefObject} from 'react'; import type {Animated} from 'react-native'; type HelpProps = { - isPaneHidden: boolean; + shouldHideSidePane: boolean; sidePaneTranslateX: MutableRefObject; shouldHideSidePaneBackdrop: boolean; closeSidePane: (shouldUpdateNarrow?: boolean) => void; diff --git a/src/components/SidePane/index.tsx b/src/components/SidePane/index.tsx index 88a16c61ea9b..b77a7afa3096 100644 --- a/src/components/SidePane/index.tsx +++ b/src/components/SidePane/index.tsx @@ -3,7 +3,7 @@ import useSidePane from '@hooks/useSidePane'; import Help from './HelpModal'; function SidePane() { - const {isSidePaneTransitionEnded, isPaneHidden, sidePaneTranslateX, shouldHideSidePaneBackdrop, closeSidePane} = useSidePane(); + const {isSidePaneTransitionEnded, shouldHideSidePane, sidePaneTranslateX, shouldHideSidePaneBackdrop, closeSidePane} = useSidePane(); if (isSidePaneTransitionEnded) { return null; @@ -11,7 +11,7 @@ function SidePane() { return ( { - if (!isPaneHidden) { + if (!shouldHideSidePane) { return; } setIsScreenTransitionEnded(isSidePaneTransitionEnded); - }, [isSidePaneTransitionEnded, isPaneHidden]); + }, [isSidePaneTransitionEnded, shouldHideSidePane]); const inputCallbackRef = (ref: TextInput | null) => { inputRef.current = ref; From 5fbdeeaa69831033156afc4dc6a95a51b5155afe Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Wed, 26 Mar 2025 18:08:37 +0100 Subject: [PATCH 07/18] Refactor HelpButton to use useSidePaneDisplayStatus --- src/components/SidePane/HelpComponents/HelpButton.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/SidePane/HelpComponents/HelpButton.tsx b/src/components/SidePane/HelpComponents/HelpButton.tsx index 3f45e31b0d77..e5b05ab5ab9b 100644 --- a/src/components/SidePane/HelpComponents/HelpButton.tsx +++ b/src/components/SidePane/HelpComponents/HelpButton.tsx @@ -6,7 +6,7 @@ import {PressableWithoutFeedback} from '@components/Pressable'; import Tooltip from '@components/Tooltip'; import useLocalize from '@hooks/useLocalize'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; -import useSidePane from '@hooks/useSidePane'; +import {useSidePaneDisplayStatus} from '@hooks/useSidePane'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import {triggerSidePane} from '@libs/actions/SidePane'; @@ -21,7 +21,7 @@ function HelpButton({style}: HelpButtonProps) { const theme = useTheme(); const {translate} = useLocalize(); const {isExtraLargeScreenWidth} = useResponsiveLayout(); - const {sidePane, shouldHideHelpButton} = useSidePane(); + const {sidePaneNVP, shouldHideHelpButton} = useSidePaneDisplayStatus(); if (shouldHideHelpButton) { return null; @@ -35,8 +35,8 @@ function HelpButton({style}: HelpButtonProps) { onPress={() => { KeyboardUtils.dismiss(); triggerSidePane({ - isOpen: isExtraLargeScreenWidth ? !sidePane?.open : !sidePane?.openNarrowScreen, - isOpenNarrowScreen: isExtraLargeScreenWidth ? undefined : !sidePane?.openNarrowScreen, + isOpen: isExtraLargeScreenWidth ? !sidePaneNVP?.open : !sidePaneNVP?.openNarrowScreen, + isOpenNarrowScreen: isExtraLargeScreenWidth ? undefined : !sidePaneNVP?.openNarrowScreen, }); }} > From fc71e35ab4954fea1c169f26dd0fcca00f5e34ed Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Wed, 26 Mar 2025 18:08:44 +0100 Subject: [PATCH 08/18] Prevent composer focus when side pane is visible --- .../ComposerWithSuggestions.tsx | 22 ++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx index e5c32117d9a8..7f7fc6cb750c 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx @@ -26,6 +26,7 @@ import useKeyboardState from '@hooks/useKeyboardState'; import useLocalize from '@hooks/useLocalize'; import usePrevious from '@hooks/usePrevious'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; +import {useSidePaneDisplayStatus} from '@hooks/useSidePane'; import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -240,6 +241,7 @@ function ComposerWithSuggestions( const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); const {preferredLocale} = useLocalize(); + const {isSidePaneFullyHidden} = useSidePaneDisplayStatus(); const isFocused = useIsFocused(); const navigation = useNavigation(); const emojisPresentBefore = useRef([]); @@ -565,14 +567,14 @@ function ComposerWithSuggestions( const setUpComposeFocusManager = useCallback( (shouldTakeOverFocus = false) => { ReportActionComposeFocusManager.onComposerFocus((shouldFocusForNonBlurInputOnTapOutside = false) => { - if ((!willBlurTextInputOnTapOutside && !shouldFocusForNonBlurInputOnTapOutside) || !isFocused) { + if ((!willBlurTextInputOnTapOutside && !shouldFocusForNonBlurInputOnTapOutside) || !isFocused || !isSidePaneFullyHidden) { return; } focus(true); }, shouldTakeOverFocus); }, - [focus, isFocused], + [focus, isFocused, isSidePaneFullyHidden], ); /** @@ -592,6 +594,11 @@ function ComposerWithSuggestions( return; } + // Do not focus the composer if the side pane is visible + if (!isSidePaneFullyHidden) { + return; + } + if (!shouldAutoFocusOnKeyPress(e)) { return; } @@ -603,7 +610,7 @@ function ComposerWithSuggestions( focus(); }, - [checkComposerVisibility, focus], + [checkComposerVisibility, focus, isSidePaneFullyHidden], ); const blur = useCallback(() => { @@ -642,7 +649,7 @@ function ComposerWithSuggestions( unsubscribeNavigationBlur(); unsubscribeNavigationFocus(); }; - }, [focusComposerOnKeyPress, navigation, setUpComposeFocusManager]); + }, [focusComposerOnKeyPress, navigation, setUpComposeFocusManager, isSidePaneFullyHidden]); const prevIsModalVisible = usePrevious(modal?.isVisible); const prevIsFocused = usePrevious(isFocused); @@ -660,6 +667,11 @@ function ComposerWithSuggestions( return; } + // Do not focus the composer if the side pane is visible + if (!isSidePaneFullyHidden) { + return; + } + // We want to focus or refocus the input when a modal has been closed or the underlying screen is refocused. // We avoid doing this on native platforms since the software keyboard popping // open creates a jarring and broken UX. @@ -672,7 +684,7 @@ function ComposerWithSuggestions( return; } focus(true); - }, [focus, prevIsFocused, editFocused, prevIsModalVisible, isFocused, modal?.isVisible, isNextModalWillOpenRef, shouldAutoFocus]); + }, [focus, prevIsFocused, editFocused, prevIsModalVisible, isFocused, modal?.isVisible, isNextModalWillOpenRef, shouldAutoFocus, isSidePaneFullyHidden]); useEffect(() => { // Scrolls the composer to the bottom and sets the selection to the end, so that longer drafts are easier to edit From 42b7eaf7f258986ea4ccc4dd47124571c3a1aeb2 Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Wed, 26 Mar 2025 18:11:05 +0100 Subject: [PATCH 09/18] Fix logic --- src/hooks/useSidePane.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/hooks/useSidePane.ts b/src/hooks/useSidePane.ts index 6ccb20b4f533..453e76993b4f 100644 --- a/src/hooks/useSidePane.ts +++ b/src/hooks/useSidePane.ts @@ -43,8 +43,8 @@ function useSidePaneDisplayStatus() { // - side pane nvp is not set // - side pane is displayed currently // - language is unsupported - const shouldHideHelpButton = !sidePaneNVP || !isSidePaneFullyHidden || isLanguageUnsupported; - const shouldHideSidePaneBackdrop = isSidePaneFullyHidden || isExtraLargeScreenWidth || shouldUseNarrowLayout; + const shouldHideHelpButton = !sidePaneNVP || !shouldHideSidePane || isLanguageUnsupported; + const shouldHideSidePaneBackdrop = shouldHideSidePane || isExtraLargeScreenWidth || shouldUseNarrowLayout; return {shouldHideSidePane, isSidePaneFullyHidden, shouldHideHelpButton, shouldHideSidePaneBackdrop, sidePaneNVP}; } From 8a81b7d4b8605da6ef7ecb9833981b61affdde83 Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Wed, 26 Mar 2025 18:24:31 +0100 Subject: [PATCH 10/18] Fix focusing on large screen --- src/hooks/useSidePane.ts | 13 +++++-------- .../ComposerWithSuggestions.tsx | 16 ++++++++-------- 2 files changed, 13 insertions(+), 16 deletions(-) diff --git a/src/hooks/useSidePane.ts b/src/hooks/useSidePane.ts index 453e76993b4f..5ad04dc16d8d 100644 --- a/src/hooks/useSidePane.ts +++ b/src/hooks/useSidePane.ts @@ -29,15 +29,12 @@ function useSidePaneDisplayStatus() { const isLanguageUnsupported = language !== CONST.LOCALES.EN; const isSidePaneVisible = isExtraLargeScreenWidth ? sidePaneNVP?.open : sidePaneNVP?.openNarrowScreen; - // The side pane is completely hidden when: + // The side pane is hidden when: // - NVP is not set or it is false // - language is unsupported - const isSidePaneFullyHidden = !isSidePaneVisible || isLanguageUnsupported; - - // The side pane is collapsed when: - // - side pane is completely hidden - // - centered modal is visible - const shouldHideSidePane = isSidePaneFullyHidden || isModalCenteredVisible; + // - modal centered is visible + const shouldHideSidePane = !isSidePaneVisible || isLanguageUnsupported || isModalCenteredVisible; + const isSidePaneHiddenOrLargeScreen = !isSidePaneVisible || isLanguageUnsupported || isExtraLargeScreenWidth; // The help button is hidden when: // - side pane nvp is not set @@ -46,7 +43,7 @@ function useSidePaneDisplayStatus() { const shouldHideHelpButton = !sidePaneNVP || !shouldHideSidePane || isLanguageUnsupported; const shouldHideSidePaneBackdrop = shouldHideSidePane || isExtraLargeScreenWidth || shouldUseNarrowLayout; - return {shouldHideSidePane, isSidePaneFullyHidden, shouldHideHelpButton, shouldHideSidePaneBackdrop, sidePaneNVP}; + return {shouldHideSidePane, isSidePaneHiddenOrLargeScreen, shouldHideHelpButton, shouldHideSidePaneBackdrop, sidePaneNVP}; } /** diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx index 7f7fc6cb750c..c3a3f9e5ae1e 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx @@ -241,7 +241,7 @@ function ComposerWithSuggestions( const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); const {preferredLocale} = useLocalize(); - const {isSidePaneFullyHidden} = useSidePaneDisplayStatus(); + const {isSidePaneHiddenOrLargeScreen} = useSidePaneDisplayStatus(); const isFocused = useIsFocused(); const navigation = useNavigation(); const emojisPresentBefore = useRef([]); @@ -567,14 +567,14 @@ function ComposerWithSuggestions( const setUpComposeFocusManager = useCallback( (shouldTakeOverFocus = false) => { ReportActionComposeFocusManager.onComposerFocus((shouldFocusForNonBlurInputOnTapOutside = false) => { - if ((!willBlurTextInputOnTapOutside && !shouldFocusForNonBlurInputOnTapOutside) || !isFocused || !isSidePaneFullyHidden) { + if ((!willBlurTextInputOnTapOutside && !shouldFocusForNonBlurInputOnTapOutside) || !isFocused || !isSidePaneHiddenOrLargeScreen) { return; } focus(true); }, shouldTakeOverFocus); }, - [focus, isFocused, isSidePaneFullyHidden], + [focus, isFocused, isSidePaneHiddenOrLargeScreen], ); /** @@ -595,7 +595,7 @@ function ComposerWithSuggestions( } // Do not focus the composer if the side pane is visible - if (!isSidePaneFullyHidden) { + if (!isSidePaneHiddenOrLargeScreen) { return; } @@ -610,7 +610,7 @@ function ComposerWithSuggestions( focus(); }, - [checkComposerVisibility, focus, isSidePaneFullyHidden], + [checkComposerVisibility, focus, isSidePaneHiddenOrLargeScreen], ); const blur = useCallback(() => { @@ -649,7 +649,7 @@ function ComposerWithSuggestions( unsubscribeNavigationBlur(); unsubscribeNavigationFocus(); }; - }, [focusComposerOnKeyPress, navigation, setUpComposeFocusManager, isSidePaneFullyHidden]); + }, [focusComposerOnKeyPress, navigation, setUpComposeFocusManager, isSidePaneHiddenOrLargeScreen]); const prevIsModalVisible = usePrevious(modal?.isVisible); const prevIsFocused = usePrevious(isFocused); @@ -668,7 +668,7 @@ function ComposerWithSuggestions( } // Do not focus the composer if the side pane is visible - if (!isSidePaneFullyHidden) { + if (!isSidePaneHiddenOrLargeScreen) { return; } @@ -684,7 +684,7 @@ function ComposerWithSuggestions( return; } focus(true); - }, [focus, prevIsFocused, editFocused, prevIsModalVisible, isFocused, modal?.isVisible, isNextModalWillOpenRef, shouldAutoFocus, isSidePaneFullyHidden]); + }, [focus, prevIsFocused, editFocused, prevIsModalVisible, isFocused, modal?.isVisible, isNextModalWillOpenRef, shouldAutoFocus, isSidePaneHiddenOrLargeScreen]); useEffect(() => { // Scrolls the composer to the bottom and sets the selection to the end, so that longer drafts are easier to edit From 5378b85360cea29eb45746809e205e097615ad0f Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Wed, 26 Mar 2025 18:35:43 +0100 Subject: [PATCH 11/18] Refactor useThreeDotsAnchorPosition to use updated side pane display status --- src/hooks/useThreeDotsAnchorPosition.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/hooks/useThreeDotsAnchorPosition.ts b/src/hooks/useThreeDotsAnchorPosition.ts index 1201cdbce675..e4e02abffc12 100644 --- a/src/hooks/useThreeDotsAnchorPosition.ts +++ b/src/hooks/useThreeDotsAnchorPosition.ts @@ -1,6 +1,6 @@ import type {AnchorPosition} from '@styles/index'; import variables from '@styles/variables'; -import useSidePane from './useSidePane'; +import {useSidePaneDisplayStatus} from './useSidePane'; import useWindowDimensions from './useWindowDimensions'; /** @@ -9,9 +9,9 @@ import useWindowDimensions from './useWindowDimensions'; */ function useThreeDotsAnchorPosition(anchorPositionStyle: (screenWidth: number) => AnchorPosition) { const {windowWidth} = useWindowDimensions(); - const {isPaneHidden} = useSidePane(); + const {shouldHideSidePane} = useSidePaneDisplayStatus(); - return anchorPositionStyle(isPaneHidden ? windowWidth : windowWidth - variables.sideBarWidth); + return anchorPositionStyle(shouldHideSidePane ? windowWidth : windowWidth - variables.sideBarWidth); } export default useThreeDotsAnchorPosition; From f30d8988f4d345b627ac08e2fa67901268c253ec Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Wed, 26 Mar 2025 18:50:32 +0100 Subject: [PATCH 12/18] Fix 3-dot menu position on attachment view --- src/components/AttachmentModal.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/AttachmentModal.tsx b/src/components/AttachmentModal.tsx index f76ade0db879..a966d9f33a95 100644 --- a/src/components/AttachmentModal.tsx +++ b/src/components/AttachmentModal.tsx @@ -534,6 +534,11 @@ function AttachmentModal({ onCloseButtonPress={closeModal} shouldShowThreeDotsButton={shouldShowThreeDotsButton} threeDotsAnchorPosition={styles.threeDotsPopoverOffsetAttachmentModal(windowWidth)} + threeDotsAnchorAlignment={{ + horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, + vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, + }} + shouldSetModalVisibility={false} threeDotsMenuItems={threeDotsMenuItems} shouldOverlayDots subTitleLink={currentAttachmentLink ?? ''} From d98fec361c757016bb95231590ab7f9b394808ab Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Thu, 27 Mar 2025 15:53:44 +0100 Subject: [PATCH 13/18] Fix isModalCenteredVisible logic --- src/hooks/useSidePane.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/hooks/useSidePane.ts b/src/hooks/useSidePane.ts index 5ad04dc16d8d..cbe155ca6696 100644 --- a/src/hooks/useSidePane.ts +++ b/src/hooks/useSidePane.ts @@ -20,10 +20,12 @@ function useSidePaneDisplayStatus() { const [sidePaneNVP] = useOnyx(ONYXKEYS.NVP_SIDE_PANE); const [language] = useOnyx(ONYXKEYS.NVP_PREFERRED_LOCALE); const [isModalCenteredVisible = false] = useOnyx(ONYXKEYS.MODAL, { - selector: (modal) => + selector: (modal) => ( modal?.type === CONST.MODAL.MODAL_TYPE.CENTERED_SWIPABLE_TO_RIGHT || modal?.type === CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE || - modal?.type === CONST.MODAL.MODAL_TYPE.CENTERED_SMALL, + modal?.type === CONST.MODAL.MODAL_TYPE.CENTERED_SMALL || + modal?.type === CONST.MODAL.MODAL_TYPE.CENTERED + ), }); const isLanguageUnsupported = language !== CONST.LOCALES.EN; From 067252b937e5674c18f24f1154bbbf7bf195f6a1 Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Thu, 27 Mar 2025 17:03:06 +0100 Subject: [PATCH 14/18] Fix prettier --- src/hooks/useSidePane.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/hooks/useSidePane.ts b/src/hooks/useSidePane.ts index cbe155ca6696..2a32add6371e 100644 --- a/src/hooks/useSidePane.ts +++ b/src/hooks/useSidePane.ts @@ -20,12 +20,11 @@ function useSidePaneDisplayStatus() { const [sidePaneNVP] = useOnyx(ONYXKEYS.NVP_SIDE_PANE); const [language] = useOnyx(ONYXKEYS.NVP_PREFERRED_LOCALE); const [isModalCenteredVisible = false] = useOnyx(ONYXKEYS.MODAL, { - selector: (modal) => ( + selector: (modal) => modal?.type === CONST.MODAL.MODAL_TYPE.CENTERED_SWIPABLE_TO_RIGHT || modal?.type === CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE || modal?.type === CONST.MODAL.MODAL_TYPE.CENTERED_SMALL || - modal?.type === CONST.MODAL.MODAL_TYPE.CENTERED - ), + modal?.type === CONST.MODAL.MODAL_TYPE.CENTERED, }); const isLanguageUnsupported = language !== CONST.LOCALES.EN; From 22f7166b0390a2ded5a7b7aaddeadf73db2386d1 Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Fri, 28 Mar 2025 11:39:20 +0100 Subject: [PATCH 15/18] Fix logic for tooltips --- .../SidePane/HelpComponents/HelpButton.tsx | 16 ++-------- src/components/SidePane/index.tsx | 4 +-- src/hooks/useSidePane.ts | 29 +++++++++++++++---- 3 files changed, 29 insertions(+), 20 deletions(-) diff --git a/src/components/SidePane/HelpComponents/HelpButton.tsx b/src/components/SidePane/HelpComponents/HelpButton.tsx index e5b05ab5ab9b..4d1e89f34da3 100644 --- a/src/components/SidePane/HelpComponents/HelpButton.tsx +++ b/src/components/SidePane/HelpComponents/HelpButton.tsx @@ -5,12 +5,9 @@ import * as Expensicons from '@components/Icon/Expensicons'; import {PressableWithoutFeedback} from '@components/Pressable'; import Tooltip from '@components/Tooltip'; import useLocalize from '@hooks/useLocalize'; -import useResponsiveLayout from '@hooks/useResponsiveLayout'; -import {useSidePaneDisplayStatus} from '@hooks/useSidePane'; +import useSidePane from '@hooks/useSidePane'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; -import {triggerSidePane} from '@libs/actions/SidePane'; -import KeyboardUtils from '@src/utils/keyboard'; type HelpButtonProps = { style?: StyleProp; @@ -20,8 +17,7 @@ function HelpButton({style}: HelpButtonProps) { const styles = useThemeStyles(); const theme = useTheme(); const {translate} = useLocalize(); - const {isExtraLargeScreenWidth} = useResponsiveLayout(); - const {sidePaneNVP, shouldHideHelpButton} = useSidePaneDisplayStatus(); + const {openSidePane, shouldHideHelpButton} = useSidePane(); if (shouldHideHelpButton) { return null; @@ -32,13 +28,7 @@ function HelpButton({style}: HelpButtonProps) { { - KeyboardUtils.dismiss(); - triggerSidePane({ - isOpen: isExtraLargeScreenWidth ? !sidePaneNVP?.open : !sidePaneNVP?.openNarrowScreen, - isOpenNarrowScreen: isExtraLargeScreenWidth ? undefined : !sidePaneNVP?.openNarrowScreen, - }); - }} + onPress={openSidePane} > { - if (!shouldHideSidePane) { - setIsSidePaneTransitionEnded(false); - } + setIsSidePaneTransitionEnded(false); Animated.parallel([ Animated.timing(sidePaneOffset.current, { @@ -79,15 +78,34 @@ function useSidePane() { duration: CONST.ANIMATED_TRANSITION, useNativeDriver: true, }), - ]).start(() => setIsSidePaneTransitionEnded(shouldHideSidePane)); + ]).start(() => { + console.log('Side pane animation ended'); + setIsSidePaneTransitionEnded(true); + }); }, [shouldHideSidePane, shouldApplySidePaneOffset, shouldUseNarrowLayout, sidePaneWidth, isExtraLargeScreenWidth]); + const openSidePane = useCallback(() => { + if (!sidePaneNVP) { + return; + } + + console.log('Side pane animation started'); + setIsSidePaneTransitionEnded(false); + KeyboardUtils.dismiss(); + + triggerSidePane({ + isOpen: true, + isOpenNarrowScreen: isExtraLargeScreenWidth ? undefined : true, + }); + }, [isExtraLargeScreenWidth, sidePaneNVP]); + const closeSidePane = useCallback( (shouldUpdateNarrow = false) => { if (!sidePaneNVP) { return; } + setIsSidePaneTransitionEnded(false); const shouldOnlyUpdateNarrowLayout = !isExtraLargeScreenWidth || shouldUpdateNarrow; triggerSidePane({ isOpen: shouldOnlyUpdateNarrowLayout ? undefined : false, @@ -109,6 +127,7 @@ function useSidePane() { shouldHideToolTip, sidePaneOffset, sidePaneTranslateX, + openSidePane, closeSidePane, }; } From 4bccfa2b6c092a3dd237133cb29ffa6c59ce690b Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Fri, 28 Mar 2025 11:44:26 +0100 Subject: [PATCH 16/18] Refactor side pane tooltip visibility, hide it only on animation on wide screen --- src/hooks/useSidePane.ts | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/hooks/useSidePane.ts b/src/hooks/useSidePane.ts index aebe8dbd2ef4..3b15e5a31481 100644 --- a/src/hooks/useSidePane.ts +++ b/src/hooks/useSidePane.ts @@ -58,7 +58,7 @@ function useSidePane() { const [isSidePaneTransitionEnded, setIsSidePaneTransitionEnded] = useState(true); const {shouldHideSidePane, shouldHideSidePaneBackdrop, shouldHideHelpButton, sidePaneNVP} = useSidePaneDisplayStatus(); - const shouldHideToolTip = isExtraLargeScreenWidth ? !shouldHideSidePane && !isSidePaneTransitionEnded : !shouldHideSidePane; + const shouldHideToolTip = isExtraLargeScreenWidth ? !isSidePaneTransitionEnded : !shouldHideSidePane; const shouldApplySidePaneOffset = isExtraLargeScreenWidth && !shouldHideSidePane; const sidePaneOffset = useRef(new Animated.Value(shouldApplySidePaneOffset ? variables.sideBarWidth : 0)); @@ -78,10 +78,7 @@ function useSidePane() { duration: CONST.ANIMATED_TRANSITION, useNativeDriver: true, }), - ]).start(() => { - console.log('Side pane animation ended'); - setIsSidePaneTransitionEnded(true); - }); + ]).start(() => setIsSidePaneTransitionEnded(true)); }, [shouldHideSidePane, shouldApplySidePaneOffset, shouldUseNarrowLayout, sidePaneWidth, isExtraLargeScreenWidth]); const openSidePane = useCallback(() => { @@ -89,7 +86,6 @@ function useSidePane() { return; } - console.log('Side pane animation started'); setIsSidePaneTransitionEnded(false); KeyboardUtils.dismiss(); From db0ce4db8261eaf03b7c25df3fb42baeee686885 Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Fri, 28 Mar 2025 11:47:06 +0100 Subject: [PATCH 17/18] Fix lint --- src/components/SidePane/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SidePane/index.tsx b/src/components/SidePane/index.tsx index 4eb7601eee62..d463de34e1e8 100644 --- a/src/components/SidePane/index.tsx +++ b/src/components/SidePane/index.tsx @@ -3,7 +3,7 @@ import useSidePane from '@hooks/useSidePane'; import Help from './HelpModal'; function SidePane() { - const {isSidePaneTransitionEnded, shouldHideSidePane, shouldHideToolTip, sidePaneTranslateX, shouldHideSidePaneBackdrop, closeSidePane} = useSidePane(); + const {isSidePaneTransitionEnded, shouldHideSidePane, sidePaneTranslateX, shouldHideSidePaneBackdrop, closeSidePane} = useSidePane(); if (isSidePaneTransitionEnded && shouldHideSidePane) { return null; From 6f7aec93739c60799b28191340607543bc59f904 Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Fri, 28 Mar 2025 13:37:49 +0100 Subject: [PATCH 18/18] Remove unnecessary dependencies from side pane animation effect --- src/hooks/useSidePane.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/hooks/useSidePane.ts b/src/hooks/useSidePane.ts index 3b15e5a31481..d0d579086bd6 100644 --- a/src/hooks/useSidePane.ts +++ b/src/hooks/useSidePane.ts @@ -79,7 +79,7 @@ function useSidePane() { useNativeDriver: true, }), ]).start(() => setIsSidePaneTransitionEnded(true)); - }, [shouldHideSidePane, shouldApplySidePaneOffset, shouldUseNarrowLayout, sidePaneWidth, isExtraLargeScreenWidth]); + }, [shouldHideSidePane, shouldApplySidePaneOffset, sidePaneWidth]); const openSidePane = useCallback(() => { if (!sidePaneNVP) {