feat: Method onToggleFocusMode for the left drawer

Author: georgylobko

pages/app-layout/utils/external-global-left-panel-widget.tsx

@@ -139,4 +139,8 @@ registerLeftDrawer({
   onHeaderActionClick: ({ detail }) => {
     console.log('onHeaderActionClick: ', detail);
   },
+
+  onToggleFocusMode: ({ detail }) => {
+    console.log('onToggleFocusMode: ', detail);
+  },
 });

src/app-layout/__tests__/runtime-drawers-widgetized.test.tsx

@@ -249,6 +249,31 @@ describeEachAppLayout({ themes: ['refresh-toolbar'] }, ({ size }) => {
     }
   );
 
+  test(`calls onToggleFocusMode handler by entering / exiting focus mode in left runtime drawer)`, () => {
+    const drawerId = 'global-drawer';
+    const onToggleFocusMode = jest.fn();
+    awsuiWidgetPlugins.registerLeftDrawer({
+      ...drawerDefaults,
+      id: drawerId,
+      isExpandable: true,
+      onToggleFocusMode: event => onToggleFocusMode(event.detail),
+    });
+    const renderProps = renderComponent(<AppLayout />);
+    const { globalDrawersWrapper } = renderProps;
+
+    globalDrawersWrapper.findAiDrawerTrigger()!.click();
+    if (size === 'mobile') {
+      expect(globalDrawersWrapper.findExpandedModeButtonByActiveDrawerId(drawerId)).toBeFalsy();
+    } else {
+      createWrapper().findButtonGroup()!.findButtonById('expand')!.click();
+      expect(globalDrawersWrapper.findDrawerById(drawerId)!.isDrawerInExpandedMode()).toBe(true);
+      expect(onToggleFocusMode).toHaveBeenCalledWith({ isExpanded: true });
+      createWrapper().findButtonGroup()!.findButtonById('expand')!.click();
+      expect(globalDrawersWrapper.isLayoutInDrawerExpandedMode()).toBe(false);
+      expect(onToggleFocusMode).toHaveBeenCalledWith({ isExpanded: false });
+    }
+  });
+
   describe('metrics', () => {
     let sendPanoramaMetricSpy: jest.SpyInstance;
     beforeEach(() => {

src/app-layout/visual-refresh-toolbar/interfaces.ts

@@ -27,6 +27,7 @@ export type InternalDrawer = AppLayoutProps.Drawer & {
   headerActions?: ReadonlyArray<ButtonGroupProps.Item>;
   onHeaderActionClick?: NonCancelableEventHandler<ButtonGroupProps.ItemClickDetails>;
   position?: 'side' | 'bottom';
+  onToggleFocusMode?: NonCancelableEventHandler<{ isExpanded: boolean }>;
 };
 
 // Widgetization notice: structures in this file are shared multiple app layout instances, possibly different minor versions.

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

@@ -1,8 +1,9 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import { useRef, useState } from 'react';
+import { useEffect, 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';
@@ -33,6 +34,15 @@ export function useAiDrawer({
   const [size, setSize] = useState<number | null>(null);
   const aiDrawerWasOpenRef = useRef(false);
   aiDrawerWasOpenRef.current = aiDrawerWasOpenRef.current || !!activeAiDrawerId;
+  const prevExpandedDrawerId = usePrevious(expandedDrawerId);
+
+  useEffect(() => {
+    if (prevExpandedDrawerId !== expandedDrawerId) {
+      fireNonCancelableEvent(runtimeDrawer?.onToggleFocusMode, {
+        isExpanded: !!expandedDrawerId,
+      });
+    }
+  }, [runtimeDrawer?.onToggleFocusMode, expandedDrawerId, prevExpandedDrawerId]);
 
   function onActiveAiDrawerResize(size: number) {
     const limitedSize = getLimitedValue(minAiDrawerSize, size, getMaxAiDrawerSize());

src/internal/plugins/widget/interfaces.ts

@@ -50,6 +50,7 @@ export interface DrawerPayload {
   unmountHeader?: (container: HTMLElement) => void;
   headerActions?: ReadonlyArray<ButtonGroupProps.Item>;
   onHeaderActionClick?: NonCancelableEventHandler<ButtonGroupProps.ItemClickDetails>;
+  onToggleFocusMode?: NonCancelableEventHandler<{ isExpanded: boolean }>;
   position?: 'side' | 'bottom';
 }