Merge remote-tracking branch 'origin/main' into next/embeds

* origin/main: (241 commits)
  Nightly source-language update
  Update react-navigation (#5967)
  Update SetNewPasswordForm.tsx (#8349)
  Nightly source-language update
  bskyweb: bump indigo (several codegen updates) (#8442)
  Replace "Note about sharing" prompt with an inline hint (#8452)
  Bump version to v1.104 (#8447)
  show misclass button by the same logic as feedContext (#8445)
  change fontSize: 15 to a.text_sm (#7896)
  Nightly source-language update
  use method that's actually available on android (#8448)
  Release 1.103.0 prep (#8434)
  Add language: European Portuguese (`pt-PT`) (#8375)
  Small test fix
  tweak ordering of explore components (#8432)
  add metrics (#8426)
  invert flag for sending to statsig (#8431)
  Fix link to like-via-repost  (#8428)
  Nightly source-language update
  Make via-repost notifs groupable (#8429)
  ...

src/components/Menu/context.tsx

@@ -1,15 +1,10 @@
 import React from 'react'
 
-import type {ContextType, ItemContextType} from '#/components/Menu/types'
+import  {type ContextType, type ItemContextType} from '#/components/Menu/types'
 
-export const Context = React.createContext<ContextType>({
-  // @ts-ignore
-  control: null,
-})
+export const Context = React.createContext<ContextType | null>(null)
 
-export const ItemContext = React.createContext<ItemContextType>({
-  disabled: false,
-})
+export const ItemContext = React.createContext<ItemContextType | null>(null)
 
 export function useMenuContext() {
   const context = React.useContext(Context)

src/components/Menu/index.tsx

@@ -1,5 +1,11 @@
-import React from 'react'
-import {Pressable, StyleProp, View, ViewStyle} from 'react-native'
+import {cloneElement, Fragment, isValidElement, useMemo} from 'react'
+import {
+  Pressable,
+  type StyleProp,
+  type TextStyle,
+  View,
+  type ViewStyle,
+} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import flattenReactChildren from 'react-keyed-flatten-children'
@@ -16,12 +22,12 @@ import {
   useMenuItemContext,
 } from '#/components/Menu/context'
 import {
-  ContextType,
-  GroupProps,
-  ItemIconProps,
-  ItemProps,
-  ItemTextProps,
-  TriggerProps,
+  type ContextType,
+  type GroupProps,
+  type ItemIconProps,
+  type ItemProps,
+  type ItemTextProps,
+  type TriggerProps,
 } from '#/components/Menu/types'
 import {Text} from '#/components/Typography'
 
@@ -30,14 +36,16 @@ export {
   useDialogControl as useMenuControl,
 } from '#/components/Dialog'
 
+export {useMenuContext}
+
 export function Root({
   children,
   control,
 }: React.PropsWithChildren<{
-  control?: Dialog.DialogOuterProps['control']
+  control?: Dialog.DialogControlProps
 }>) {
   const defaultControl = Dialog.useDialogControl()
-  const context = React.useMemo<ContextType>(
+  const context = useMemo<ContextType>(
     () => ({
       control: control || defaultControl,
     }),
@@ -242,16 +250,53 @@ export function ItemRadio({selected}: {selected: boolean}) {
   )
 }
 
-export function LabelText({children}: {children: React.ReactNode}) {
+/**
+ * NATIVE ONLY - for adding non-pressable items to the menu
+ *
+ * @platform ios, android
+ */
+export function ContainerItem({
+  children,
+  style,
+}: {
+  children: React.ReactNode
+  style?: StyleProp<ViewStyle>
+}) {
+  const t = useTheme()
+  return (
+    <View
+      style={[
+        a.flex_row,
+        a.align_center,
+        a.gap_sm,
+        a.px_md,
+        a.rounded_md,
+        a.border,
+        t.atoms.bg_contrast_25,
+        t.atoms.border_contrast_low,
+        {paddingVertical: 10},
+        style,
+      ]}>
+      {children}
+    </View>
+  )
+}
+
+export function LabelText({
+  children,
+  style,
+}: {
+  children: React.ReactNode
+  style?: StyleProp<TextStyle>
+}) {
   const t = useTheme()
   return (
     <Text
       style={[
         a.font_bold,
         t.atoms.text_contrast_medium,
-        {
-          marginBottom: -8,
-        },
+        {marginBottom: -8},
+        style,
       ]}>
       {children}
     </Text>
@@ -270,19 +315,20 @@ export function Group({children, style}: GroupProps) {
         style,
       ]}>
       {flattenReactChildren(children).map((child, i) => {
-        return React.isValidElement(child) && child.type === Item ? (
-          <React.Fragment key={i}>
+        return isValidElement(child) &&
+          (child.type === Item || child.type === ContainerItem) ? (
+          <Fragment key={i}>
             {i > 0 ? (
               <View style={[a.border_b, t.atoms.border_contrast_low]} />
             ) : null}
-            {React.cloneElement(child, {
-              // @ts-ignore
+            {cloneElement(child, {
+              // @ts-expect-error cloneElement is not aware of the types
               style: {
                 borderRadius: 0,
                 borderWidth: 0,
               },
             })}
-          </React.Fragment>
+          </Fragment>
         ) : null
       })}
     </View>

src/components/Menu/index.web.tsx

@@ -1,12 +1,18 @@
-import React from 'react'
-import {Pressable, StyleProp, View, ViewStyle} from 'react-native'
+import {forwardRef, useCallback, useId, useMemo, useState} from 'react'
+import {
+  Pressable,
+  type StyleProp,
+  type TextStyle,
+  View,
+  type ViewStyle,
+} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import {DropdownMenu} from 'radix-ui'
 
 import {useA11y} from '#/state/a11y'
 import {atoms as a, flatten, useTheme, web} from '#/alf'
-import * as Dialog from '#/components/Dialog'
+import type * as Dialog from '#/components/Dialog'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
 import {
   Context,
@@ -15,22 +21,24 @@ import {
   useMenuItemContext,
 } from '#/components/Menu/context'
 import {
-  ContextType,
-  GroupProps,
-  ItemIconProps,
-  ItemProps,
-  ItemTextProps,
-  RadixPassThroughTriggerProps,
-  TriggerProps,
+  type ContextType,
+  type GroupProps,
+  type ItemIconProps,
+  type ItemProps,
+  type ItemTextProps,
+  type RadixPassThroughTriggerProps,
+  type TriggerProps,
 } from '#/components/Menu/types'
 import {Portal} from '#/components/Portal'
 import {Text} from '#/components/Typography'
 
-export function useMenuControl(): Dialog.DialogControlProps {
-  const id = React.useId()
-  const [isOpen, setIsOpen] = React.useState(false)
+export {useMenuContext}
 
-  return React.useMemo(
+export function useMenuControl(): Dialog.DialogControlProps {
+  const id = useId()
+  const [isOpen, setIsOpen] = useState(false)
+
+  return useMemo(
     () => ({
       id,
       ref: {current: null},
@@ -50,17 +58,17 @@ export function Root({
   children,
   control,
 }: React.PropsWithChildren<{
-  control?: Dialog.DialogOuterProps['control']
+  control?: Dialog.DialogControlProps
 }>) {
   const {_} = useLingui()
   const defaultControl = useMenuControl()
-  const context = React.useMemo<ContextType>(
+  const context = useMemo<ContextType>(
     () => ({
       control: control || defaultControl,
     }),
     [control, defaultControl],
   )
-  const onOpenChange = React.useCallback(
+  const onOpenChange = useCallback(
     (open: boolean) => {
       if (context.control.isOpen && !open) {
         context.control.close()
@@ -94,7 +102,7 @@ export function Root({
   )
 }
 
-const RadixTriggerPassThrough = React.forwardRef(
+const RadixTriggerPassThrough = forwardRef(
   (
     props: {
       children: (
@@ -353,18 +361,23 @@ export function ItemRadio({selected}: {selected: boolean}) {
   )
 }
 
-export function LabelText({children}: {children: React.ReactNode}) {
+export function LabelText({
+  children,
+  style,
+}: {
+  children: React.ReactNode
+  style?: StyleProp<TextStyle>
+}) {
   const t = useTheme()
   return (
     <Text
       style={[
         a.font_bold,
-        a.pt_md,
-        a.pb_sm,
+        a.p_sm,
         t.atoms.text_contrast_low,
-        {
-          paddingHorizontal: 10,
-        },
+        a.leading_snug,
+        {paddingHorizontal: 10},
+        style,
       ]}>
       {children}
     </Text>
@@ -388,3 +401,7 @@ export function Divider() {
     />
   )
 }
+
+export function ContainerItem() {
+  return null
+}