@@ -146,34 +179,30 @@ function AppLayoutGlobalDrawerImplementation({
data-testid={`awsui-app-layout-drawer-content-${activeDrawerId}`}
>
- {!isMobile && activeGlobalDrawer?.isExpandable && (
-
- setExpandedDrawerId(isExpanded ? null : activeDrawerId)}
- variant="icon"
- analyticsAction={isExpanded ? 'expand' : 'collapse'}
- />
-
- )}
-
- onActiveGlobalDrawersChange(activeDrawerId, { initiatedByUserAction: true })}
- ref={refs?.close}
- variant="icon"
- analyticsAction="close"
- />
-
+
{
+ switch (event.detail.id) {
+ case 'close':
+ onActiveGlobalDrawersChange(activeDrawerId, { initiatedByUserAction: true });
+ break;
+ case 'expand':
+ setExpandedDrawerId(isExpanded ? null : activeDrawerId);
+ break;
+ default:
+ activeGlobalDrawer?.onHeaderActionClick?.(event);
+ }
+ }}
+ ariaLabel="Global panel actions"
+ items={drawerActions}
+ __internalRootRef={(root: HTMLElement) => {
+ if (!root) {
+ return;
+ }
+ refs.close = { current: root.querySelector('[data-itemid="close"]') as unknown as Focusable };
+ }}
+ />
{activeGlobalDrawer?.content}
diff --git a/src/app-layout/visual-refresh-toolbar/interfaces.ts b/src/app-layout/visual-refresh-toolbar/interfaces.ts
index 509ba31cfa..968a690e95 100644
--- a/src/app-layout/visual-refresh-toolbar/interfaces.ts
+++ b/src/app-layout/visual-refresh-toolbar/interfaces.ts
@@ -4,7 +4,9 @@
import React from 'react';
import { BreadcrumbGroupProps } from '../../breadcrumb-group/interfaces';
+import { ButtonGroupProps } from '../../button-group/interfaces';
import { SplitPanelSideToggleProps } from '../../internal/context/split-panel-context';
+import { NonCancelableEventHandler } from '../../internal/events';
import { SomeOptional } from '../../internal/types';
import { AppLayoutProps, AppLayoutPropsWithDefaults } from '../interfaces';
import { SplitPanelProviderProps } from '../split-panel';
@@ -22,6 +24,8 @@ export type InternalDrawer = AppLayoutProps.Drawer & {
isExpandable?: boolean;
ariaLabels: AppLayoutProps.Drawer['ariaLabels'] & { expandedModeButton?: string; exitExpandedModeButton?: string };
header?: React.ReactNode;
+ headerActions?: ReadonlyArray;
+ onHeaderActionClick?: NonCancelableEventHandler;
};
// Widgetization notice: structures in this file are shared multiple app layout instances, possibly different minor versions.
diff --git a/src/button-group/icon-button-item.tsx b/src/button-group/icon-button-item.tsx
index 9b7040b5da..4a2861f141 100644
--- a/src/button-group/icon-button-item.tsx
+++ b/src/button-group/icon-button-item.tsx
@@ -10,12 +10,12 @@ import { InternalButton } from '../button/internal.js';
import Tooltip from '../internal/components/tooltip/index.js';
import { CancelableEventHandler, fireCancelableEvent } from '../internal/events/index.js';
import InternalLiveRegion from '../live-region/internal.js';
-import { ButtonGroupProps } from './interfaces.js';
+import { ButtonGroupProps, InternalIconButton } from './interfaces.js';
import testUtilStyles from './test-classes/styles.css.js';
interface IconButtonItemProps {
- item: ButtonGroupProps.IconButton;
+ item: InternalIconButton;
showTooltip: boolean;
showFeedback: boolean;
onTooltipDismiss: () => void;
@@ -55,6 +55,7 @@ const IconButtonItem = forwardRef(
data-testid={item.id}
data-itemid={item.id}
className={clsx(testUtilStyles.item, testUtilStyles['button-group-item'])}
+ analyticsAction={item.analyticsAction}
__title=""
>
{item.text}
diff --git a/src/button-group/interfaces.ts b/src/button-group/interfaces.ts
index 02c327a689..00d434c8eb 100644
--- a/src/button-group/interfaces.ts
+++ b/src/button-group/interfaces.ts
@@ -105,10 +105,22 @@ export interface ButtonGroupProps extends BaseComponentProps {
style?: ButtonGroupProps.Style;
}
+export interface InternalIconButton extends ButtonGroupProps.IconButton {
+ analyticsAction?: string;
+}
+
+export type InternalItemOrGroup = InternalItem | ButtonGroupProps.Group;
+export type InternalItem =
+ | InternalIconButton
+ | ButtonGroupProps.IconToggleButton
+ | ButtonGroupProps.IconFileInput
+ | ButtonGroupProps.MenuDropdown;
+
export interface InternalButtonGroupProps
extends SomeRequired,
InternalBaseComponentProps {
style?: ButtonGroupProps.Style;
+ items: ReadonlyArray;
}
export namespace ButtonGroupProps {
diff --git a/src/internal/plugins/controllers/drawers.ts b/src/internal/plugins/controllers/drawers.ts
index ecc9d3058f..87d4c20473 100644
--- a/src/internal/plugins/controllers/drawers.ts
+++ b/src/internal/plugins/controllers/drawers.ts
@@ -1,5 +1,6 @@
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
+import { ButtonGroupProps } from '../../../button-group/interfaces';
import debounce from '../../debounce';
import { NonCancelableEventHandler } from '../../events';
import { reportRuntimeApiWarning } from '../helpers/metrics';
@@ -40,6 +41,8 @@ export interface DrawerConfig {
unmountContent: (container: HTMLElement) => void;
preserveInactiveContent?: boolean;
onToggle?: NonCancelableEventHandler;
+ headerActions?: ReadonlyArray;
+ onHeaderActionClick?: NonCancelableEventHandler;
}
const updatableProperties = [
diff --git a/src/internal/plugins/widget/interfaces.ts b/src/internal/plugins/widget/interfaces.ts
index 3c3f00fc1b..24a4c870a8 100644
--- a/src/internal/plugins/widget/interfaces.ts
+++ b/src/internal/plugins/widget/interfaces.ts
@@ -1,5 +1,6 @@
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
+import { ButtonGroupProps } from '../../../button-group/interfaces';
import { NonCancelableEventHandler } from '../../events';
interface Message {
@@ -44,6 +45,8 @@ export interface DrawerPayload {
onToggle?: NonCancelableEventHandler;
mountHeader?: (container: HTMLElement) => void;
unmountHeader?: (container: HTMLElement) => void;
+ headerActions?: ReadonlyArray;
+ onHeaderActionClick?: NonCancelableEventHandler;
}
export type RegisterDrawerMessage = Message<'registerLeftDrawer', DrawerPayload>;