fixup! ✨ TopAppBarMenu - add custom menu

Storybook/components/TopAppBar/TopAppBar.stories.tsx

@@ -12,6 +12,7 @@ import TopAppBarMenuItem from '../../../src/components/topAppBar/Menu/TopAppBarM
 import type { Title } from 'src/components/topAppBar/TopAppBar';
 import { TopAppBarMenuProvider } from '../../../src/components/topAppBar/Menu/TopAppMenuBarContext';
 import { IconName } from '../../../src/components/icons/IconProps';
+import TopAppBarMenuAction from '../../../src/components/topAppBar/Menu/TopAppBarMenuAction';
 
 const asString = { value: 'menu' };
 const asButton = { value: 'menu', onPress: () => {} };
@@ -109,7 +110,7 @@ export const WithMenuAction = (args) => {
                         );
                     }}
                 >
-                    <TopAppBar.MenuAction />
+                    <TopAppBarMenuAction />
                 </TopAppBarMenuProvider>
             }
         />
@@ -125,7 +126,13 @@ export const WithCloseAction = (args) => {
             size={args.size}
             onBack={args.withBackButton ? args.onBack : undefined}
             title={titleComponent}
-            action={<TopAppBar.CloseAction onPress={args.onMenuItemPress} />}
+            action={
+                <TopAppBar.Action
+                    icon='close'
+                    accessibilityLabel='Close'
+                    onPress={args.onMenuItemPress}
+                />
+            }
         />
     );
 };
@@ -141,7 +148,9 @@ export const WithPrinterSettingsAction = (args) => {
             onBack={args.withBackButton ? args.onBack : undefined}
             title={titleComponent}
             action={
-                <TopAppBar.PrinterSettingsAction
+                <TopAppBar.Action
+                    icon='cog'
+                    accessibilityLabel='Settings'
                     onPress={args.onMenuItemPress}
                 />
             }

src/__tests__/components/TopAppBar.test.tsx

@@ -10,7 +10,8 @@ import {
 import { Text } from 'react-native';
 import TopAppBarMenuItem from '../../components/topAppBar/Menu/TopAppBarMenuItem';
 import { TopAppBarMenuProvider } from '../../components/topAppBar/Menu/TopAppMenuBarContext';
-import { IconName } from 'src/components/icons/IconProps';
+import { IconName } from '../../components/icons/IconProps';
+import TopAppBarMenuAction from '../../components/topAppBar/Menu/TopAppBarMenuAction';
 
 const topBarTitle = 'Menu';
 
@@ -100,7 +101,7 @@ describe('TopAppBar mounting with a menu', () => {
                             );
                         }}
                     >
-                        <TopAppBar.MenuAction />
+                        <TopAppBarMenuAction />
                     </TopAppBarMenuProvider>
                 }
             />,

src/components/topAppBar/Actions/TopAppBarMenuAction.tsx → src/components/topAppBar/Menu/TopAppBarMenuAction.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { useTopBarMenu } from '../Menu/TopAppMenuBarContext';
-import TopAppBarAction from './TopAppBarAction';
+import { useTopBarMenu } from './TopAppMenuBarContext';
+import TopAppBarAction from '../TopAppBarAction';
 
 const TopAppBarMenuAction = () => {
     const { showMenu } = useTopBarMenu();

src/components/topAppBar/Menu/TopAppMenuBarContext.tsx

@@ -1,8 +1,7 @@
-import React, { ComponentProps, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { Menu, Modal, Portal } from 'react-native-paper';
 import { useTheme } from '../../../styles/themes';
-import TopAppBarMenuItem from './TopAppBarMenuItem';
 
 type TopAppBarMenuContextValue =
     | {
@@ -11,11 +10,9 @@ type TopAppBarMenuContextValue =
       }
     | undefined;
 
-type MenuItemId = ComponentProps<typeof TopAppBarMenuItem>['id'];
-
 type MenuItem<ExtendedMenuItem> = ExtendedMenuItem & {
     title: string;
-    id: MenuItemId;
+    id: string;
 };
 
 const TopAppBarMenuContext =

src/components/topAppBar/TopAppBar.tsx

@@ -5,9 +5,7 @@ import { StyleSheet, type ViewStyle } from 'react-native';
 import { Headline } from '../typography/Headline';
 import DeviceInfo from 'react-native-device-info';
 import type { WithTestID } from 'src/shared/type';
-import TopAppBarCloseAction from './Actions/TopAppBarCloseAction';
-import TopAppBarMenuAction from './Actions/TopAppBarMenuAction';
-import TopAppBarPrinterSettingsAction from './Actions/TopAppBarPrinterSettingsAction';
+import TopAppBarAction from './TopAppBarAction';
 
 export interface Title {
     value: ReactNode;
@@ -64,9 +62,7 @@ export function TopAppBar({
         </Appbar.Header>
     );
 }
-TopAppBar.CloseAction = TopAppBarCloseAction;
-TopAppBar.MenuAction = TopAppBarMenuAction;
-TopAppBar.PrinterSettingsAction = TopAppBarPrinterSettingsAction;
+TopAppBar.Action = TopAppBarAction;
 
 function useStyles(
     size: TopAppBarProps['size'],

src/components/topAppBar/Actions/TopAppBarAction.tsx → src/components/topAppBar/TopAppBarAction.tsx

@@ -1,6 +1,6 @@
 import React, { ComponentProps } from 'react';
 import { Appbar } from 'react-native-paper';
-import { Theme, useTheme } from '../../../styles/themes';
+import { Theme, useTheme } from '../../styles/themes';
 import DeviceInfo from 'react-native-device-info';
 import { StyleSheet } from 'react-native';