From cc59a42df65e7018b49979b2137458f53b51897d Mon Sep 17 00:00:00 2001 From: Georgii Lobko Date: Tue, 29 Apr 2025 12:12:05 +0200 Subject: [PATCH 1/8] feat: Drawer header actions --- package.json | 2 +- pages/app-layout/utils/external-widget.tsx | 24 ++++++++++++----- src/app-layout/runtime-drawer/index.tsx | 2 +- src/drawer/implementation.tsx | 16 ++++++++++- src/drawer/interfaces.ts | 5 ++++ src/drawer/styles.scss | 14 +++++++++- src/drawer/use-drawer-context.tsx | 30 +++++++++++++++++++++ src/internal/plugins/controllers/drawers.ts | 19 +++++++++++++ 8 files changed, 101 insertions(+), 11 deletions(-) create mode 100644 src/drawer/use-drawer-context.tsx diff --git a/package.json b/package.json index fa8037096d..ffe7603859 100644 --- a/package.json +++ b/package.json @@ -159,7 +159,7 @@ { "path": "lib/components/internal/plugins/index.js", "brotli": false, - "limit": "14 kB" + "limit": "15 kB" }, { "path": "lib/components/internal/widget-exports.js", diff --git a/pages/app-layout/utils/external-widget.tsx b/pages/app-layout/utils/external-widget.tsx index 0edf5eefbd..9876414643 100644 --- a/pages/app-layout/utils/external-widget.tsx +++ b/pages/app-layout/utils/external-widget.tsx @@ -3,6 +3,7 @@ import React, { useEffect, useImperativeHandle, useRef, useState } from 'react'; import ReactDOM, { unmountComponentAtNode } from 'react-dom'; +import ButtonDropdown from '~components/button-dropdown'; import Drawer from '~components/drawer'; import awsuiPlugins from '~components/internal/plugins'; @@ -153,13 +154,22 @@ awsuiPlugins.appLayout.registerDrawer({ mountContent: (container, mountContext) => { ReactDOM.render( - - global widget content circle 1 - {new Array(100).fill(null).map((_, index) => ( -
{index}
- ))} -
circle-global bottom content
- , + Global drawer} + headerActions={ +
+ +
+ } + > + + global widget content circle 1 + {new Array(100).fill(null).map((_, index) => ( +
{index}
+ ))} +
circle-global bottom content
+ + , container ); }, diff --git a/src/app-layout/runtime-drawer/index.tsx b/src/app-layout/runtime-drawer/index.tsx index 9717dbede0..5217695534 100644 --- a/src/app-layout/runtime-drawer/index.tsx +++ b/src/app-layout/runtime-drawer/index.tsx @@ -55,7 +55,7 @@ function RuntimeDrawerWrapper({ mountContent, unmountContent, id }: RuntimeConte visibilityChangeCallback.current?.(isVisible); }, [isVisible]); - return
; + return
; } const mapRuntimeConfigToDrawer = ( diff --git a/src/drawer/implementation.tsx b/src/drawer/implementation.tsx index 310fcf421f..562e72556a 100644 --- a/src/drawer/implementation.tsx +++ b/src/drawer/implementation.tsx @@ -11,6 +11,7 @@ import { createWidgetizedComponent } from '../internal/widgets'; import InternalLiveRegion from '../live-region/internal'; import InternalStatusIndicator from '../status-indicator/internal'; import { DrawerProps } from './interfaces'; +import { useRuntimeDrawerContext } from './use-drawer-context'; import styles from './styles.css.js'; @@ -23,6 +24,7 @@ export function DrawerImplementation({ i18nStrings, disableContentPaddings, __internalRootRef, + headerActions, ...restProps }: DrawerInternalProps) { const baseProps = getBaseProps(restProps); @@ -32,6 +34,11 @@ export function DrawerImplementation({ ...baseProps, className: clsx(baseProps.className, styles.drawer, isToolbar && styles['with-toolbar']), }; + + const runtimeDrawerContext = useRuntimeDrawerContext({ __internalRootRef }); + // FIXME after releasing drawer focus mode feature + const builtInActionsNumber = (runtimeDrawerContext as any)?.isExpandable ? 2 : 1; + return loading ? (
@@ -42,7 +49,14 @@ export function DrawerImplementation({
) : (
- {header &&
{header}
} + {header && ( +
1 && styles[`with-${builtInActionsNumber}-actions`])} + > + {header} + {headerActions &&
{headerActions}
} +
+ )}
& { border-color: transparent; margin-block-end: 0px; @@ -36,6 +43,11 @@ /* stylelint-enable @cloudscape-design/no-implicit-descendant, selector-max-type */ } +.header-actions { + display: inline-flex; + z-index: 1; +} + .content-with-paddings:not(:empty) { padding-block-start: awsui.$space-panel-content-top; padding-inline-start: awsui.$space-panel-side-left; diff --git a/src/drawer/use-drawer-context.tsx b/src/drawer/use-drawer-context.tsx new file mode 100644 index 0000000000..34edf82152 --- /dev/null +++ b/src/drawer/use-drawer-context.tsx @@ -0,0 +1,30 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import { useEffect, useState } from 'react'; + +import { InternalBaseComponentProps } from '../internal/hooks/use-base-component'; +import { awsuiPluginsInternal } from '../internal/plugins/api'; +import { DrawerConfig } from '../internal/plugins/controllers/drawers'; + +export const useRuntimeDrawerContext = ({ __internalRootRef }: InternalBaseComponentProps) => { + const [drawerContext, setDrawerContext] = useState(null); + + useEffect(() => { + // Determine if the drawer is inside a runtime drawer. + // There’s no other reliable way to check this, since runtime drawers are separate applications rendered into specific DOM nodes. + const drawerId = __internalRootRef?.current?.parentNode?.dataset?.drawerId; + + if (!drawerId) { + return; + } + + const drawers = awsuiPluginsInternal.appLayout.getDrawersState(); + setDrawerContext(drawers?.find(drawer => drawer.id === drawerId) ?? null); + + return awsuiPluginsInternal.appLayout.onDrawersUpdated(drawers => { + setDrawerContext(drawers?.find(drawer => drawer.id === drawerId) ?? null); + }); + }, [__internalRootRef]); + + return drawerContext; +}; diff --git a/src/internal/plugins/controllers/drawers.ts b/src/internal/plugins/controllers/drawers.ts index 424bbaf935..de25663a40 100644 --- a/src/internal/plugins/controllers/drawers.ts +++ b/src/internal/plugins/controllers/drawers.ts @@ -53,6 +53,7 @@ export type UpdateDrawerConfig = { id: DrawerConfig['id'] } & Partial< >; type DrawersRegistrationListener = (drawers: Array) => void; +type DrawersUpdateListener = (drawers: Array) => void; export type DrawersToggledListener = (drawerId: string, params?: OpenCloseDrawerParams) => void; @@ -72,6 +73,8 @@ export interface DrawersApiInternal { onDrawersRegistered(listener: DrawersRegistrationListener): () => void; onDrawerOpened(listener: DrawersToggledListener): () => void; onDrawerClosed(listener: DrawersToggledListener): () => void; + onDrawersUpdated(listener: DrawersUpdateListener): () => void; + getDrawersState(): Array; } export class DrawersController { @@ -79,9 +82,11 @@ export class DrawersController { private drawersRegistrationListener: DrawersRegistrationListener | null = null; private drawerOpenedListener: DrawersToggledListener | null = null; private drawerClosedListener: DrawersToggledListener | null = null; + private drawersUpdateListener: DrawersUpdateListener | null = null; scheduleUpdate = debounce(() => { this.drawersRegistrationListener?.(this.drawers); + this.drawersUpdateListener?.(this.drawers); }, 0); registerDrawer = (config: DrawerConfig) => { @@ -166,6 +171,18 @@ export class DrawersController { this.drawerClosedListener?.(drawerId, params); }; + onDrawersUpdated = (listener: DrawersUpdateListener) => { + this.drawersUpdateListener = listener; + + return () => { + this.drawersUpdateListener = null; + }; + }; + + getDrawersState = () => { + return this.drawers; + }; + installPublic(api: Partial = {}): DrawersApiPublic { api.registerDrawer ??= this.registerDrawer; api.updateDrawer ??= this.updateDrawer; @@ -179,6 +196,8 @@ export class DrawersController { internalApi.onDrawersRegistered ??= this.onDrawersRegistered; internalApi.onDrawerOpened ??= this.onDrawerOpened; internalApi.onDrawerClosed ??= this.onDrawerClosed; + internalApi.onDrawersUpdated ??= this.onDrawersUpdated; + internalApi.getDrawersState ??= this.getDrawersState; return internalApi as DrawersApiInternal; } } From 7104f4bc19c5b0d5d8ed41f51b007f314803cb23 Mon Sep 17 00:00:00 2001 From: Georgii Lobko Date: Wed, 7 May 2025 17:37:30 +0200 Subject: [PATCH 2/8] chore: Increase limit size --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 24a44681d5..0881725b54 100644 --- a/package.json +++ b/package.json @@ -164,7 +164,7 @@ { "path": "lib/components/internal/widget-exports.js", "brotli": false, - "limit": "775 kB", + "limit": "776 kB", "ignore": "react-dom" } ], From f9e949218ecdad4dfb5609ad14fcede51afb3ec9 Mon Sep 17 00:00:00 2001 From: Georgii Lobko Date: Fri, 9 May 2025 09:33:54 +0200 Subject: [PATCH 3/8] chore: Update documenter snapshots --- .../snapshot-tests/__snapshots__/documenter.test.ts.snap | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap index b7c5901b33..d00b859544 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap +++ b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap @@ -8451,6 +8451,11 @@ It should contain the only \`h2\` used in the drawer.", "isDefault": false, "name": "header", }, + { + "description": "Actions for the header. Available only if you specify the \`header\` property.", + "isDefault": false, + "name": "headerActions", + }, ], "releaseStatus": "stable", } From 74e6a1ed51bd643021ebc6d620f148cd32ff8db8 Mon Sep 17 00:00:00 2001 From: Georgii Lobko Date: Fri, 9 May 2025 13:33:03 +0200 Subject: [PATCH 4/8] chore: Refactoring, u tests --- pages/app-layout/utils/external-widget.tsx | 4 +- .../__tests__/runtime-drawers.test.tsx | 47 ++++++++++++++++++- .../use-runtime-drawer-context.tsx} | 15 +++--- src/drawer/__tests__/drawer.test.tsx | 16 +++++++ src/drawer/implementation.tsx | 9 +--- src/drawer/styles.scss | 10 ++-- src/test-utils/dom/drawer/index.ts | 4 ++ 7 files changed, 81 insertions(+), 24 deletions(-) rename src/{drawer/use-drawer-context.tsx => app-layout/runtime-drawer/use-runtime-drawer-context.tsx} (58%) diff --git a/pages/app-layout/utils/external-widget.tsx b/pages/app-layout/utils/external-widget.tsx index 9876414643..b0137f824a 100644 --- a/pages/app-layout/utils/external-widget.tsx +++ b/pages/app-layout/utils/external-widget.tsx @@ -157,9 +157,7 @@ awsuiPlugins.appLayout.registerDrawer({ Global drawer} headerActions={ -
- -
+ } > diff --git a/src/app-layout/__tests__/runtime-drawers.test.tsx b/src/app-layout/__tests__/runtime-drawers.test.tsx index dafb5f2be1..ffbf617621 100644 --- a/src/app-layout/__tests__/runtime-drawers.test.tsx +++ b/src/app-layout/__tests__/runtime-drawers.test.tsx @@ -1,6 +1,7 @@ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. // SPDX-License-Identifier: Apache-2.0 -import React, { useState } from 'react'; +import React, { useRef, useState } from 'react'; +import ReactDOM from 'react-dom'; import { act, fireEvent, render } from '@testing-library/react'; import { Button } from '../../../lib/components'; @@ -9,6 +10,7 @@ import { TOOLS_DRAWER_ID } from '../../../lib/components/app-layout/utils/use-dr import { awsuiPlugins, awsuiPluginsInternal } from '../../../lib/components/internal/plugins/api'; import { DrawerConfig } from '../../../lib/components/internal/plugins/controllers/drawers'; import createWrapper from '../../../lib/components/test-utils/dom'; +import { useRuntimeDrawerContext } from '../runtime-drawer/use-runtime-drawer-context'; import { describeEachAppLayout, findActiveDrawerLandmark, @@ -1440,5 +1442,48 @@ describe('toolbar mode only features', () => { expect(buttonDropdown!.findItemById('global-drawer3')).toBeTruthy(); }); }); + + describe('runtime drawer context hook', () => { + test('passes runtime drawer context via the hook', async () => { + const DrawerContent = () => { + const ref = useRef(null); + const runtimeDrawerContext = useRuntimeDrawerContext({ rootRef: ref }); + return ( +
+ DrawerContent {runtimeDrawerContext?.id} resizable: {runtimeDrawerContext?.resizable ? 'true' : 'false'} +
+ ); + }; + awsuiPlugins.appLayout.registerDrawer({ + id: 'test', + ariaLabels: {}, + trigger: { iconSvg: '' }, + mountContent: container => { + ReactDOM.render(, container); + }, + unmountContent: () => {}, + type: 'global', + }); + const { wrapper, globalDrawersWrapper } = await renderComponent(); + + await delay(); + + wrapper.findDrawerTriggerById('test')!.click(); + expect(globalDrawersWrapper.findDrawerById('test')!.getElement()).toHaveTextContent( + 'DrawerContent test resizable: false' + ); + + awsuiPlugins.appLayout.updateDrawer({ + id: 'test', + resizable: true, + }); + + await delay(); + + expect(globalDrawersWrapper.findDrawerById('test')!.getElement()).toHaveTextContent( + 'DrawerContent test resizable: true' + ); + }); + }); }); }); diff --git a/src/drawer/use-drawer-context.tsx b/src/app-layout/runtime-drawer/use-runtime-drawer-context.tsx similarity index 58% rename from src/drawer/use-drawer-context.tsx rename to src/app-layout/runtime-drawer/use-runtime-drawer-context.tsx index 34edf82152..571264c2dc 100644 --- a/src/drawer/use-drawer-context.tsx +++ b/src/app-layout/runtime-drawer/use-runtime-drawer-context.tsx @@ -1,18 +1,17 @@ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. // SPDX-License-Identifier: Apache-2.0 -import { useEffect, useState } from 'react'; +import { RefObject, useEffect, useState } from 'react'; -import { InternalBaseComponentProps } from '../internal/hooks/use-base-component'; -import { awsuiPluginsInternal } from '../internal/plugins/api'; -import { DrawerConfig } from '../internal/plugins/controllers/drawers'; +import { awsuiPluginsInternal } from '../../internal/plugins/api'; +import { DrawerConfig } from '../../internal/plugins/controllers/drawers'; -export const useRuntimeDrawerContext = ({ __internalRootRef }: InternalBaseComponentProps) => { +export const useRuntimeDrawerContext = ({ rootRef }: { rootRef: RefObject }) => { const [drawerContext, setDrawerContext] = useState(null); useEffect(() => { - // Determine if the drawer is inside a runtime drawer. + // Determine if the hook is inside a runtime drawer. // There’s no other reliable way to check this, since runtime drawers are separate applications rendered into specific DOM nodes. - const drawerId = __internalRootRef?.current?.parentNode?.dataset?.drawerId; + const drawerId = (rootRef?.current?.parentNode as HTMLElement)?.dataset?.drawerId; if (!drawerId) { return; @@ -24,7 +23,7 @@ export const useRuntimeDrawerContext = ({ __internalRootRef }: InternalBaseCompo return awsuiPluginsInternal.appLayout.onDrawersUpdated(drawers => { setDrawerContext(drawers?.find(drawer => drawer.id === drawerId) ?? null); }); - }, [__internalRootRef]); + }, [rootRef]); return drawerContext; }; diff --git a/src/drawer/__tests__/drawer.test.tsx b/src/drawer/__tests__/drawer.test.tsx index 26b8241c23..0109d762f6 100644 --- a/src/drawer/__tests__/drawer.test.tsx +++ b/src/drawer/__tests__/drawer.test.tsx @@ -25,6 +25,22 @@ test('renders header if it is provided', () => { expect(wrapper.findContent()!.getElement()).toHaveTextContent('there is a header above'); }); +test('renders header actions if it is provided', () => { + const wrapper = renderDrawer( + Header actions
}> + there is a header above + + ); + expect(wrapper.findHeader()!.getElement()).toHaveTextContent('Bla bla'); + expect(wrapper.findHeaderActions()!.getElement()).toHaveTextContent('Header actions'); + expect(wrapper.findContent()!.getElement()).toHaveTextContent('there is a header above'); +}); + +test('does not render header actions if header is not provided', () => { + const wrapper = renderDrawer(Header actions
}>there is a header above); + expect(wrapper.findHeaderActions()).toBeFalsy(); +}); + test('renders loading state', () => { const { container } = render(); expect(createWrapper(container).findStatusIndicator()!.getElement()).toHaveTextContent('Loading content'); diff --git a/src/drawer/implementation.tsx b/src/drawer/implementation.tsx index d617ea219f..40e710242d 100644 --- a/src/drawer/implementation.tsx +++ b/src/drawer/implementation.tsx @@ -11,7 +11,6 @@ import { createWidgetizedComponent } from '../internal/widgets'; import InternalLiveRegion from '../live-region/internal'; import InternalStatusIndicator from '../status-indicator/internal'; import { DrawerProps } from './interfaces'; -import { useRuntimeDrawerContext } from './use-drawer-context'; import styles from './styles.css.js'; @@ -35,10 +34,6 @@ export function DrawerImplementation({ className: clsx(baseProps.className, styles.drawer, isToolbar && styles['with-toolbar']), }; - const runtimeDrawerContext = useRuntimeDrawerContext({ __internalRootRef }); - // FIXME after releasing drawer focus mode feature - const builtInActionsNumber = (runtimeDrawerContext as any)?.isExpandable ? 2 : 1; - return loading ? (
{header && ( -
1 && styles[`with-${builtInActionsNumber}-actions`])} - > +
{header} {headerActions &&
{headerActions}
}
diff --git a/src/drawer/styles.scss b/src/drawer/styles.scss index b2b71a55e9..a3046aa7ed 100644 --- a/src/drawer/styles.scss +++ b/src/drawer/styles.scss @@ -21,10 +21,6 @@ // padding to make sure the header doesn't overlap with the close icon border-block-end: awsui.$border-divider-section-width solid awsui.$color-border-panel-header; - &.with-2-actions { - padding-inline: awsui.$space-panel-side-left calc(#{awsui.$space-l} * 2 + #{awsui.$space-scaled-xxl}); - } - .with-toolbar > & { border-color: transparent; margin-block-end: 0px; @@ -45,7 +41,13 @@ .header-actions { display: inline-flex; + align-items: start; z-index: 1; + /* + Compensate for the difference between the runtime drawer's and the drawer component's heading + to ensure the header actions are vertically aligned + */ + margin-block-start: -6px; } .content-with-paddings:not(:empty) { diff --git a/src/test-utils/dom/drawer/index.ts b/src/test-utils/dom/drawer/index.ts index 00d4020439..7d6b009750 100644 --- a/src/test-utils/dom/drawer/index.ts +++ b/src/test-utils/dom/drawer/index.ts @@ -11,6 +11,10 @@ export default class DrawerWrapper extends ComponentWrapper { return this.findByClassName(styles.header); } + findHeaderActions(): ElementWrapper | null { + return this.findByClassName(styles['header-actions']); + } + findContent(): ElementWrapper | null { return this.findByClassName(styles['test-utils-drawer-content']); } From fd80b4475d432370cac2bc80a32197bca31b9191 Mon Sep 17 00:00:00 2001 From: Georgii Lobko Date: Fri, 9 May 2025 13:58:11 +0200 Subject: [PATCH 5/8] chore: Update test snapshot --- .../__snapshots__/test-utils-selectors.test.tsx.snap | 1 + 1 file changed, 1 insertion(+) diff --git a/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap b/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap index c47fe6939d..7c52e98da4 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap +++ b/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap @@ -246,6 +246,7 @@ exports[`test-utils selectors 1`] = ` ], "drawer": [ "awsui_drawer_1sxt8", + "awsui_header-actions_1sxt8", "awsui_header_1sxt8", "awsui_test-utils-drawer-content_1sxt8", ], From 9c82c2d7096110b0597bdc1920353db551b70cd6 Mon Sep 17 00:00:00 2001 From: Georgii Lobko Date: Mon, 12 May 2025 11:55:04 +0200 Subject: [PATCH 6/8] chore: Cleaning up --- .../__tests__/runtime-drawers.test.tsx | 47 +------------------ src/app-layout/runtime-drawer/index.tsx | 2 +- .../use-runtime-drawer-context.tsx | 29 ------------ src/internal/plugins/controllers/drawers.ts | 19 -------- 4 files changed, 2 insertions(+), 95 deletions(-) delete mode 100644 src/app-layout/runtime-drawer/use-runtime-drawer-context.tsx diff --git a/src/app-layout/__tests__/runtime-drawers.test.tsx b/src/app-layout/__tests__/runtime-drawers.test.tsx index ffbf617621..dafb5f2be1 100644 --- a/src/app-layout/__tests__/runtime-drawers.test.tsx +++ b/src/app-layout/__tests__/runtime-drawers.test.tsx @@ -1,7 +1,6 @@ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. // SPDX-License-Identifier: Apache-2.0 -import React, { useRef, useState } from 'react'; -import ReactDOM from 'react-dom'; +import React, { useState } from 'react'; import { act, fireEvent, render } from '@testing-library/react'; import { Button } from '../../../lib/components'; @@ -10,7 +9,6 @@ import { TOOLS_DRAWER_ID } from '../../../lib/components/app-layout/utils/use-dr import { awsuiPlugins, awsuiPluginsInternal } from '../../../lib/components/internal/plugins/api'; import { DrawerConfig } from '../../../lib/components/internal/plugins/controllers/drawers'; import createWrapper from '../../../lib/components/test-utils/dom'; -import { useRuntimeDrawerContext } from '../runtime-drawer/use-runtime-drawer-context'; import { describeEachAppLayout, findActiveDrawerLandmark, @@ -1442,48 +1440,5 @@ describe('toolbar mode only features', () => { expect(buttonDropdown!.findItemById('global-drawer3')).toBeTruthy(); }); }); - - describe('runtime drawer context hook', () => { - test('passes runtime drawer context via the hook', async () => { - const DrawerContent = () => { - const ref = useRef(null); - const runtimeDrawerContext = useRuntimeDrawerContext({ rootRef: ref }); - return ( -
- DrawerContent {runtimeDrawerContext?.id} resizable: {runtimeDrawerContext?.resizable ? 'true' : 'false'} -
- ); - }; - awsuiPlugins.appLayout.registerDrawer({ - id: 'test', - ariaLabels: {}, - trigger: { iconSvg: '' }, - mountContent: container => { - ReactDOM.render(, container); - }, - unmountContent: () => {}, - type: 'global', - }); - const { wrapper, globalDrawersWrapper } = await renderComponent(); - - await delay(); - - wrapper.findDrawerTriggerById('test')!.click(); - expect(globalDrawersWrapper.findDrawerById('test')!.getElement()).toHaveTextContent( - 'DrawerContent test resizable: false' - ); - - awsuiPlugins.appLayout.updateDrawer({ - id: 'test', - resizable: true, - }); - - await delay(); - - expect(globalDrawersWrapper.findDrawerById('test')!.getElement()).toHaveTextContent( - 'DrawerContent test resizable: true' - ); - }); - }); }); }); diff --git a/src/app-layout/runtime-drawer/index.tsx b/src/app-layout/runtime-drawer/index.tsx index 5217695534..9717dbede0 100644 --- a/src/app-layout/runtime-drawer/index.tsx +++ b/src/app-layout/runtime-drawer/index.tsx @@ -55,7 +55,7 @@ function RuntimeDrawerWrapper({ mountContent, unmountContent, id }: RuntimeConte visibilityChangeCallback.current?.(isVisible); }, [isVisible]); - return
; + return
; } const mapRuntimeConfigToDrawer = ( diff --git a/src/app-layout/runtime-drawer/use-runtime-drawer-context.tsx b/src/app-layout/runtime-drawer/use-runtime-drawer-context.tsx deleted file mode 100644 index 571264c2dc..0000000000 --- a/src/app-layout/runtime-drawer/use-runtime-drawer-context.tsx +++ /dev/null @@ -1,29 +0,0 @@ -// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. -// SPDX-License-Identifier: Apache-2.0 -import { RefObject, useEffect, useState } from 'react'; - -import { awsuiPluginsInternal } from '../../internal/plugins/api'; -import { DrawerConfig } from '../../internal/plugins/controllers/drawers'; - -export const useRuntimeDrawerContext = ({ rootRef }: { rootRef: RefObject }) => { - const [drawerContext, setDrawerContext] = useState(null); - - useEffect(() => { - // Determine if the hook is inside a runtime drawer. - // There’s no other reliable way to check this, since runtime drawers are separate applications rendered into specific DOM nodes. - const drawerId = (rootRef?.current?.parentNode as HTMLElement)?.dataset?.drawerId; - - if (!drawerId) { - return; - } - - const drawers = awsuiPluginsInternal.appLayout.getDrawersState(); - setDrawerContext(drawers?.find(drawer => drawer.id === drawerId) ?? null); - - return awsuiPluginsInternal.appLayout.onDrawersUpdated(drawers => { - setDrawerContext(drawers?.find(drawer => drawer.id === drawerId) ?? null); - }); - }, [rootRef]); - - return drawerContext; -}; diff --git a/src/internal/plugins/controllers/drawers.ts b/src/internal/plugins/controllers/drawers.ts index 6005b7e4c0..e47b8cfbf7 100644 --- a/src/internal/plugins/controllers/drawers.ts +++ b/src/internal/plugins/controllers/drawers.ts @@ -54,7 +54,6 @@ export type UpdateDrawerConfig = { id: DrawerConfig['id'] } & Partial< >; type DrawersRegistrationListener = (drawers: Array) => void; -type DrawersUpdateListener = (drawers: Array) => void; export type DrawersToggledListener = (drawerId: string, params?: OpenCloseDrawerParams) => void; @@ -74,8 +73,6 @@ export interface DrawersApiInternal { onDrawersRegistered(listener: DrawersRegistrationListener): () => void; onDrawerOpened(listener: DrawersToggledListener): () => void; onDrawerClosed(listener: DrawersToggledListener): () => void; - onDrawersUpdated(listener: DrawersUpdateListener): () => void; - getDrawersState(): Array; } export class DrawersController { @@ -83,11 +80,9 @@ export class DrawersController { private drawersRegistrationListener: DrawersRegistrationListener | null = null; private drawerOpenedListener: DrawersToggledListener | null = null; private drawerClosedListener: DrawersToggledListener | null = null; - private drawersUpdateListener: DrawersUpdateListener | null = null; scheduleUpdate = debounce(() => { this.drawersRegistrationListener?.(this.drawers); - this.drawersUpdateListener?.(this.drawers); }, 0); registerDrawer = (config: DrawerConfig) => { @@ -172,18 +167,6 @@ export class DrawersController { this.drawerClosedListener?.(drawerId, params); }; - onDrawersUpdated = (listener: DrawersUpdateListener) => { - this.drawersUpdateListener = listener; - - return () => { - this.drawersUpdateListener = null; - }; - }; - - getDrawersState = () => { - return this.drawers; - }; - installPublic(api: Partial = {}): DrawersApiPublic { api.registerDrawer ??= this.registerDrawer; api.updateDrawer ??= this.updateDrawer; @@ -197,8 +180,6 @@ export class DrawersController { internalApi.onDrawersRegistered ??= this.onDrawersRegistered; internalApi.onDrawerOpened ??= this.onDrawerOpened; internalApi.onDrawerClosed ??= this.onDrawerClosed; - internalApi.onDrawersUpdated ??= this.onDrawersUpdated; - internalApi.getDrawersState ??= this.getDrawersState; return internalApi as DrawersApiInternal; } } From 14e2f9f36fbf052b70dece743e9b1cd1faa87969 Mon Sep 17 00:00:00 2001 From: Georgii Lobko Date: Tue, 13 May 2025 10:21:40 +0200 Subject: [PATCH 7/8] chore: Header space adjustment --- src/drawer/styles.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/drawer/styles.scss b/src/drawer/styles.scss index a3046aa7ed..572a73558c 100644 --- a/src/drawer/styles.scss +++ b/src/drawer/styles.scss @@ -17,7 +17,7 @@ justify-content: space-between; color: awsui.$color-text-heading-default; padding-block: awsui.$space-panel-header-vertical; - padding-inline: awsui.$space-panel-side-left calc(#{awsui.$space-l} + #{awsui.$space-scaled-xxl}); + padding-inline: awsui.$space-panel-side-left calc(#{awsui.$space-xl} + #{awsui.$space-scaled-xxl}); // padding to make sure the header doesn't overlap with the close icon border-block-end: awsui.$border-divider-section-width solid awsui.$color-border-panel-header; From e5a8eaf7e2d2341c4335bc2fe0a1efcc671f82b8 Mon Sep 17 00:00:00 2001 From: Georgii Lobko Date: Wed, 14 May 2025 17:15:27 +0200 Subject: [PATCH 8/8] Trigger Build