@planningcenter/chat-react-native 4.5.0-rc.2 → 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.2",
+  "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": "b31ae15cdb886fd46c2e671c7f764d92ed33bc82"
+  "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'
 
 // =================================
@@ -52,6 +53,7 @@ export function FilterDropdown({
   maxWidth,
 }: FilterDropdownProps) {
   const styles = useStyles()
+  const MenuView = Menu.View ?? PopoverMenuView
 
   const optionActions: MenuAction[] = options.map(option => ({
     id: option.id,
@@ -75,7 +77,7 @@ 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, maxWidth !== undefined && { maxWidth }]}
         accessible
@@ -96,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/conversations_screen.tsx

@@ -8,7 +8,6 @@ import { analyticsEvents, usePublishProductAnalyticsEvent } from '../../hooks/us
 import { useSearchEnabled } from '../../hooks/use_search_enabled'
 import { AppName } from '../../types/resources/app_name'
 import { GraphId } from '../../types/resources/group_resource'
-import { Menu } from '../../utils/native_adapters'
 import { FilterDropdownListHeaderComponent } from './components/filter_dropdown_list_header_component'
 import { ListHeaderComponent } from './components/list_header_component'
 import { SearchListHeaderComponent } from './components/search_list_header_component'
@@ -41,7 +40,7 @@ const useListHeaderComponent = () => {
   const filterDropdownEnabled = useFilterDropdownEnabled()
   const searchEnabled = useSearchEnabled()
 
-  if (filterDropdownEnabled && Menu.isConfigured) return FilterDropdownListHeaderComponent
+  if (filterDropdownEnabled) return FilterDropdownListHeaderComponent
   if (searchEnabled) return SearchListHeaderComponent
 
   return ListHeaderComponent

package/src/screens/design_system_screen.tsx

@@ -20,6 +20,7 @@ import {
   IconButton,
   Image,
   Person,
+  PopoverMenuView,
   Spinner,
   Switch,
   Text,
@@ -223,6 +224,7 @@ function PressablesSection({ isLast }: SectionProps) {
   const styles = useStyles()
   const [filterSelected, setFilterSelected] = useState('Groups')
   const [dropdownSelected, setDropdownSelected] = useState('all')
+  const [popoverSelected, setPopoverSelected] = useState('all')
 
   return (
     <CollapsableSection title="Pressables" isLast={isLast}>
@@ -400,7 +402,7 @@ function PressablesSection({ isLast }: SectionProps) {
       </Group>
       <Group
         title="FilterDropdown"
-        description="Trigger that opens the host's native menu of filter options plus a More filters action. Needs a menu adapter."
+        description="Trigger that opens the host's native menu of filter options plus a More filters action. Falls back to PopoverMenuView when the host configures no menu adapter."
       >
         <Row style={styles.alignRowLeft}>
           <FilterDropdown
@@ -414,6 +416,37 @@ function PressablesSection({ isLast }: SectionProps) {
           />
         </Row>
       </Group>
+      <Group
+        title="PopoverMenuView"
+        description="The JS-only menu FilterDropdown falls back to when the host configures no menu adapter. Opens under the trigger, or above it when the trigger is in the lower half of the screen."
+      >
+        <Row style={styles.alignRowLeft}>
+          <PopoverMenuView
+            actions={[
+              ...filterDropdownOptions.map(option => ({
+                id: option.id,
+                title: option.label,
+                state: option.id === popoverSelected ? ('on' as const) : ('off' as const),
+              })),
+              {
+                id: 'more',
+                title: '',
+                displayInline: true,
+                subactions: [{ id: 'more_filters', title: 'More filters' }],
+              },
+            ]}
+            onPressAction={({ nativeEvent }) =>
+              nativeEvent.event === 'more_filters'
+                ? Alert.alert('More filters')
+                : setPopoverSelected(nativeEvent.event)
+            }
+          >
+            <Text>
+              {filterDropdownOptions.find(option => option.id === popoverSelected)?.label} ▾
+            </Text>
+          </PopoverMenuView>
+        </Row>
+      </Group>
       <Group
         title="IconButton"
         description="Supports different appearances, sizes, along with loading & disabled states. Use `iconStyle` for custom colors and font sizes. Requires `accessibilityLabel` as icon's don't provide context to screen readers."

package/src/utils/native_adapters/menu.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect } from 'react'
-import { StyleProp, View, ViewStyle } from 'react-native'
+import React from 'react'
+import { StyleProp, ViewStyle } from 'react-native'
 
 // =================================
 // ====== Types ====================
@@ -47,24 +47,10 @@ export type MenuView = React.ComponentType<MenuViewProps>
 // ====== Adapter ==================
 // =================================
 
-function UnconfiguredMenuView({ children, style, testID }: MenuViewProps) {
-  useEffect(() => {
-    console.warn('ChatAdapters.configure() must include a menu adapter before rendering a menu')
-  }, [])
-
-  return (
-    <View style={style} testID={testID}>
-      {children}
-    </View>
-  )
-}
-
 export class MenuAdapter {
-  View: MenuView
-  isConfigured: boolean
+  View?: MenuView
 
   constructor(methods?: { View: MenuView }) {
-    this.View = methods?.View ?? UnconfiguredMenuView
-    this.isConfigured = !!methods?.View
+    this.View = methods?.View
   }
 }