1.8

Author: nandorojo

docs/docs/components/context-menu.md

@@ -303,6 +303,27 @@ Android menu items do not currently support subtitles.
 
 Used to group multiple items.
 
+On iOS, items will visually group with a divider like `Group Item 1` and `Group Item 2` below:
+
+<img src="/img/group.png" />
+
+On iOS, you can use the `horizontal` prop render items like so:
+
+<img width="400" alt="image" src="https://github.com/nandorojo/zeego/assets/13172299/6d927c98-c29d-4732-95ca-2bec725d487e" />
+
+| Prop         | Required | Default | Platforms                |
+| ------------ | -------- | ------- | ------------------------ |
+| `children`   |          |         | `web` , `ios`, `android` |
+| `horizontal` |          |         | `ios`                    |
+
+To add a title to the group, pass a `Label` component inside of it:
+
+```tsx
+<ContextMenu.Group>
+  <ContextMenu.Label>Fernando</ContextMenu.Label>
+</ContextMenu.Group>
+```
+
 <!-- On iOS, items will visually group with a divider like `Group Item 1` and `Group Item 2` below:
 
 <img src="/img/group.png"></img> -->

docs/docs/components/dropdown-menu.md

@@ -272,6 +272,23 @@ On iOS, items will visually group with a divider like `Group Item 1` and `Group
 
 <img src="/img/group.png" />
 
+On iOS, you can use the `horizontal` prop render items like so:
+
+<img width="400" alt="image" src="https://github.com/nandorojo/zeego/assets/13172299/6d927c98-c29d-4732-95ca-2bec725d487e" />
+
+| Prop         | Required | Default | Platforms                |
+| ------------ | -------- | ------- | ------------------------ |
+| `children`   |          |         | `web` , `ios`, `android` |
+| `horizontal` |          |         | `ios`                    |
+
+To add a title to the group, pass a `Label` component inside of it:
+
+```tsx
+<DropdownMenu.Group>
+  <DropdownMenu.Label>Fernando</DropdownMenu.Label>
+</DropdownMenu.Group>
+```
+
 ### CheckboxItem
 
 Usage is similar to [`Item`](#item) with added checkbox features.

docs/docs/start.md

@@ -28,7 +28,9 @@ yarn add react-native-ios-context-menu react-native-ios-utilities
 yarn add @react-native-menu/menu
 ```
 
-If you're using an Expo Development Client, there are some additional steps:
+#### Expo SDK 49 or lower
+
+If you're using an older version Expo Development Client, there are some additional steps:
 
 ```yarn
 npx expo install expo-build-properties
@@ -40,20 +42,20 @@ Next, add this to your app config's plugins array:
 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",
+          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.

package.json

@@ -54,7 +54,7 @@
     "react-native": "0.64.2",
     "react-native-builder-bob": "^0.18.0",
     "release-it": "^14.2.2",
-    "typescript": "^4.4",
+    "typescript": "^5",
     "lerna": "^3.22.1"
   },
   "peerDependencies": {
@@ -122,7 +122,6 @@
     "@expo/config-plugins": "^5.0.0",
     "@expo/prebuild-config": "^5.0.1",
     "react": "18.0.0",
-    "metro": "0.72.3",
-    "typescript": "4.8.4"
+    "metro": "0.72.3"
   }
 }

packages/zeego/package.json

@@ -74,7 +74,7 @@
     "react-native-builder-bob": "^0.18.0",
     "react-native-ios-utilities": "^4.3.2",
     "release-it": "^14.2.2",
-    "typescript": "^4.4"
+    "typescript": "^5"
   },
   "peerDependencies": {
     "@react-native-menu/menu": "*",

packages/zeego/src/menu/children.ts

@@ -85,10 +85,12 @@ export const pickChildren = <Props = any>(
   }
 }
 
-export const isInstanceOfComponent = (
-  element: React.ReactElement | React.ReactChild | undefined,
-  targetElement: React.ElementType
-) => {
+type PropsFromElementType<T> = T extends React.ElementType<infer P> ? P : never
+
+export const isInstanceOfComponent = <Props>(
+  element: React.ReactElement | React.ReactText | undefined,
+  targetElement: React.ComponentType<Props>
+): element is NonNullable<React.ReactElement<Props>> => {
   const matches =
     (element as any)?.type === targetElement ||
     (typeof (element as any)?.type == 'function' &&

packages/zeego/src/menu/create-ios-menu/index.ios.tsx

@@ -33,6 +33,9 @@ import {
   ContextMenuButton,
   ContextMenuView,
   MenuActionConfig,
+  MenuConfig,
+  MenuElementAtrributes,
+  MenuElementSize,
 } from 'react-native-ios-context-menu'
 import { create } from '../display-names'
 import type { ImageSystemConfig } from 'react-native-ios-context-menu/src/types/ImageItemConfig'
@@ -159,28 +162,12 @@ If you want to use a custom component as your <Content />, you can use the creat
   }, 'Label')
 
   type MenuOption = 'destructive' | 'displayInline'
-  type MenuAttribute = 'disabled' | 'destructive' | 'hidden'
+  type MenuAttribute = keyof typeof MenuElementAtrributes
 
   type MenuAttributes = MenuAttribute[]
   type MenuOptions = MenuOption[]
 
-  type MenuConfig = {
-    menuTitle: string
-    menuItems: (MenuItem | MenuConfig)[]
-    menuAttributes?: MenuAttributes
-    menuOptions?: MenuOptions
-    icon?: MenuActionConfig['icon']
-  }
-
-  type MenuItem = {
-    actionKey: string
-    actionTitle: string
-    discoverabilityTitle?: string
-    menuAttributes?: MenuAttributes
-    menuOptions?: MenuOptions
-    icon?: MenuActionConfig['icon']
-    menuState?: 'on' | 'off' | 'mixed'
-  }
+  type MenuItem = MenuActionConfig
 
   const Root = create((props: MenuRootProps) => {
     const trigger = pickChildren<MenuTriggerProps>(props.children, Trigger)
@@ -345,7 +332,7 @@ If you want to use a custom component as your <Content />, you can use the creat
     ): ((MenuItem | MenuConfig) | null)[] => {
       return Children.map(flattenChildren(children), (_child, index) => {
         if (isInstanceOfComponent(_child, Item)) {
-          const child = _child as ReactElement<MenuItemProps>
+          const child = _child
 
           const item = getItemFromChild(child, index)
           if (item) {
@@ -360,7 +347,7 @@ If you want to use a custom component as your <Content />, you can use the creat
             return finalItem
           }
         } else if (isInstanceOfComponent(_child, CheckboxItem)) {
-          const child = _child as ReactElement<MenuCheckboxItemProps>
+          const child = _child
 
           const item = getItemFromChild(child, index)
           if (item) {
@@ -384,7 +371,7 @@ If you want to use a custom component as your <Content />, you can use the creat
             return finalItem
           }
         } else if (isInstanceOfComponent(_child, Sub)) {
-          const child = _child as ReactElement<MenuRootProps>
+          const child = _child
           const triggerItemChild = pickChildren<MenuSubTriggerProps>(
             child.props.children,
             SubTrigger
@@ -414,6 +401,7 @@ If you want to use a custom component as your <Content />, you can use the creat
                   icon: triggerItem?.icon,
                   menuItems: nestedItems,
                   menuOptions,
+                  // @ts-expect-error
                   menuAttributes: triggerItem.menuAttributes,
                 }
                 return menuConfig
@@ -427,10 +415,30 @@ If you want to use a custom component as your <Content />, you can use the creat
             filterNull
           )
 
+          const groupTitle = pickChildren<MenuLabelProps>(
+            child.props.children,
+            Label
+          ).targetChildren?.[0]?.props.children
+
+          let menuPreferredElementSize: MenuElementSize | undefined
+
+          if (child.props.horizontal) {
+            const hasGroupItemWithText = groupItems.some((item) => {
+              return item.type === 'action' && item.actionTitle
+            })
+
+            if (hasGroupItemWithText) {
+              menuPreferredElementSize = 'medium'
+            } else {
+              menuPreferredElementSize = 'small'
+            }
+          }
+
           return {
-            menuTitle: '',
+            menuTitle: groupTitle || '',
             menuItems: groupItems,
             menuOptions: ['displayInline'],
+            menuPreferredElementSize: menuPreferredElementSize,
           }
         }
         return null

packages/zeego/src/menu/types.ts

@@ -8,7 +8,7 @@ import type {
 import type {
   ImageOptions,
   ImageSystemSymbolConfiguration,
-} from 'react-native-ios-context-menu/lib/typescript/types/ImageItemConfig'
+} from 'react-native-ios-context-menu/src/types/ImageItemConfig'
 import type { ComponentProps, SVGAttributes } from 'react'
 
 import type { SFSymbol } from 'sf-symbols-typescript'
@@ -81,6 +81,12 @@ export type ContextMenuContentProps = Not<
 export type MenuGroupProps = {
   children: React.ReactNode
   style?: ViewStyle
+  /**
+   * iOS-only
+   *
+   * Makes the menu items be in a row. Defaults to `false`.
+   */
+  horizontal?: boolean
 }
 
 export type MenuItemProps = {
@@ -167,7 +173,7 @@ export type MenuSubTriggerProps = Omit<
 }
 
 export type MenuSubProps = {
-  children?: React.ReactNode
+  children: React.ReactNode
 }
 
 export type MenuSubContentProps = Not<MenuContentProps, 'side' | 'align'>

tsconfig.json

@@ -2,7 +2,6 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "@zeego/*": ["./packages/*/src"],
       "zeego": ["./packages/zeego/src"]
     },
     "allowUnreachableCode": false,
@@ -26,5 +25,5 @@
     "target": "esnext",
     "noEmit": true
   },
-  "exclude": ["examples"]
+  "exclude": ["examples", "node_modules", "../../node_modules/**/*"]
 }

yarn.lock

@@ -18756,6 +18756,11 @@ react-native-ios-context-menu@2.3.2:
   dependencies:
     "@dominicstop/ts-event-emitter" "^1.1.0"
 
+react-native-ios-utilities@^4.3.2:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/react-native-ios-utilities/-/react-native-ios-utilities-4.3.2.tgz#5d9cf50b7388d2b72752aee9d51ce172b96c0fd6"
+  integrity sha512-pcQoix3ILMmHQkxkwBVVCWU0+q7BbVKCqJ5O/fLxe+PQQnJUCyZLFW7im9J4oUGYfxL7xAXal081lSBP9mWA4w==
+
 react-native-reanimated@~2.9.1:
   version "2.9.1"
   resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-2.9.1.tgz#d9a932e312c13c05b4f919e43ebbf76d996e0bc1"
@@ -21490,11 +21495,16 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typescript@4.8.4, typescript@^4.0.2, typescript@^4.4:
+typescript@^4.0.2:
   version "4.8.4"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.8.4.tgz#c464abca159669597be5f96b8943500b238e60e6"
   integrity sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==
 
+typescript@^5:
+  version "5.3.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.3.3.tgz#b3ce6ba258e72e6305ba66f5c9b452aaee3ffe37"
+  integrity sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==
+
 ua-parser-js@^0.7.30:
   version "0.7.31"
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.31.tgz#649a656b191dffab4f21d5e053e27ca17cbff5c6"