feat(appbar): squash-rebase onto latest main

Squash all appbar-improvements commits and replay them on top of
latest main to avoid replaying 37 commits individually through
main's unrelated history (notably the v2->v3 Appbar rewrite
mid-branch, which produced large, non-semantic conflicts when
rebased commit-by-commit).

Also adapts the new Appbar/AppbarContent code to the testID
conventions established by #5099 (remove derived test IDs for
internal, implementation-only elements): drops the
`${testID}-title-text`/`${testID}-headline-text`/`${testID}-subtitle-text`
derived test IDs on non-interactive text, updating the corresponding
tests to query by text content instead, and updates the migration
guide's "Test IDs" section accordingly.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Author: Paweł Kata

docs/6.x/docs/guides/migration.md

@@ -10,7 +10,7 @@ React Native Paper 6 uses [Reanimated](https://docs.swmansion.com/react-native-r
 
 The following props now accept animated styles returned from `useAnimatedStyle`. They no longer accept `Animated.Value` or `Animated.AnimatedInterpolation` where these were previously supported:
 
-- `Appbar.Action` and `Appbar.BackAction`: `style`
+- `Appbar`: `style`
 - `Badge`: `style`
 - `Banner`: `style`
 - `Button`: `style`
@@ -73,8 +73,7 @@ You can use the component's color prop where available, or override the correspo
 
 Hardcoded default test IDs have been removed for the components listed below:
 
-- `Appbar.Content`: `appbar-content`
-- `Appbar.Header`: `appbar-header`
+- `Appbar`: `${testID}-root-layer`
 - `BottomNavigation`: `bottom-navigation`
 - `BottomNavigation.Bar`: `bottom-navigation-bar`
 - `Button`: `button`
@@ -111,9 +110,52 @@ Some components now accept explicit `testID` props for their interactable elemen
 
 ### Appbar
 
-The `style` props for `Appbar` and `Appbar.Header` no longer accept `Animated.Value` or `Animated.AnimatedInterpolation`. They only accept static styles.
+The Paper 6.x `Appbar` is a big refatctor, which drops the previously used compound component approach.
 
-The `style.elevation` property is no longer supported. Use the `elevated` prop to control Appbar elevation.
+#### Migrating from the compound API
+
+`Appbar.Header`, `Appbar.Content`, `Appbar.Action`, and `Appbar.BackAction` have been removed. Render one `Appbar` and provide its headline, leading button, and trailing actions as props. The former `mode="medium"` and `mode="large"` values are now `variant="medium-flexible"` and `variant="large-flexible"`; centered content uses `headlineAlignment="center"`.
+
+```tsx
+// Before (v5)
+
+const MyComponent = () => (
+  <Appbar.Header>
+    <Appbar.BackAction onPress={() => {}} />
+    <Appbar.Content title="Inbox" />
+    <Appbar.Action icon="search" onPress={() => {}} />
+    <Appbar.Action icon="dots-vertical" onPress={() => {}} />
+  </Appbar.Header>
+);
+
+// After (v6)
+
+const MyComponent = () => (
+  <Appbar
+    variant="small"
+    headline="Inbox"
+    leadingButton={{ type: 'back', onPress: () => {} }}
+    trailingActions={[
+      {
+        key: 'search',
+        icon: 'magnify',
+        'aria-label': 'Search',
+        onPress: () => {},
+      },
+      {
+        key: 'more',
+        icon: 'dots-vertical',
+        'aria-label': 'More options',
+        onPress: () => {},
+      },
+    ]}
+  />
+);
+```
+
+#### Bottom toolbar support
+
+Material Design 3 drops the bottom bar support contained previously in the `Appbar` scope and moves it to `Toolbars`, hence you can't use the component to construct a bottom bar anymore - for these cases please use the `Toolbar` component.
 
 ### Surface
 

docs/6.x/docs/guides/react-navigation.md

@@ -136,11 +136,7 @@ Now we will implement `CustomNavigationBar` using `AppBar` component:
 import { Appbar } from 'react-native-paper';
 
 export default function CustomNavigationBar() {
-  return (
-    <Appbar.Header>
-      <Appbar.Content title="My awesome app" />
-    </Appbar.Header>
-  );
+  return <Appbar variant="small" headline="My awesome app" />;
 }
 ```
 
@@ -154,11 +150,7 @@ import { getHeaderTitle } from '@react-navigation/elements';
 export default function CustomNavigationBar({ route, options }) {
   const title = getHeaderTitle(options, route.name);
 
-  return (
-    <Appbar.Header>
-      <Appbar.Content title={title} />
-    </Appbar.Header>
-  );
+  return <Appbar variant="small" headline={title} />;
 }
 ```
 
@@ -179,10 +171,13 @@ export default function CustomNavigationBar({
   const title = getHeaderTitle(options, route.name);
 
   return (
-    <Appbar.Header>
-      {back ? <Appbar.BackAction onPress={navigation.goBack} /> : null}
-      <Appbar.Content title={title} />
-    </Appbar.Header>
+    <Appbar
+      variant="small"
+      headline={title}
+      leadingButton={
+        back ? { type: 'back', onPress: navigation.goBack } : undefined
+      }
+    />
   );
 }
 ```
@@ -194,8 +189,8 @@ export default function CustomNavigationBar({
 Another interesting pattern that can be implemented with `react-native-paper` and `react-navigation` is a "menu" button. Thanks to the `Menu` component we can add a nice looking pop-up to our `Appbar`. To implement this feature we need to make a couple of changes in `CustomNavigationBar`:
 
 - Render a `Menu` component
-- Pass `Appbar.Action` to the anchor prop
-- Add a state to control `Menu` visibility
+- Add a trailing action to `Appbar`
+- Store the action coordinates and menu visibility in state
 
 :::note
 To have properly working `Menu` component, remember to wrap your root component with the `PaperProvider`:
@@ -236,21 +231,41 @@ export default function CustomNavigationBar({
   back,
 }) {
   const [visible, setVisible] = React.useState(false);
+  const [menuAnchor, setMenuAnchor] = React.useState({ x: 0, y: 0 });
   const openMenu = () => setVisible(true);
   const closeMenu = () => setVisible(false);
 
   const title = getHeaderTitle(options, route.name);
 
   return (
-    <Appbar.Header>
-      {back ? <Appbar.BackAction onPress={navigation.goBack} /> : null}
-      <Appbar.Content title={title} />
+    <>
+      <Appbar
+        variant="small"
+        headline={title}
+        leadingButton={
+          back ? { type: 'back', onPress: navigation.goBack } : undefined
+        }
+        trailingActions={
+          back
+            ? []
+            : [
+                {
+                  key: 'more',
+                  icon: 'dots-vertical',
+                  'aria-label': 'More options',
+                  onPress: (event) => {
+                    setMenuAnchor({
+                      x: event.nativeEvent.pageX,
+                      y: event.nativeEvent.pageY,
+                    });
+                    openMenu();
+                  },
+                },
+              ]
+        }
+      />
       {!back ? (
-        <Menu
-          visible={visible}
-          onDismiss={closeMenu}
-          anchor={<Appbar.Action icon="dots-vertical" onPress={openMenu} />}
-        >
+        <Menu visible={visible} onDismiss={closeMenu} anchor={menuAnchor}>
           <Menu.Item
             onPress={() => {
               console.log('Option 1 was pressed');
@@ -272,7 +287,7 @@ export default function CustomNavigationBar({
           />
         </Menu>
       ) : null}
-    </Appbar.Header>
+    </>
   );
 }
 ```

docs/6.x/docs/guides/theming-with-react-navigation.md

@@ -249,24 +249,25 @@ Now that the Context is available at every component, all we need to do is impor
 
 ```js
 import React from 'react';
-import { useTheme, Appbar, TouchableRipple, Switch } from 'react-native-paper';
+import { Appbar } from 'react-native-paper';
 import { PreferencesContext } from './PreferencesContext';
 
 const Header = ({ scene }) => {
-  const theme = useTheme();
   const { toggleTheme, isThemeDark } = React.useContext(PreferencesContext);
 
   return (
-    <Appbar.Header
-      theme={{
-        colors: {
-          primary: theme?.colors.surface,
+    <Appbar
+      variant="small"
+      headline={scene.route?.name}
+      trailingActions={[
+        {
+          key: 'theme',
+          icon: isThemeDark ? 'weather-sunny' : 'weather-night',
+          'aria-label': 'Toggle color theme',
+          onPress: toggleTheme,
         },
-      }}
-    >
-      <Appbar.Content title={scene.route?.name} />
-      <Switch color={'red'} value={isThemeDark} onValueChange={toggleTheme} />
-    </Appbar.Header>
+      ]}
+    />
   );
 };
 ```

docs/6.x/docs/guides/theming.mdx

@@ -503,14 +503,14 @@ Now you can use your `FancyButton` component everywhere instead of using `Button
 ## Dark Theme
 
 Since 3.0 we adapt dark theme to follow [Material design guidelines](https://material.io/design/color/dark-theme.html). <br/>
-In contrast to light theme, dark theme by default uses `surface` colour instead of `primary` on large components like `AppBar` or `BottomNavigation`.<br/>
+In contrast to light theme, dark theme by default uses `surface` colour instead of `primary` on large components like `BottomNavigation`.<br/>
 The dark theme adds a white overlay with opacity depending on elevation of surfaces. It uses it for the better accentuation of surface elevation. Using only shadow is highly imperceptible on dark surfaces.
 
 We are aware that users often use dark theme in their own ways and may not want to use the default dark theme features from the guidelines.<br/>
 That's why if you are using dark theme you can switch between two dark theme `mode`s:
 
-- `exact` where everything is like it was before. `Appbar` and `BottomNavigation` will still use primary colour by default.<br/>
-- `adaptive` where we follow [Material design guidelines](https://material.io/design/color/dark-theme.html), the surface will use white overlay with opacity to show elevation, `Appbar` and `BottomNavigation` will use surface colour as a background.
+- `exact` where everything is like it was before. `BottomNavigation` will still use primary colour by default.<br/>
+- `adaptive` where we follow [Material design guidelines](https://material.io/design/color/dark-theme.html), the surface will use white overlay with opacity to show elevation, and `BottomNavigation` will use surface colour as a background.
 
 If you don't use a custom theme, Paper will automatically change between the default theme and the default dark theme, depending on device settings.
 

docs/component-docs.config.ts

@@ -21,6 +21,13 @@ export type Pages = Record<string, Page | Record<string, Page>>;
 type ComponentDocsConfig = {
   sourceRootDir: string;
   pages: Pages;
+  typescriptProps: Record<
+    string,
+    {
+      sourcePath: string;
+      typeName: string;
+    }
+  >;
   customFields: {
     moreExamples: Record<string, Record<string, string>>;
     knownIssues: Record<string, Record<string, string>>;
@@ -32,13 +39,7 @@ type ComponentDocsConfig = {
 
 const pages = {
   ActivityIndicator: 'ActivityIndicator',
-  Appbar: {
-    Appbar: 'Appbar/Appbar',
-    AppbarAction: 'Appbar/AppbarAction',
-    AppbarBackAction: 'Appbar/AppbarBackAction',
-    AppbarContent: 'Appbar/AppbarContent',
-    AppbarHeader: 'Appbar/AppbarHeader',
-  },
+  Appbar: 'Appbar/Appbar',
   Avatar: {
     AvatarIcon: 'Avatar/AvatarIcon',
     AvatarImage: 'Avatar/AvatarImage',
@@ -171,6 +172,19 @@ const pages = {
 const componentDocsConfig: ComponentDocsConfig = {
   sourceRootDir: path.join(__dirname, '..', 'src', 'components'),
   pages,
+  typescriptProps: {
+    'Appbar/Appbar': {
+      sourcePath: path.join(
+        __dirname,
+        '..',
+        'src',
+        'components',
+        'Appbar',
+        'types.ts'
+      ),
+      typeName: 'Props',
+    },
+  },
   customFields: {
     moreExamples: {
       Portal: {

docs/public/screenshots/appbar-v6-large-flexible.png

@@ -1,18 +1,14 @@
 export const screenshots = {
   ActivityIndicator: 'screenshots/activity-indicator.gif',
-  Appbar: 'screenshots/appbar.png',
-  'Appbar.Action': 'screenshots/appbar-action-android.png',
-  'Appbar.BackAction': 'screenshots/appbar-backaction-android.png',
-  'Appbar.Content': 'screenshots/appbar-content.png',
-  'Appbar.Header': {
-    small: 'screenshots/appbar-small.png',
-    medium: 'screenshots/appbar-medium.png',
-    large: 'screenshots/appbar-large.png',
-    'center-aligned': 'screenshots/appbar-center-aligned.png',
-  },
   'Avatar.Icon': 'screenshots/avatar-icon.png',
   'Avatar.Image': 'screenshots/avatar-image.png',
   'Avatar.Text': 'screenshots/avatar-text.png',
+  Appbar: {
+    search: 'screenshots/appbar-v6-search.png',
+    small: 'screenshots/appbar-v6-small.png',
+    'medium flexible': 'screenshots/appbar-v6-medium-flexible.png',
+    'large flexible': 'screenshots/appbar-v6-large-flexible.png',
+  },
   Badge: {
     'with text': 'screenshots/badge-1.png',
     'without text': 'screenshots/badge-2.png',