chore: Refactoring

Author: georgylobko

src/app-layout/runtime-drawer/index.tsx

@@ -149,6 +149,7 @@ export const mapRuntimeConfigToAiDrawer = (
   onToggle?: NonCancelableEventHandler<DrawerStateChangeParams>;
   headerActions?: ReadonlyArray<ButtonGroupProps.Item>;
   exitExpandedModeTrigger?: React.ReactNode;
+  onToggleFocusMode?: NonCancelableEventHandler<{ isExpanded: boolean }>;
 } => {
   const { mountContent, unmountContent, trigger, exitExpandedModeTrigger, ...runtimeDrawer } = runtimeConfig;
 

src/app-layout/visual-refresh-toolbar/state/use-ai-drawer.ts

@@ -1,9 +1,8 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import { useEffect, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 
 import { fireNonCancelableEvent } from '../../../internal/events';
-import { usePrevious } from '../../../internal/hooks/use-previous';
 import { DrawerPayload as RuntimeAiDrawerConfig, WidgetMessage } from '../../../internal/plugins/widget/interfaces';
 import { getLimitedValue } from '../../../split-panel/utils/size-utils';
 import { mapRuntimeConfigToAiDrawer } from '../../runtime-drawer';
@@ -34,18 +33,9 @@ export function useAiDrawer({
   const [size, setSize] = useState<number | null>(null);
   const aiDrawerWasOpenRef = useRef(false);
   aiDrawerWasOpenRef.current = aiDrawerWasOpenRef.current || !!activeAiDrawerId;
-  const prevExpandedDrawerId = usePrevious(expandedDrawerId);
 
   const aiDrawer = runtimeDrawer && mapRuntimeConfigToAiDrawer(runtimeDrawer);
 
-  useEffect(() => {
-    if (prevExpandedDrawerId !== expandedDrawerId && (expandedDrawerId === aiDrawer?.id || expandedDrawerId === null)) {
-      fireNonCancelableEvent(runtimeDrawer?.onToggleFocusMode, {
-        isExpanded: !!expandedDrawerId,
-      });
-    }
-  }, [runtimeDrawer?.onToggleFocusMode, expandedDrawerId, prevExpandedDrawerId, aiDrawer]);
-
   function onActiveAiDrawerResize(size: number) {
     const limitedSize = getLimitedValue(minAiDrawerSize, size, getMaxAiDrawerSize());
     setSize(limitedSize);

src/app-layout/visual-refresh-toolbar/state/use-app-layout.tsx

@@ -71,7 +71,7 @@ export const useAppLayout = (
   const [navigationAnimationDisabled, setNavigationAnimationDisabled] = useState(true);
   const [splitPanelAnimationDisabled, setSplitPanelAnimationDisabled] = useState(true);
   const [isNested, setIsNested] = useState(false);
-  const [expandedDrawerId, setExpandedDrawerId] = useState<string | null>(null);
+  const [expandedDrawerId, setInternalExpandedDrawerId] = useState<string | null>(null);
   const rootRefInternal = useRef<HTMLDivElement>(null);
   // This workaround ensures the ref is defined before checking if the app layout is nested.
   // On initial render, the ref might be undefined because this component loads asynchronously via the widget API.
@@ -90,6 +90,16 @@ export const useAppLayout = (
     fireNonCancelableEvent(onToolsChange, { open });
   };
 
+  const setExpandedDrawerId = (value: string | null) => {
+    setInternalExpandedDrawerId(value);
+
+    if (aiDrawer?.onToggleFocusMode && (value === aiDrawer?.id || value === null)) {
+      fireNonCancelableEvent(aiDrawer.onToggleFocusMode, {
+        isExpanded: !!value,
+      });
+    }
+  };
+
   const onGlobalDrawerFocus = (drawerId: string, open: boolean) => {
     globalDrawersFocusControl.setFocus({ force: true, drawerId, open });
   };