@planningcenter/chat-react-native 4.5.0-rc.1 → 4.5.0-rc.3

package/build/utils/native_adapters/menu.d.ts

@@ -32,8 +32,7 @@ export interface MenuViewProps {
 }
 export type MenuView = React.ComponentType<MenuViewProps>;
 export declare class MenuAdapter {
-    View: MenuView;
-    isConfigured: boolean;
+    View?: MenuView;
     constructor(methods?: {
         View: MenuView;
     });

package/build/utils/native_adapters/menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../src/utils/native_adapters/menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAA;AACxC,OAAO,EAAE,SAAS,EAAQ,SAAS,EAAE,MAAM,cAAc,CAAA;AASzD,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,KAAK,CAAA;AAE1C,MAAM,WAAW,oBAAoB;IACnC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED,MAAM,WAAW,UAAU;IACzB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,eAAe,CAAA;IACvB,UAAU,CAAC,EAAE,oBAAoB,CAAA;IACjC,UAAU,CAAC,EAAE,UAAU,EAAE,CAAA;IACzB,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB;AAED,MAAM,WAAW,eAAe;IAC9B,WAAW,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAA;CAC/B;AAED,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,UAAU,EAAE,CAAA;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAA;IAChD,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,MAAM,MAAM,QAAQ,GAAG,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,CAAA;AAkBzD,qBAAa,WAAW;IACtB,IAAI,EAAE,QAAQ,CAAA;IACd,YAAY,EAAE,OAAO,CAAA;gBAET,OAAO,CAAC,EAAE;QAAE,IAAI,EAAE,QAAQ,CAAA;KAAE;CAIzC"}
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../src/utils/native_adapters/menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AASnD,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,KAAK,CAAA;AAE1C,MAAM,WAAW,oBAAoB;IACnC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED,MAAM,WAAW,UAAU;IACzB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,eAAe,CAAA;IACvB,UAAU,CAAC,EAAE,oBAAoB,CAAA;IACjC,UAAU,CAAC,EAAE,UAAU,EAAE,CAAA;IACzB,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB;AAED,MAAM,WAAW,eAAe;IAC9B,WAAW,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAA;CAC/B;AAED,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,UAAU,EAAE,CAAA;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAA;IAChD,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,MAAM,MAAM,QAAQ,GAAG,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,CAAA;AAMzD,qBAAa,WAAW;IACtB,IAAI,CAAC,EAAE,QAAQ,CAAA;gBAEH,OAAO,CAAC,EAAE;QAAE,IAAI,EAAE,QAAQ,CAAA;KAAE;CAGzC"}

package/build/utils/native_adapters/menu.js

@@ -1,56 +1,17 @@
-import { c as _c } from "react/compiler-runtime";
-import React, { useEffect } from 'react';
-import { View } from 'react-native';
-
 // =================================
 // ====== Types ====================
 // =================================
 
 // Mirrors the props shared by `@expo/ui/community/menu` and
 // `@react-native-menu/menu`, so a host can pass either `MenuView` straight in.
-import { jsx as _jsx } from "react/jsx-runtime";
+
 // =================================
 // ====== Adapter ==================
 // =================================
 
-function UnconfiguredMenuView(t0) {
-  const $ = _c(5);
-  const {
-    children,
-    style,
-    testID
-  } = t0;
-  let t1;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = [];
-    $[0] = t1;
-  } else {
-    t1 = $[0];
-  }
-  useEffect(_temp, t1);
-  let t2;
-  if ($[1] !== children || $[2] !== style || $[3] !== testID) {
-    t2 = /*#__PURE__*/_jsx(View, {
-      style: style,
-      testID: testID,
-      children: children
-    });
-    $[1] = children;
-    $[2] = style;
-    $[3] = testID;
-    $[4] = t2;
-  } else {
-    t2 = $[4];
-  }
-  return t2;
-}
-function _temp() {
-  console.warn("ChatAdapters.configure() must include a menu adapter before rendering a menu");
-}
 export class MenuAdapter {
   constructor(methods) {
-    this.View = methods?.View ?? UnconfiguredMenuView;
-    this.isConfigured = !!methods?.View;
+    this.View = methods?.View;
   }
 }
 //# sourceMappingURL=menu.js.map

package/build/utils/native_adapters/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","names":["React","useEffect","View","jsx","_jsx","UnconfiguredMenuView","t0","$","_c","children","style","testID","t1","Symbol","for","_temp","t2","console","warn","MenuAdapter","constructor","methods","isConfigured"],"sources":["../../../src/utils/native_adapters/menu.tsx"],"sourcesContent":["import React, { useEffect } from 'react'\nimport { StyleProp, View, ViewStyle } from 'react-native'\n\n// =================================\n// ====== Types ====================\n// =================================\n\n// Mirrors the props shared by `@expo/ui/community/menu` and\n// `@react-native-menu/menu`, so a host can pass either `MenuView` straight in.\n\nexport type MenuActionState = 'on' | 'off'\n\nexport interface MenuActionAttributes {\n  destructive?: boolean\n  disabled?: boolean\n  hidden?: boolean\n}\n\nexport interface MenuAction {\n  id?: string\n  title: string\n  state?: MenuActionState\n  attributes?: MenuActionAttributes\n  subactions?: MenuAction[]\n  displayInline?: boolean\n}\n\nexport interface MenuActionEvent {\n  nativeEvent: { event: string }\n}\n\nexport interface MenuViewProps {\n  actions: MenuAction[]\n  onPressAction?: (event: MenuActionEvent) => void\n  onOpenMenu?: () => void\n  onCloseMenu?: () => void\n  shouldOpenOnLongPress?: boolean\n  title?: string\n  style?: StyleProp<ViewStyle>\n  testID?: string\n  children?: React.ReactNode\n}\n\nexport type MenuView = React.ComponentType<MenuViewProps>\n\n// =================================\n// ====== Adapter ==================\n// =================================\n\nfunction UnconfiguredMenuView({ children, style, testID }: MenuViewProps) {\n  useEffect(() => {\n    console.warn('ChatAdapters.configure() must include a menu adapter before rendering a menu')\n  }, [])\n\n  return (\n    <View style={style} testID={testID}>\n      {children}\n    </View>\n  )\n}\n\nexport class MenuAdapter {\n  View: MenuView\n  isConfigured: boolean\n\n  constructor(methods?: { View: MenuView }) {\n    this.View = methods?.View ?? UnconfiguredMenuView\n    this.isConfigured = !!methods?.View\n  }\n}\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,SAAS,QAAQ,OAAO;AACxC,SAAoBC,IAAI,QAAmB,cAAc;;AAEzD;AACA;AACA;;AAEA;AACA;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAqCA;AACA;AACA;;AAEA,SAAAC,qBAAAC,EAAA;EAAA,MAAAC,CAAA,GAAAC,EAAA;EAA8B;IAAAC,QAAA;IAAAC,KAAA;IAAAC;EAAA,IAAAL,EAA0C;EAAA,IAAAM,EAAA;EAAA,IAAAL,CAAA,QAAAM,MAAA,CAAAC,GAAA;IAGnEF,EAAA,KAAE;IAAAL,CAAA,MAAAK,EAAA;EAAA;IAAAA,EAAA,GAAAL,CAAA;EAAA;EAFLN,SAAS,CAACc,KAET,EAAEH,EAAE,CAAC;EAAA,IAAAI,EAAA;EAAA,IAAAT,CAAA,QAAAE,QAAA,IAAAF,CAAA,QAAAG,KAAA,IAAAH,CAAA,QAAAI,MAAA;IAGJK,EAAA,gBAAAZ,IAAA,CAACF,IAAI;MAAQQ,KAAK,EAALA,KAAK;MAAUC,MAAM,EAANA,MAAM;MAAAF,QAAA,EAC/BA;IAAQ,CACL,CAAC;IAAAF,CAAA,MAAAE,QAAA;IAAAF,CAAA,MAAAG,KAAA;IAAAH,CAAA,MAAAI,MAAA;IAAAJ,CAAA,MAAAS,EAAA;EAAA;IAAAA,EAAA,GAAAT,CAAA;EAAA;EAAA,OAFPS,EAEO;AAAA;AARX,SAAAD,MAAA;EAEIE,OAAO,CAAAC,IAAK,CAAC,8EAA8E,CAAC;AAAA;AAUhG,OAAO,MAAMC,WAAW,CAAC;EAIvBC,WAAWA,CAACC,OAA4B,EAAE;IACxC,IAAI,CAACnB,IAAI,GAAGmB,OAAO,EAAEnB,IAAI,IAAIG,oBAAoB;IACjD,IAAI,CAACiB,YAAY,GAAG,CAAC,CAACD,OAAO,EAAEnB,IAAI;EACrC;AACF","ignoreList":[]}
+{"version":3,"file":"menu.js","names":["MenuAdapter","constructor","methods","View"],"sources":["../../../src/utils/native_adapters/menu.tsx"],"sourcesContent":["import React from 'react'\nimport { StyleProp, ViewStyle } from 'react-native'\n\n// =================================\n// ====== Types ====================\n// =================================\n\n// Mirrors the props shared by `@expo/ui/community/menu` and\n// `@react-native-menu/menu`, so a host can pass either `MenuView` straight in.\n\nexport type MenuActionState = 'on' | 'off'\n\nexport interface MenuActionAttributes {\n  destructive?: boolean\n  disabled?: boolean\n  hidden?: boolean\n}\n\nexport interface MenuAction {\n  id?: string\n  title: string\n  state?: MenuActionState\n  attributes?: MenuActionAttributes\n  subactions?: MenuAction[]\n  displayInline?: boolean\n}\n\nexport interface MenuActionEvent {\n  nativeEvent: { event: string }\n}\n\nexport interface MenuViewProps {\n  actions: MenuAction[]\n  onPressAction?: (event: MenuActionEvent) => void\n  onOpenMenu?: () => void\n  onCloseMenu?: () => void\n  shouldOpenOnLongPress?: boolean\n  title?: string\n  style?: StyleProp<ViewStyle>\n  testID?: string\n  children?: React.ReactNode\n}\n\nexport type MenuView = React.ComponentType<MenuViewProps>\n\n// =================================\n// ====== Adapter ==================\n// =================================\n\nexport class MenuAdapter {\n  View?: MenuView\n\n  constructor(methods?: { View: MenuView }) {\n    this.View = methods?.View\n  }\n}\n"],"mappings":"AAGA;AACA;AACA;;AAEA;AACA;;AAqCA;AACA;AACA;;AAEA,OAAO,MAAMA,WAAW,CAAC;EAGvBC,WAAWA,CAACC,OAA4B,EAAE;IACxC,IAAI,CAACC,IAAI,GAAGD,OAAO,EAAEC,IAAI;EAC3B;AACF","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "4.5.0-rc.1",
+  "version": "4.5.0-rc.3",
   "description": "",
   "repository": {
     "type": "git",
@@ -84,5 +84,5 @@
     "sf-symbols-typescript": "^2.2.0",
     "typescript": "~6.0.3"
   },
-  "gitHead": "856c408a4a998b4ce9b499ea42769c2b4f071adb"
+  "gitHead": "a6ed01aa8a0298b35f775b61fcd396f971dd69b1"
 }

package/src/components/display/__tests__/filter_dropdown.test.tsx

@@ -36,7 +36,7 @@ const FakeMenuView = ({ actions, onPressAction, children }: MenuViewProps) => {
   )
 }
 
-beforeAll(() => {
+const configureAdapters = (menu?: MenuAdapter) => {
   ChatAdapters.configure({
     clipboard: new ClipboardAdapter({
       getStringAsync: async () => '',
@@ -48,8 +48,12 @@ beforeAll(() => {
       openCameraAsync: async () => ({ canceled: true, assets: null }),
       openImageLibraryAsync: async () => ({ canceled: true, assets: null }),
     }),
-    menu: new MenuAdapter({ View: FakeMenuView }),
+    menu,
   })
+}
+
+beforeEach(() => {
+  configureAdapters(new MenuAdapter({ View: FakeMenuView }))
 })
 
 const options = [
@@ -111,4 +115,16 @@ describe('FilterDropdown', () => {
     expect(onMoreFilters).toHaveBeenCalledTimes(1)
     expect(onSelect).not.toHaveBeenCalled()
   })
+
+  it('opens the popover menu when the host configured no menu', () => {
+    configureAdapters()
+    const { onSelect } = renderFilterDropdown()
+
+    expect(screen.queryAllByRole('menuitem')).toHaveLength(0)
+
+    fireEvent.press(screen.getByRole('button', { name: 'Groups' }))
+    fireEvent.press(screen.getByRole('menuitem', { name: 'Teams' }))
+
+    expect(onSelect).toHaveBeenCalledWith('teams')
+  })
 })

package/src/components/display/__tests__/popover_menu_view.test.tsx

@@ -0,0 +1,63 @@
+import { fireEvent, render, screen } from '@testing-library/react-native'
+import React from 'react'
+import { Text } from 'react-native'
+import { MenuAction } from '../../../utils/native_adapters'
+import { PopoverMenuView } from '../popover_menu_view'
+
+const actions: MenuAction[] = [
+  { id: 'all', title: 'All' },
+  { id: 'groups', title: 'Groups', state: 'on' },
+  { id: 'secret', title: 'Secret', attributes: { hidden: true } },
+  {
+    id: 'more',
+    title: '',
+    displayInline: true,
+    subactions: [{ id: 'more_filters', title: 'More filters' }],
+  },
+]
+
+const renderMenu = () => {
+  const onPressAction = jest.fn()
+
+  render(
+    <PopoverMenuView actions={actions} onPressAction={onPressAction}>
+      <Text>Trigger</Text>
+    </PopoverMenuView>
+  )
+
+  fireEvent.press(screen.getByText('Trigger'))
+
+  return { onPressAction }
+}
+
+describe('PopoverMenuView', () => {
+  it('opens with a row per visible action, inline sections flattened, the on action checked', () => {
+    renderMenu()
+
+    expect(screen.getAllByRole('menuitem').map(item => item.props.accessibilityState)).toEqual([
+      { selected: false, disabled: false },
+      { selected: true, disabled: false },
+      { selected: false, disabled: false },
+    ])
+    expect(screen.getByRole('menuitem', { name: 'More filters' })).toBeTruthy()
+    expect(screen.queryByRole('menuitem', { name: 'Secret' })).toBeNull()
+  })
+
+  it('reports the pressed action by id and closes', () => {
+    const { onPressAction } = renderMenu()
+
+    fireEvent.press(screen.getByRole('menuitem', { name: 'More filters' }))
+
+    expect(onPressAction).toHaveBeenCalledWith({ nativeEvent: { event: 'more_filters' } })
+    expect(screen.queryAllByRole('menuitem')).toHaveLength(0)
+  })
+
+  it('closes without an action when the scrim is pressed', () => {
+    const { onPressAction } = renderMenu()
+
+    fireEvent.press(screen.getByLabelText('Close menu'))
+
+    expect(onPressAction).not.toHaveBeenCalled()
+    expect(screen.queryAllByRole('menuitem')).toHaveLength(0)
+  })
+})

package/src/components/display/filter_dropdown.tsx

@@ -10,6 +10,7 @@ import {
 } from '../../utils'
 import { tokens } from '../../vendor/tapestry/tokens'
 import { Icon } from './icon'
+import { PopoverMenuView } from './popover_menu_view'
 import { Text } from './text'
 
 // =================================
@@ -35,6 +36,11 @@ export interface FilterDropdownProps {
   onMoreFilters: () => void
   triggerLabel: string
   showMoreFilters?: boolean
+  /**
+   * Widest the trigger may render, in points. Hosts that measure the trigger at its intrinsic
+   * width need this for the label to truncate.
+   */
+  maxWidth?: number
 }
 
 export function FilterDropdown({
@@ -44,8 +50,10 @@ export function FilterDropdown({
   onMoreFilters,
   triggerLabel,
   showMoreFilters = true,
+  maxWidth,
 }: FilterDropdownProps) {
   const styles = useStyles()
+  const MenuView = Menu.View ?? PopoverMenuView
 
   const optionActions: MenuAction[] = options.map(option => ({
     id: option.id,
@@ -69,9 +77,9 @@ export function FilterDropdown({
   }
 
   return (
-    <Menu.View actions={actions} onPressAction={handlePressAction} style={styles.container}>
+    <MenuView actions={actions} onPressAction={handlePressAction} style={styles.container}>
       <View
-        style={styles.trigger}
+        style={[styles.trigger, maxWidth !== undefined && { maxWidth }]}
         accessible
         accessibilityRole="button"
         accessibilityHint="Opens filter options"
@@ -90,7 +98,7 @@ export function FilterDropdown({
           accessibilityElementsHidden
         />
       </View>
-    </Menu.View>
+    </MenuView>
   )
 }
 

package/src/components/display/index.ts

@@ -25,6 +25,7 @@ export * from './text_inline_button'
 export * from './text'
 export * from './toggle_button'
 export * from './filter_dropdown'
+export * from './popover_menu_view'
 export * from './keyboard_scroll_view'
 export * from './keyboard_view'
 export * from './platform_modal_header_buttons'

package/src/components/display/popover_menu_view.tsx

@@ -0,0 +1,239 @@
+import { clamp } from 'lodash'
+import React, { useRef, useState } from 'react'
+import { Modal, Pressable, ScrollView, StyleSheet, useWindowDimensions, View } from 'react-native'
+import { useChatContext } from '../../contexts/chat_context'
+import { useCreateAndroidRippleColor, useFontScale, useTheme } from '../../hooks'
+import { MenuAction, MenuViewProps, platformPressedOpacityStyle } from '../../utils'
+import { tokens } from '../../vendor/tapestry/tokens'
+import { Icon } from './icon'
+import { Text } from './text'
+
+// =================================
+// ====== Constants ================
+// =================================
+
+const MENU_WIDTH = 240
+const MENU_OFFSET = 4
+const SCREEN_MARGIN = 16
+
+const CLOSED_ANCHOR = { x: 0, y: 0, width: 0, height: 0 }
+
+// =================================
+// ====== Rows =====================
+// =================================
+
+type Row = { kind: 'action'; action: MenuAction } | { kind: 'separator' }
+
+const actionId = (action: MenuAction) => action.id ?? action.title
+
+const visibleActions = (actions: MenuAction[]) =>
+  actions.filter(action => !action.attributes?.hidden)
+
+// Lays the actions out the way the native menus draw them: an inline section's
+// subactions sit at the top level, divided from neighboring rows by a separator.
+const buildRows = (actions: MenuAction[]): Row[] => {
+  const rows: Row[] = []
+  const pushSeparator = () => {
+    if (rows.length > 0 && rows[rows.length - 1].kind !== 'separator') {
+      rows.push({ kind: 'separator' })
+    }
+  }
+
+  visibleActions(actions).forEach((action, index, visible) => {
+    if (action.displayInline && action.subactions) {
+      pushSeparator()
+      visibleActions(action.subactions).forEach(subaction =>
+        rows.push({ kind: 'action', action: subaction })
+      )
+      if (index < visible.length - 1) pushSeparator()
+    } else {
+      rows.push({ kind: 'action', action })
+    }
+  })
+
+  return rows
+}
+
+// =================================
+// ====== Component ================
+// =================================
+
+/**
+ * A JS-only `MenuView` for hosts that cannot supply a native menu. Wraps the
+ * trigger in a pressable and opens a popover of the actions under it, or above
+ * it when the trigger sits in the lower half of the window.
+ */
+export function PopoverMenuView({
+  actions,
+  onPressAction,
+  onOpenMenu,
+  onCloseMenu,
+  style,
+  testID,
+  children,
+}: MenuViewProps) {
+  const triggerRef = useRef<View>(null)
+  const [expanded, setExpanded] = useState(false)
+  const [anchor, setAnchor] = useState(CLOSED_ANCHOR)
+  const { edgeToEdge = true } = useChatContext()
+  const { width: windowWidth, height: windowHeight } = useWindowDimensions()
+  const fontScale = useFontScale()
+  const styles = useStyles()
+
+  const open = () => {
+    triggerRef.current?.measureInWindow((x, y, width, height) => {
+      setAnchor({ x, y, width, height })
+    })
+    setExpanded(true)
+    onOpenMenu?.()
+  }
+
+  const close = () => {
+    setExpanded(false)
+    onCloseMenu?.()
+  }
+
+  const handlePress = (action: MenuAction) => {
+    onPressAction?.({ nativeEvent: { event: actionId(action) } })
+    close()
+  }
+
+  const menuWidth = clamp(MENU_WIDTH * fontScale, MENU_WIDTH, windowWidth - SCREEN_MARGIN * 2)
+  const anchorBottom = anchor.y + anchor.height
+  const opensUpward = anchor.y + anchor.height / 2 > windowHeight / 2
+  const menuPosition = {
+    width: menuWidth,
+    left: clamp(
+      anchor.x,
+      SCREEN_MARGIN,
+      Math.max(SCREEN_MARGIN, windowWidth - menuWidth - SCREEN_MARGIN)
+    ),
+    ...(opensUpward
+      ? {
+          bottom: windowHeight - anchor.y + MENU_OFFSET,
+          maxHeight: anchor.y - MENU_OFFSET - SCREEN_MARGIN,
+        }
+      : {
+          top: anchorBottom + MENU_OFFSET,
+          maxHeight: windowHeight - anchorBottom - MENU_OFFSET - SCREEN_MARGIN,
+        }),
+  }
+
+  return (
+    <>
+      <Pressable ref={triggerRef} style={style} testID={testID} onPress={open} accessible={false}>
+        {children}
+      </Pressable>
+      <Modal
+        visible={expanded}
+        transparent
+        animationType="fade"
+        statusBarTranslucent={edgeToEdge}
+        navigationBarTranslucent={edgeToEdge}
+        onRequestClose={close}
+      >
+        <Pressable
+          style={styles.scrim}
+          onPress={close}
+          accessibilityRole="button"
+          accessibilityLabel="Close menu"
+        />
+        <View style={[styles.menu, menuPosition]} accessibilityRole="menu">
+          <ScrollView bounces={false}>
+            {buildRows(actions).map((row, index) =>
+              row.kind === 'separator' ? (
+                <View key={index} style={styles.separator} />
+              ) : (
+                <PopoverMenuItem
+                  key={index}
+                  action={row.action}
+                  onPress={() => handlePress(row.action)}
+                />
+              )
+            )}
+          </ScrollView>
+        </View>
+      </Modal>
+    </>
+  )
+}
+
+interface PopoverMenuItemProps {
+  action: MenuAction
+  onPress: () => void
+}
+
+function PopoverMenuItem({ action, onPress }: PopoverMenuItemProps) {
+  const styles = useStyles()
+  const { colors } = useTheme()
+  const androidRippleColor = useCreateAndroidRippleColor({ color: colors.fillColorNeutral050Base })
+  const selected = action.state === 'on'
+  const disabled = action.attributes?.disabled === true
+
+  return (
+    <Pressable
+      style={({ pressed }) => [
+        styles.item,
+        pressed && platformPressedOpacityStyle,
+        disabled && styles.itemDisabled,
+      ]}
+      onPress={onPress}
+      disabled={disabled}
+      accessibilityRole="menuitem"
+      accessibilityState={{ selected, disabled }}
+      android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }}
+    >
+      <Text style={styles.itemLabel}>{action.title}</Text>
+      {selected && (
+        <Icon name="general.check" style={styles.itemCheck} accessibilityElementsHidden />
+      )}
+    </Pressable>
+  )
+}
+
+// =================================
+// ====== Styles ===================
+// =================================
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    scrim: {
+      ...StyleSheet.absoluteFill,
+    },
+    menu: {
+      position: 'absolute',
+      paddingVertical: 4,
+      borderRadius: 8,
+      borderWidth: StyleSheet.hairlineWidth,
+      borderColor: colors.fillColorNeutral050Base,
+      backgroundColor: colors.fillColorNeutral100Inverted,
+      boxShadow: '0px 4px 12px rgba(0, 0, 0, 0.15)',
+      elevation: 4,
+      overflow: 'hidden',
+    },
+    item: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 12,
+      paddingHorizontal: 16,
+      paddingVertical: 12,
+    },
+    itemDisabled: {
+      opacity: 0.4,
+    },
+    itemLabel: {
+      flex: 1,
+    },
+    itemCheck: {
+      fontSize: tokens.fontSizeSm,
+      color: colors.interaction,
+    },
+    separator: {
+      height: StyleSheet.hairlineWidth,
+      marginVertical: 4,
+      backgroundColor: colors.fillColorNeutral050Base,
+    },
+  })
+}

package/src/screens/conversations/__tests__/conversations_screen.test.tsx

@@ -7,7 +7,6 @@ import {
   ChatAdapters,
   ClipboardAdapter,
   ImagePickerAdapter,
-  MenuAdapter,
   VideoAdapter,
 } from '../../../utils/native_adapters'
 import { ConversationsScreen } from '../conversations_screen'
@@ -41,7 +40,7 @@ jest.mock('../components/filter_dropdown_list_header_component', () => {
   return { FilterDropdownListHeaderComponent: () => <Text>Filter dropdown header</Text> }
 })
 
-const configureAdapters = ({ menu }: { menu: boolean }) => {
+const configureAdapters = () => {
   ChatAdapters.configure({
     clipboard: new ClipboardAdapter({
       getStringAsync: async () => '',
@@ -53,7 +52,6 @@ const configureAdapters = ({ menu }: { menu: boolean }) => {
       openCameraAsync: async () => ({ canceled: true, assets: null }),
       openImageLibraryAsync: async () => ({ canceled: true, assets: null }),
     }),
-    ...(menu ? { menu: new MenuAdapter({ View: () => null }) } : {}),
   })
 }
 
@@ -80,7 +78,7 @@ const renderWithFeatures = (enabledFeatures: string[]) => {
 
 describe('ConversationsScreen header gating', () => {
   beforeEach(() => {
-    configureAdapters({ menu: true })
+    configureAdapters()
   })
 
   it('shows the search header with only the QA flag on', async () => {
@@ -107,14 +105,6 @@ describe('ConversationsScreen header gating', () => {
     expect(await view.findByText('Filter dropdown header')).toBeTruthy()
   })
 
-  it('falls back to the search header when the host has no menu adapter', async () => {
-    configureAdapters({ menu: false })
-
-    const view = renderWithFeatures(['QA_MOBILE_filter_dropdown', 'ROLLOUT_MOBILE_search'])
-
-    expect(await view.findByText('Search header')).toBeTruthy()
-  })
-
   it('shows the default header with neither flag on', async () => {
     const view = renderWithFeatures(['ROLLOUT_WEB_search'])
 

package/src/screens/conversations/components/__tests__/filter_dropdown_list_header_component.test.tsx

@@ -21,6 +21,15 @@ const mockSearchEnabled = jest.fn()
 const mockCanBrowseArchived = jest.fn()
 const mockGroupsByGraphId: Record<string, { name: string }> = {}
 
+jest.mock('react-native', () => {
+  const actual = jest.requireActual('react-native')
+  return Object.defineProperty(actual, 'useWindowDimensions', {
+    value: jest.fn(() => ({ fontScale: 1 })),
+    configurable: true,
+  })
+})
+const mockUseWindowDimensions = jest.requireMock('react-native').useWindowDimensions
+
 jest.mock('@react-navigation/native', () => ({
   ...jest.requireActual('@react-navigation/native'),
   useNavigation: () => ({ setParams: mockSetParams, navigate: mockNavigate }),
@@ -121,10 +130,46 @@ describe('FilterDropdownListHeaderComponent', () => {
     mockSetParams.mockClear()
     mockSearchEnabled.mockReturnValue(true)
     mockCanBrowseArchived.mockReturnValue(false)
+    mockUseWindowDimensions.mockReturnValue({ fontScale: 1 })
     setCapabilities({ groups: true, teams: true })
     setRouteParams({})
   })
 
+  it('keeps the dropdown and actions on one line at the default font scale', () => {
+    mockUseWindowDimensions.mockReturnValue({ fontScale: 1 })
+
+    render(<FilterDropdownListHeaderComponent />)
+
+    expect(screen.getByTestId('conversations-filter-heading-row')).toHaveStyle({
+      flexDirection: 'row',
+    })
+  })
+
+  it('stacks the actions under the dropdown at the first font size above the default', () => {
+    mockUseWindowDimensions.mockReturnValue({ fontScale: 1.12 })
+
+    render(<FilterDropdownListHeaderComponent />)
+
+    expect(screen.getByTestId('conversations-filter-heading-row')).toHaveStyle({
+      flexDirection: 'column',
+    })
+  })
+
+  it('caps the trigger to the room beside the actions so a long label truncates', () => {
+    render(<FilterDropdownListHeaderComponent />)
+
+    fireEvent(screen.getByTestId('conversations-filter-heading-row'), 'layout', {
+      nativeEvent: { layout: { width: 360 } },
+    })
+    fireEvent(screen.getByTestId('conversations-filter-actions'), 'layout', {
+      nativeEvent: { layout: { width: 160 } },
+    })
+
+    expect(screen.getByRole('button', { name: 'All conversations' })).toHaveStyle({
+      maxWidth: 156,
+    })
+  })
+
   it('offers every filter the person can use, then More filters', () => {
     render(<FilterDropdownListHeaderComponent />)