@tamagui/menu 1.0.1-beta.59 → 1.0.1-beta.62

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/menu",
-  "version": "1.0.1-beta.59",
+  "version": "1.0.1-beta.62",
   "sideEffects": true,
   "source": "src/index.ts",
   "types": "./types/index.d.ts",
@@ -8,6 +8,7 @@
   "module": "dist/esm",
   "module:jsx": "dist/jsx",
   "files": [
+    "src",
     "types",
     "dist"
   ],
@@ -19,9 +20,9 @@
   },
   "dependencies": {
     "@gorhom/bottom-sheet": "^4.3.1",
-    "@tamagui/core": "^1.0.1-beta.59",
-    "@tamagui/polyfill-dev": "^1.0.1-beta.59",
-    "@tamagui/use-controllable-state": "^1.0.1-beta.59",
+    "@tamagui/core": "^1.0.1-beta.62",
+    "@tamagui/polyfill-dev": "^1.0.1-beta.62",
+    "@tamagui/use-controllable-state": "^1.0.1-beta.62",
     "react-native-gesture-handler": "*",
     "react-native-reanimated": "~2.8.0"
   },
@@ -30,7 +31,7 @@
     "react-dom": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.59",
+    "@tamagui/build": "^1.0.1-beta.62",
     "react": "*",
     "react-dom": "*"
   },

package/src/Menu.tsx

@@ -0,0 +1,69 @@
+import { useMedia, withStaticProperties } from '@tamagui/core'
+import { Drawer, DrawerProvider } from '@tamagui/drawer'
+import { useControllableState } from '@tamagui/use-controllable-state'
+import React, { cloneElement, useEffect, useMemo, useState } from 'react'
+import { Popover, YStack } from 'tamagui'
+
+const MenuItem = (props) => {
+  return props.children
+}
+
+type MenuProps = {
+  children?: React.ReactNode
+  open?: boolean
+  defaultOpen?: boolean
+  trigger?: any
+  onChangeOpen?: (next: boolean) => void
+}
+
+export const Menu = withStaticProperties(
+  ({ children, open: openProp, defaultOpen, trigger, onChangeOpen }: MenuProps) => {
+    const media = useMedia()
+    const [open, setOpen] = useControllableState({
+      prop: openProp,
+      defaultProp: defaultOpen || false,
+      onChange(next) {
+        onChangeOpen?.(next)
+      },
+    })
+
+    const triggerProps = useMemo(() => {
+      return {
+        onPress: () => {
+          setOpen((x) => !x)
+        },
+      }
+    }, [])
+
+    if (media.sm) {
+      return (
+        <>
+          {cloneElement(trigger, triggerProps)}
+          <Drawer open={open} onDismiss={() => setOpen(false)}>
+            {children}
+          </Drawer>
+        </>
+      )
+    }
+
+    return null
+    // return (
+    //   <Popover
+    //     trigger={(props) => cloneElement(trigger, { ...props, ...triggerProps })}
+    //     open={open}
+    //     onChangeOpen={setOpen}
+    //   >
+    //     <Popover.Content>
+    //       <Popover.Arrow />
+    //       <YStack backgroundColor="$background" borderRadius="$2">
+    //         {children}
+    //       </YStack>
+    //     </Popover.Content>
+    //   </Popover>
+    // )
+  },
+  {
+    Item: MenuItem,
+    Provider: DrawerProvider,
+  }
+)

package/src/index.tsx

@@ -0,0 +1,2 @@
+import '@tamagui/polyfill-dev'
+export * from './Menu'