@awsui/components-react
Version:
On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en
46 lines • 2.2 kB
TypeScript
import React from 'react';
import { AppLayoutProps } from '../../interfaces';
import { OnChangeParams } from '../../utils/use-drawers';
import { Focusable, FocusControlMultipleStates } from '../../utils/use-focus-control';
import { AppLayoutInternals } from '../interfaces';
import { SplitPanelToggleProps } from './drawer-triggers';
export { SplitPanelToggleProps };
export interface ToolbarProps {
ariaLabels?: AppLayoutProps.Labels;
hasNavigation?: boolean;
navigationOpen?: boolean;
onNavigationToggle?: (open: boolean) => void;
navigationFocusRef?: React.Ref<Focusable>;
hasBreadcrumbsPortal?: boolean;
hasSplitPanel?: boolean;
splitPanelToggleProps?: SplitPanelToggleProps;
splitPanelFocusRef?: React.Ref<Focusable>;
onSplitPanelToggle?: () => void;
activeDrawerId?: string | null;
drawers?: ReadonlyArray<AppLayoutProps.Drawer>;
drawersFocusRef?: React.Ref<Focusable>;
bottomDrawersFocusRef?: React.Ref<Focusable>;
globalDrawersFocusControl?: FocusControlMultipleStates;
onActiveDrawerChange?: (drawerId: string | null, params: OnChangeParams) => void;
globalDrawers?: ReadonlyArray<AppLayoutProps.Drawer> | undefined;
activeGlobalDrawersIds?: ReadonlyArray<string>;
onActiveGlobalDrawersChange?: ((drawerId: string, params: OnChangeParams) => void) | undefined;
bottomDrawers?: ReadonlyArray<AppLayoutProps.Drawer> | undefined;
activeGlobalBottomDrawerId?: string | null;
onActiveGlobalBottomDrawerChange?: (value: string | null, params: OnChangeParams) => void;
expandedDrawerId?: string | null;
setExpandedDrawerId?: (value: string | null) => void;
aiDrawer?: AppLayoutProps.Drawer;
onActiveAiDrawerChange?: (value: string | null) => void;
activeAiDrawerId?: string | null;
aiDrawerFocusRef?: React.Ref<Focusable>;
}
export interface AppLayoutToolbarImplementationProps {
appLayoutInternals: AppLayoutInternals;
toolbarProps: ToolbarProps;
}
export declare function AppLayoutToolbarImplementation({
appLayoutInternals,
toolbarProps
}: AppLayoutToolbarImplementationProps): JSX.Element;
export declare const AppLayoutToolbar: (Loader?: typeof AppLayoutToolbarImplementation | undefined) => typeof AppLayoutToolbarImplementation;