@tamagui/demos 2.0.0-rc.8 → 2.0.0

package/src/MenuDemo.tsx

@@ -4,12 +4,12 @@ import {
   Check,
   ChevronRight,
   FilePlus,
-  Trash2,
   RefreshCw,
-} from '@tamagui/lucide-icons'
+  Trash2,
+} from '@tamagui/lucide-icons-2'
 import { Menu } from '@tamagui/menu'
 import React from 'react'
-import { Button, useIsTouchDevice } from 'tamagui'
+import { Button } from 'tamagui'
 
 /**
  * Menu Demo using Tamagui Menu component.
@@ -25,7 +25,6 @@ export function MenuDemo() {
   const [bookmarksChecked, setBookmarksChecked] = React.useState(true)
   const [native, setNative] = React.useState(true)
   const [subMenuOpen, setSubMenuOpen] = React.useState(false)
-  const isTouchDevice = useIsTouchDevice()
 
   // Note: `item` is the Event on web, undefined on native
   const onSelect = (item) => {
@@ -34,7 +33,7 @@ export function MenuDemo() {
 
   return (
     <>
-      <Menu allowFlip placement="bottom-start" offset={8}>
+      <Menu offset={8}>
         <Menu.Trigger asChild>
           <Button size="$4" icon={Backpack}>
             Open
@@ -47,141 +46,135 @@ export function MenuDemo() {
             borderRadius="$4"
             enterStyle={{ scale: 0.9, opacity: 0, y: -5 }}
             exitStyle={{ scale: 0.95, opacity: 0, y: -3 }}
-            boxShadow="0 $2 $4 $shadowColor"
+            boxShadow="0 4px 5px $shadowColor"
           >
             <Menu.Arrow size="$4" borderWidth={1} borderColor="$borderColor" />
 
-            <Menu.Item onSelect={onSelect} key="about-notes">
-              <Menu.ItemTitle>About Notes</Menu.ItemTitle>
-            </Menu.Item>
-
-            <Menu.Separator />
-
-            <Menu.Item onSelect={onSelect} key="settings">
-              <Menu.ItemTitle>Settings</Menu.ItemTitle>
-            </Menu.Item>
-            <Menu.Item
-              onSelect={onSelect}
-              key="accounts"
-              justify="space-between"
-              // when title is nested inside a React element then you need to use `textValue`
-              textValue="Calendar"
-            >
-              <Menu.ItemTitle>Calendar</Menu.ItemTitle>
-              <Menu.ItemIcon
-                androidIconName="ic_menu_today"
-                ios={{
-                  name: 'calendar',
-                  hierarchicalColor: '#000',
-                  // pointSize: 20,
-                }}
-              >
-                <Calendar color="gray" size={14} />
-              </Menu.ItemIcon>
-            </Menu.Item>
-
-            <Menu.Separator />
-
-            <Menu.Item onSelect={onSelect} key="close-notes" disabled>
-              <Menu.ItemTitle color="gray">Locked Notes</Menu.ItemTitle>
-            </Menu.Item>
-            <Menu.Item onSelect={onSelect} destructive key="delete-all">
-              <Menu.ItemTitle color="red">Delete all</Menu.ItemTitle>
-            </Menu.Item>
-
-            <Menu.Separator />
-
-            <Menu.Sub
-              open={subMenuOpen}
-              placement={isTouchDevice ? 'bottom' : 'right-start'}
-              onOpenChange={setSubMenuOpen}
-            >
-              <Menu.SubTrigger
+            <Menu.ScrollView padding={5}>
+              <Menu.Item onSelect={onSelect} key="about-notes">
+                <Menu.ItemTitle>About Notes</Menu.ItemTitle>
+              </Menu.Item>
+
+              <Menu.Separator />
+
+              <Menu.Item onSelect={onSelect} key="settings">
+                <Menu.ItemTitle>Settings</Menu.ItemTitle>
+              </Menu.Item>
+              <Menu.Item
+                onSelect={onSelect}
+                key="accounts"
                 justify="space-between"
-                key="actions-trigger"
-                textValue="Actions"
+                // when title is nested inside a React element then you need to use `textValue`
+                textValue="Calendar"
               >
-                <Menu.ItemTitle>Actions</Menu.ItemTitle>
-                <ChevronRight size={16} color="$color10" />
-              </Menu.SubTrigger>
-
-              <Menu.Portal zIndex={200}>
-                <Menu.SubContent
-                  enterStyle={{ scale: 0.9, opacity: 0, x: -5 }}
-                  exitStyle={{ scale: 0.95, opacity: 0, x: -3 }}
-                  transition="100ms"
-                  transformOrigin="left top"
-                  elevation="$3"
-                  minW={160}
-                  bg="$background"
-                  p="$1.5"
-                  borderWidth={1}
-                  borderColor="$borderColor"
+                <Menu.ItemTitle>Calendar</Menu.ItemTitle>
+                <Menu.ItemIcon
+                  androidIconName="ic_menu_today"
+                  ios={{
+                    name: 'calendar',
+                    hierarchicalColor: '#000',
+                    // pointSize: 20,
+                  }}
                 >
-                  <Menu.Label py="$1" color="$color8">
-                    Note settings
-                  </Menu.Label>
-                  <Menu.Item
-                    onSelect={onSelect}
-                    key="create-note"
-                    textValue="Create note"
-                    justify="space-between"
-                  >
-                    <Menu.ItemTitle>Create note</Menu.ItemTitle>
-                    <Menu.ItemIcon>
-                      <FilePlus size={14} color="$color10" />
-                    </Menu.ItemIcon>
-                  </Menu.Item>
-                  <Menu.Item
-                    onSelect={onSelect}
-                    key="delete-all-notes"
-                    textValue="Delete all notes"
-                    justify="space-between"
-                  >
-                    <Menu.ItemTitle>Delete all notes</Menu.ItemTitle>
-                    <Menu.ItemIcon>
-                      <Trash2 size={14} color="$color10" />
-                    </Menu.ItemIcon>
-                  </Menu.Item>
-                  <Menu.Item
-                    onSelect={onSelect}
-                    key="sync-all"
-                    textValue="Sync notes"
-                    justify="space-between"
+                  <Calendar color="gray" size={14} />
+                </Menu.ItemIcon>
+              </Menu.Item>
+
+              <Menu.Separator />
+
+              <Menu.Item onSelect={onSelect} key="close-notes" disabled>
+                <Menu.ItemTitle color="gray">Locked Notes</Menu.ItemTitle>
+              </Menu.Item>
+              <Menu.Item onSelect={onSelect} destructive key="delete-all">
+                <Menu.ItemTitle color="red">Delete all</Menu.ItemTitle>
+              </Menu.Item>
+
+              <Menu.Separator />
+
+              <Menu.Sub open={subMenuOpen} onOpenChange={setSubMenuOpen}>
+                <Menu.SubTrigger
+                  justify="space-between"
+                  key="actions-trigger"
+                  textValue="Actions"
+                >
+                  <Menu.ItemTitle>Actions</Menu.ItemTitle>
+                  <ChevronRight size={16} color="$color10" />
+                </Menu.SubTrigger>
+
+                <Menu.Portal zIndex={200}>
+                  <Menu.SubContent
+                    transition="100ms"
+                    borderRadius="$4"
+                    enterStyle={{ scale: 0.9, opacity: 0, y: -5 }}
+                    exitStyle={{ scale: 0.95, opacity: 0, y: -3 }}
+                    boxShadow="0 4px 5px $shadowColor"
+                    padding={5}
                   >
-                    <Menu.ItemTitle>Sync notes</Menu.ItemTitle>
-                    <Menu.ItemIcon>
-                      <RefreshCw size={14} color="$color10" />
-                    </Menu.ItemIcon>
-                  </Menu.Item>
-                </Menu.SubContent>
-              </Menu.Portal>
-            </Menu.Sub>
-
-            <Menu.Separator />
-
-            <Menu.CheckboxItem
-              key="show-hidden"
-              checked={bookmarksChecked}
-              onCheckedChange={setBookmarksChecked}
-              justify="space-between"
-            >
-              <Menu.ItemTitle>Mark as read</Menu.ItemTitle>
-              <Menu.ItemIndicator>
-                <Check size={12} color="$color10" />
-              </Menu.ItemIndicator>
-            </Menu.CheckboxItem>
-            <Menu.CheckboxItem
-              key="show-other-notes"
-              checked={native}
-              onCheckedChange={setNative}
-              justify="space-between"
-            >
-              <Menu.ItemTitle>Enable Native</Menu.ItemTitle>
-              <Menu.ItemIndicator>
-                <Check size={12} color="$color10" />
-              </Menu.ItemIndicator>
-            </Menu.CheckboxItem>
+                    <Menu.Label padding={5} color="$color9" size="$3" select="none">
+                      Note settings
+                    </Menu.Label>
+                    <Menu.Item
+                      onSelect={onSelect}
+                      key="create-note"
+                      textValue="Create note"
+                      justify="space-between"
+                    >
+                      <Menu.ItemTitle>Create note</Menu.ItemTitle>
+                      <Menu.ItemIcon>
+                        <FilePlus size={14} color="$color10" />
+                      </Menu.ItemIcon>
+                    </Menu.Item>
+                    <Menu.Item
+                      onSelect={onSelect}
+                      key="delete-all-notes"
+                      textValue="Delete all notes"
+                      justify="space-between"
+                    >
+                      <Menu.ItemTitle>Delete all notes</Menu.ItemTitle>
+                      <Menu.ItemIcon>
+                        <Trash2 size={14} color="$color10" />
+                      </Menu.ItemIcon>
+                    </Menu.Item>
+                    <Menu.Item
+                      onSelect={onSelect}
+                      key="sync-all"
+                      textValue="Sync notes"
+                      justify="space-between"
+                    >
+                      <Menu.ItemTitle>Sync notes</Menu.ItemTitle>
+                      <Menu.ItemIcon>
+                        <RefreshCw size={14} color="$color10" />
+                      </Menu.ItemIcon>
+                    </Menu.Item>
+                  </Menu.SubContent>
+                </Menu.Portal>
+              </Menu.Sub>
+
+              <Menu.Separator />
+
+              <Menu.CheckboxItem
+                key="show-hidden"
+                checked={bookmarksChecked}
+                onCheckedChange={setBookmarksChecked}
+                justify="space-between"
+              >
+                <Menu.ItemTitle>Mark as read</Menu.ItemTitle>
+                <Menu.ItemIndicator>
+                  <Check size={12} color="$color10" />
+                </Menu.ItemIndicator>
+              </Menu.CheckboxItem>
+              <Menu.CheckboxItem
+                key="show-other-notes"
+                checked={native}
+                onCheckedChange={setNative}
+                justify="space-between"
+              >
+                <Menu.ItemTitle>Enable Native</Menu.ItemTitle>
+                <Menu.ItemIndicator>
+                  <Check size={12} color="$color10" />
+                </Menu.ItemIndicator>
+              </Menu.CheckboxItem>
+            </Menu.ScrollView>
           </Menu.Content>
         </Menu.Portal>
       </Menu>

package/src/PopoverDemo.tsx

@@ -1,4 +1,9 @@
-import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from '@tamagui/lucide-icons'
+import {
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronUp,
+} from '@tamagui/lucide-icons-2'
 import { useState } from 'react'
 import type { PopoverProps } from 'tamagui'
 import {

package/src/ProgressDemo.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Button, Paragraph, Progress, Slider, Theme, XStack, YStack } from 'tamagui'
-import { Play, RotateCcw } from '@tamagui/lucide-icons'
+import { Play, RotateCcw } from '@tamagui/lucide-icons-2'
 
 export function ProgressDemo() {
   const [key, setKey] = React.useState(0)

package/src/SelectDemo.tsx

@@ -1,4 +1,4 @@
-import { Check, ChevronDown, ChevronUp } from '@tamagui/lucide-icons'
+import { Check, ChevronDown, ChevronUp } from '@tamagui/lucide-icons-2'
 import React from 'react'
 
 import type { FontSizeTokens, SelectProps } from 'tamagui'
@@ -74,7 +74,7 @@ export function SelectDemoContents(
         </Sheet>
       </Adapt>
 
-      <Select.Content zIndex={200000}>
+      <Select.Content>
         <Select.ScrollUpButton
           items="center"
           justify="center"
@@ -101,7 +101,7 @@ export function SelectDemoContents(
           borderColor="$borderColor"
         >
           <Select.Group>
-            <Select.Label>Fruits</Select.Label>
+            <Select.Label fontWeight="700">Fruits</Select.Label>
             {/* for longer lists memoizing these is useful */}
             {React.useMemo(
               () =>

package/src/SheetDemo.tsx

@@ -1,4 +1,4 @@
-import { ChevronDown, ChevronUp } from '@tamagui/lucide-icons'
+import { ChevronDown, ChevronUp } from '@tamagui/lucide-icons-2'
 import type { SheetProps } from '@tamagui/sheet'
 import { Sheet } from '@tamagui/sheet'
 import React, { memo } from 'react'

package/src/TabsAdvancedDemo.tsx

@@ -108,6 +108,7 @@ const TabsAdvancedBackground = () => {
           />
         )}
       </AnimatePresence>
+
       <AnimatePresence>
         {activeAt && (
           <TabsRovingIndicator
@@ -120,6 +121,7 @@ const TabsAdvancedBackground = () => {
           />
         )}
       </AnimatePresence>
+
       <YStack position="relative">
         <Tabs.List
           loop={false}
@@ -129,7 +131,6 @@ const TabsAdvancedBackground = () => {
         >
           <Tabs.Tab
             unstyled
-            paddingVertical="$2"
             paddingHorizontal="$3"
             value="tab1"
             onInteraction={handleOnInteraction}
@@ -138,7 +139,6 @@ const TabsAdvancedBackground = () => {
           </Tabs.Tab>
           <Tabs.Tab
             unstyled
-            paddingVertical="$2"
             paddingHorizontal="$3"
             value="tab2"
             onInteraction={handleOnInteraction}
@@ -147,7 +147,6 @@ const TabsAdvancedBackground = () => {
           </Tabs.Tab>
           <Tabs.Tab
             unstyled
-            paddingVertical="$2"
             paddingHorizontal="$3"
             value="tab3"
             onInteraction={handleOnInteraction}
@@ -260,34 +259,37 @@ const TabsAdvancedUnderline = () => {
           <Tabs.Tab
             unstyled
             paddingHorizontal="$3"
-            paddingVertical="$2"
             value="tab1"
             onInteraction={handleOnInteraction}
           >
-            <SizableText>Profile</SizableText>
+            <SizableText select="none" cursor="default">
+              Profile
+            </SizableText>
           </Tabs.Tab>
           <Tabs.Tab
             unstyled
             paddingHorizontal="$3"
-            paddingVertical="$2"
             value="tab2"
             onInteraction={handleOnInteraction}
           >
-            <SizableText>Connections</SizableText>
+            <SizableText select="none" cursor="default">
+              Connections
+            </SizableText>
           </Tabs.Tab>
           <Tabs.Tab
             unstyled
             paddingHorizontal="$3"
-            paddingVertical="$2"
             value="tab3"
             onInteraction={handleOnInteraction}
           >
-            <SizableText>Notifications</SizableText>
+            <SizableText select="none" cursor="default">
+              Notifications
+            </SizableText>
           </Tabs.Tab>
         </Tabs.List>
       </YStack>
 
-      <AnimatePresence exitBeforeEnter custom={{ direction }} initial={false}>
+      <AnimatePresence mode="wait" custom={{ direction }} initial={false}>
         <AnimatedYStack key={currentTab}>
           <Tabs.Content
             value={currentTab}
@@ -318,7 +320,7 @@ const TabsRovingIndicator = ({ active, ...props }: { active?: boolean } & ViewPr
         opacity: 0,
       }}
       {...(active && {
-        backgroundColor: '$color8',
+        backgroundColor: '$color5',
         opacity: 0.6,
       })}
       {...props}