Merge branch 'master' of https://github.com/nandorojo/zeego

Author: nandorojo

docs/docs/components/context-menu.md

@@ -112,10 +112,11 @@ See the Radix UI [docs for `ContextMenu.Content`](https://www.radix-ui.com/docs/
 
 Wraps the trigger for your menu. The content will be anchored to the trigger.
 
-| Prop     | Required | Default     | Platforms        |
-| -------- | -------- | ----------- | ---------------- |
-| `style`  |          |             | `web`            |
-| `action` |          | `longPress` | `ios`, `android` |
+| Prop      | Required | Default     | Platforms               |
+| --------- | -------- | ----------- | ----------------------- |
+| `style`   |          |             | `web`                   |
+| `action`  |          | `longPress` | `ios`, `android`        |
+| `asChild` |          | `false`     | `web`, `ios`, `android` |
 
 The `action` can be `longPress` or `press`.
 
@@ -383,11 +384,22 @@ On iOS & Android, only one label is supported (unless it is inside a submenu). I
 
 Renders an arrow on web only. This helps point the content to the trigger. The `Arrow` must be rendered inside of `Content`.
 
-| Prop     | Required | Default | Platforms |
-| -------- | -------- | ------- | --------- |
-| `style`  |          |         | `web`     |
-| `height` |          |         | `web`     |
-| `width`  |          |         | `web`     |
+By default, Radix renders the arrow as an `<svg>` element. You can customize the SVG arrow color by passing a `fill` prop, `className`, or `style` object with a `fill` property.
+
+:::caution
+
+Because the arrow is an `<svg>` element, its `style` prop is not React Native compatible. Styling it with React Native libraries may not work as expected. If you would like to render a custom styled `<View>`, use the `asChild` prop instead of wrapping this component.
+
+:::
+
+| Prop        | Required | Default | Platforms |
+| ----------- | -------- | ------- | --------- |
+| `width`     |          | 10      | `web`     |
+| `height`    |          | 5       | `web`     |
+| `fill`      |          |         | `web`     |
+| `style`     |          |         | `web`     |
+| `className` |          |         | `web`     |
+| `asChild`   |          | `false` | `web`     |
 
 ### Separator
 

docs/docs/components/dropdown-menu.md

@@ -109,10 +109,11 @@ See the Radix UI [docs for `DropdownMenu.Content`](https://www.radix-ui.com/docs
 
 Wraps the trigger for your menu. The content will be anchored to the trigger.
 
-| Prop     | Required | Default | Platforms        |
-| -------- | -------- | ------- | ---------------- |
-| `style`  |          |         | `web`            |
-| `action` |          | `press` | `ios`, `android` |
+| Prop      | Required | Default | Platforms               |
+| --------- | -------- | ------- | ----------------------- |
+| `style`   |          |         | `web`                   |
+| `action`  |          | `press` | `ios`, `android`        |
+| `asChild` |          | `false` | `web`, `ios`, `android` |
 
 The `action` can be `longPress` or `press`.
 
@@ -348,11 +349,22 @@ On iOS & Android, only one label is supported (unless it is inside a submenu). I
 
 Renders an arrow on web only. This helps point the content to the trigger. The `Arrow` must be rendered inside of `Content`.
 
-| Prop     | Required | Default | Platforms |
-| -------- | -------- | ------- | --------- |
-| `style`  |          |         | `web`     |
-| `height` |          |         | `web`     |
-| `width`  |          |         | `web`     |
+By default, Radix renders the arrow as an `<svg>` element. You can customize the SVG arrow color by passing a `fill` prop, `className`, or `style` object with a `fill` property.
+
+:::caution
+
+Because the arrow is an `<svg>` element, its `style` prop is not React Native compatible. Styling it with React Native libraries may not work as expected. If you would like to render a custom styled `<View>`, use the `asChild` prop instead of wrapping this component.
+
+:::
+
+| Prop        | Required | Default | Platforms |
+| ----------- | -------- | ------- | --------- |
+| `width`     |          | 10      | `web`     |
+| `height`    |          | 5       | `web`     |
+| `fill`      |          |         | `web`     |
+| `style`     |          |         | `web`     |
+| `className` |          |         | `web`     |
+| `asChild`   |          | `false` | `web`     |
 
 ### Separator
 

docs/docs/start.md

@@ -19,7 +19,7 @@ yarn add zeego
 #### iOS
 
 ```sh
-yarn add react-native-ios-context-menu
+yarn add react-native-ios-context-menu react-native-ios-utilities
 ```
 
 #### Android
@@ -31,28 +31,29 @@ yarn add @react-native-menu/menu
 If you're using an Expo Development Client, there are some additional steps:
 
 ```yarn
-expo install expo-build-properites
+npx expo install expo-build-properties
 ```
 
 Next, add this to your app config's plugins array:
 
 ```js
 export default {
   plugins: [
-    "expo-build-properties",
+    [
+      "expo-build-properties",
       {
-       android: {
-        // these values were tested with Expo SDK 48
-        compileSdkVersion: 33,
-        targetSdkVersion: 33,
-        minSdkVersion: 23,
-        buildToolsVersion: '33.0.0',
-        kotlinVersion: '1.6.20',
+        android: {
+          // these values were tested with Expo SDK 48
+          compileSdkVersion: 33,
+          targetSdkVersion: 33,
+          minSdkVersion: 23,
+          buildToolsVersion: "33.0.0",
+          kotlinVersion: "1.6.20",
+        },
       },
-    }
-  ]
-}
-
+    ],
+  ],
+};
 ```
 
 If you know your way around these, you may be able to adjust them. But if you get an error related to `react-native-menu` when building, please reference these properties.
@@ -78,7 +79,7 @@ To install your dev client on your iPhone, make sure it's plugged in to your Mac
 After the development client build is complete, you can run your app in dev mode:
 
 ```bash
-expo start --dev-client
+npx expo start --dev-client
 ```
 
 If your app is on the App Store, you'll need to deploy a new build too:

examples/expo/src/App.tsx

@@ -211,7 +211,17 @@ const DropdownMenuLabel = DropdownMenu.create(
   'ItemImage'
 )
 
+const DropdownMenuArrow = DropdownMenu.create(
+  (props: ComponentProps<typeof DropdownMenu.Arrow>) => (
+    <DropdownMenu.Arrow {...props} style={{ fill: '#fff' }} />
+  ),
+  'Arrow'
+)
+
 const DropdownMenuExample = () => {
+  const [arrowEnabled, setArrowEnabled] = useState<'on' | 'off' | 'mixed'>(
+    'off'
+  )
   const [bookmarked, setBookmarked] = useState<'on' | 'off' | 'mixed'>('on')
   return (
     <DropdownMenu.Root>
@@ -281,6 +291,19 @@ const DropdownMenuExample = () => {
             resizeMode="contain"
           />
         </DropdownMenuCheckboxItem>
+        <DropdownMenuCheckboxItem
+          style={dropdownStyles.item}
+          value={arrowEnabled}
+          onValueChange={setArrowEnabled}
+          key="fourth"
+        >
+          <DropdownMenuItemIndicator>
+            <Ionicons name="checkmark" size={19} />
+          </DropdownMenuItemIndicator>
+          <DropdownMenuItemTitle>
+            {arrowEnabled === 'on' ? 'Arrow enabled' : 'Arrow disabled'}
+          </DropdownMenuItemTitle>
+        </DropdownMenuCheckboxItem>
 
         <DropdownMenu.Sub>
           <DropdownMenuSubTrigger style={dropdownStyles.item} key="nested">
@@ -329,6 +352,7 @@ const DropdownMenuExample = () => {
             </DropdownMenu.SubContent>
           </DropdownMenu.Sub>
         </DropdownMenu.Group>
+        {arrowEnabled === 'on' ? <DropdownMenuArrow /> : null}
       </DropdownMenu.Content>
     </DropdownMenu.Root>
   )
@@ -443,8 +467,8 @@ const ContextMenuExample = () => {
 export default function App() {
   return (
     <View style={styles.container}>
+      <DropdownMenuExample />
       <View style={{ height: 30 }} />
-      {/* <DropdownMenuExample /> */}
       <ContextMenuExample />
     </View>
   )

packages/zeego/src/context-menu/context-menu.web.tsx

@@ -224,12 +224,8 @@ const ItemIcon = create(({ children, style }: MenuItemIconProps) => {
 
 const Preview = create(() => <></>, 'Preview')
 
-const Arrow = create(({ style, children, width, height }: MenuArrowProps) => {
-  return (
-    <ContextMenu.Arrow width={width} height={height}>
-      <View style={[{ height, width }, style]}>{children}</View>
-    </ContextMenu.Arrow>
-  )
+const Arrow = create(({ children, ...restProps }: MenuArrowProps) => {
+  return <ContextMenu.Arrow {...restProps}>{children}</ContextMenu.Arrow>
 }, 'Arrow')
 
 const Sub = create(({ children }: MenuSubProps) => {

packages/zeego/src/dropdown-menu/dropdown-menu.web.tsx

@@ -230,12 +230,8 @@ const ItemIcon = ({ children, style }: MenuItemIconProps) => {
 
 ItemIcon.displayName = MenuDisplayName.ItemIcon
 
-const Arrow = create(({ style, children, width, height }: MenuArrowProps) => {
-  return (
-    <DropdownMenu.Arrow height={height} width={width}>
-      <View style={[{ height, width }, style]}>{children}</View>
-    </DropdownMenu.Arrow>
-  )
+const Arrow = create(({ children, ...restProps }: MenuArrowProps) => {
+  return <DropdownMenu.Arrow {...restProps}>{children}</DropdownMenu.Arrow>
 }, 'Arrow')
 
 const Sub = create<MenuSubProps>(({ children }) => {

packages/zeego/src/menu/types.ts

@@ -1,4 +1,4 @@
-import type { Text, View, ImageProps, ViewProps } from 'react-native'
+import type { Text, View, ImageProps } from 'react-native'
 import type { MenuContentProps as RadixContentProps } from '@radix-ui/react-dropdown-menu'
 import type {
   ContextMenuView,
@@ -9,9 +9,9 @@ import type {
   ImageOptions,
   ImageSystemSymbolConfiguration,
 } from 'react-native-ios-context-menu/lib/typescript/types/ImageItemConfig'
+import type { ComponentProps, SVGAttributes } from 'react'
 
 import type { SFSymbol } from 'sf-symbols-typescript'
-import type { ComponentProps } from 'react'
 
 type ViewStyle = React.ComponentProps<typeof View>['style']
 type TextStyle = React.ComponentProps<typeof Text>['style']
@@ -150,12 +150,14 @@ export type MenuItemImageProps = MenuItemCommonProps & {
   }
 } & Pick<ImageProps, 'accessibilityLabel'>
 
+type SVGProps = SVGAttributes<SVGSVGElement>
+
 export type MenuArrowProps = {
   height?: number
   width?: number
-  style?: ViewProps['style']
   children?: React.ReactNode
-}
+  asChild?: boolean
+} & Pick<SVGProps, 'fill' | 'style' | 'className'>
 
 export type MenuSubTriggerProps = Omit<
   MenuItemProps,