@streamplace/components 0.8.8 → 0.8.11

package/src/components/ui/dropdown.tsx

@@ -1,23 +1,18 @@
-import BottomSheet, { BottomSheetView } from "@gorhom/bottom-sheet";
 import * as DropdownMenuPrimitive from "@rn-primitives/dropdown-menu";
 import {
   Check,
-  CheckCircle,
   ChevronDown,
   ChevronRight,
   ChevronUp,
-  Circle,
 } from "lucide-react-native";
-import React, { forwardRef, ReactNode, useRef } from "react";
+import React, { forwardRef, ReactNode } from "react";
 import {
   Platform,
-  Pressable,
   ScrollView,
   StyleSheet,
   useWindowDimensions,
   View,
 } from "react-native";
-import { zero } from "../..";
 import {
   a,
   borderRadius,
@@ -45,69 +40,45 @@ import { Text } from "./text";
 export const DropdownMenu = DropdownMenuPrimitive.Root;
 export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 export const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
-export const DropdownMenuSub = DropdownMenuPrimitive.Sub;
-export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-
-export const DropdownMenuBottomSheet = forwardRef<
-  any,
-  DropdownMenuPrimitive.ContentProps & {
-    overlayStyle?: any;
-    portalHost?: string;
-  }
->(function DropdownMenuBottomSheet(
-  { overlayStyle, portalHost, children, ...rest },
-  _ref,
-) {
-  // Use the primitives' context to know if open
-  const { open, onOpenChange } = DropdownMenuPrimitive.useRootContext();
-  const { zero: zt } = useTheme();
-  const sheetRef = useRef<BottomSheet>(null);
 
+export const DropdownMenuRadioGroup = forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioGroup>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioGroup>
+>(({ children, ...props }, ref) => {
   return (
-    <DropdownMenuPrimitive.Portal hostName={portalHost}>
-      <BottomSheet
-        ref={sheetRef}
-        enablePanDownToClose
-        enableDynamicSizing
-        enableContentPanningGesture={false}
-        backdropComponent={({ style }) => (
-          <Pressable
-            style={[style, StyleSheet.absoluteFill]}
-            onPress={() => onOpenChange?.(false)}
-          />
-        )}
-        onClose={() => onOpenChange?.(false)}
-        style={[overlayStyle, StyleSheet.flatten(rest.style)]}
-        backgroundStyle={[zt.bg.popover, a.radius.all.md, a.shadows.md, p[1]]}
-        handleIndicatorStyle={[
-          a.sizes.width[12],
-          a.sizes.height[1],
-          zt.bg.mutedForeground,
-        ]}
-      >
-        <BottomSheetView style={[px[4]]}>
-          {typeof children === "function"
-            ? children({ pressed: true })
-            : children}
-        </BottomSheetView>
-      </BottomSheet>
-    </DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.RadioGroup ref={ref} {...props}>
+      {children}
+    </DropdownMenuPrimitive.RadioGroup>
   );
 });
 
+export const DropdownMenuSub = forwardRef<any, any>(
+  ({ children, ...props }, ref) => {
+    return (
+      <DropdownMenuPrimitive.Sub ref={ref} {...props}>
+        {children}
+      </DropdownMenuPrimitive.Sub>
+    );
+  },
+);
+
 export const DropdownMenuSubTrigger = forwardRef<
   any,
-  DropdownMenuPrimitive.SubTriggerProps & { inset?: boolean } & {
+  DropdownMenuPrimitive.SubTriggerProps & {
+    inset?: boolean;
+    subMenuTitle?: string;
+  } & {
     ref?: React.RefObject<DropdownMenuPrimitive.SubTriggerRef>;
     className?: string;
     inset?: boolean;
     children?: React.ReactNode;
   }
->(({ inset, children, ...props }, ref) => {
-  const { open } = DropdownMenuPrimitive.useSubContext();
+>(({ inset, children, subMenuTitle, ...props }, ref) => {
   const { icons } = useTheme();
+  const { open } = DropdownMenuPrimitive.useSubContext();
   const Icon =
     Platform.OS === "web" ? ChevronRight : open ? ChevronUp : ChevronDown;
+
   return (
     <TextClassContext.Provider
       value={objectFromObjects([
@@ -138,15 +109,17 @@ export const DropdownMenuSubTrigger = forwardRef<
 
 export const DropdownMenuSubContent = forwardRef<
   any,
-  DropdownMenuPrimitive.SubContentProps
->((props, ref) => {
+  DropdownMenuPrimitive.SubContentProps & { children?: ReactNode }
+>(({ children, ...props }, ref) => {
   const { zero: zt } = useTheme();
+
   return (
     <DropdownMenuPrimitive.SubContent
       ref={ref}
       style={[
         a.zIndex[50],
-        a.sizes.minWidth[32],
+        a.sizes.minWidth[64],
+        a.sizes.maxWidth[64],
         a.overflow.hidden,
         a.radius.all.md,
         a.borders.width.thin,
@@ -157,7 +130,9 @@ export const DropdownMenuSubContent = forwardRef<
         a.shadows.md,
       ]}
       {...props}
-    />
+    >
+      {children}
+    </DropdownMenuPrimitive.SubContent>
   );
 });
 
@@ -169,6 +144,9 @@ export const DropdownMenuContent = forwardRef<
   }
 >(({ overlayStyle, portalHost, style, children, ...props }, ref) => {
   const { zero: zt } = useTheme();
+  const { height } = useWindowDimensions();
+  const maxHeight = height * 0.9;
+
   return (
     <DropdownMenuPrimitive.Portal hostName={portalHost}>
       <DropdownMenuPrimitive.Overlay
@@ -182,8 +160,9 @@ export const DropdownMenuContent = forwardRef<
           style={
             [
               a.zIndex[50],
-              a.sizes.minWidth[32],
+              a.sizes.minWidth[64],
               a.sizes.maxWidth[64],
+              { maxHeight: maxHeight },
               a.overflow.hidden,
               a.radius.all.md,
               a.borders.width.thin,
@@ -196,7 +175,7 @@ export const DropdownMenuContent = forwardRef<
           }
           {...props}
         >
-          <ScrollView showsVerticalScrollIndicator={true}>
+          <ScrollView showsVerticalScrollIndicator={false}>
             {typeof children === "function"
               ? children({ pressed: false })
               : children}
@@ -215,7 +194,7 @@ export const DropdownMenuContentWithoutPortal = forwardRef<
   }
 >(
   (
-    { overlayStyle, maxHeightPercentage = 0.8, children, style, ...props },
+    { overlayStyle, maxHeightPercentage = 0.9, children, style, ...props },
     ref,
   ) => {
     const { theme } = useTheme();
@@ -234,8 +213,9 @@ export const DropdownMenuContentWithoutPortal = forwardRef<
           style={
             [
               { zIndex: 999999 },
-              a.sizes.minWidth[32],
+              a.sizes.minWidth[64],
               a.sizes.maxWidth[64],
+              { maxHeight: maxHeight },
               a.radius.all.md,
               a.borders.width.thin,
               { borderColor: theme.colors.border },
@@ -247,7 +227,7 @@ export const DropdownMenuContentWithoutPortal = forwardRef<
           }
           {...props}
         >
-          <ScrollView style={{ maxHeight }} showsVerticalScrollIndicator={true}>
+          <ScrollView showsVerticalScrollIndicator={false}>
             {typeof children === "function"
               ? children({ pressed: false })
               : children}
@@ -258,29 +238,32 @@ export const DropdownMenuContentWithoutPortal = forwardRef<
   },
 );
 
-/// Responsive Dropdown Menu Content. On mobile this will render a *bottom sheet* that is **portaled to the root of the app**.
-/// Prefer passing scoped content in as **otherwise it may crash the app**.
-export const ResponsiveDropdownMenuContent = forwardRef<any, any>(
-  ({ children, ...props }, ref) => {
-    const { width } = useWindowDimensions();
+export const ResponsiveDropdownMenuContent = forwardRef<
+  any,
+  any & { onModeChange?: (isSheet: boolean) => void }
+>(({ children, onModeChange, ...props }, ref) => {
+  const { width } = useWindowDimensions();
+
+  const isBottomSheet =
+    Platform.OS !== "web" || (Platform.OS === "web" && width <= 980);
 
-    // On web, you might want to always use the normal dropdown
-    const isBottomSheet = Platform.OS !== "web" && width < 800;
+  React.useEffect(() => {
+    onModeChange?.(isBottomSheet);
+  }, [isBottomSheet, onModeChange]);
 
-    if (isBottomSheet) {
-      return (
-        <DropdownMenuBottomSheet ref={ref} {...props}>
-          <ScrollView style={[zero.pb[12]]}>{children}</ScrollView>
-        </DropdownMenuBottomSheet>
-      );
-    }
+  if (isBottomSheet) {
     return (
-      <DropdownMenuContent ref={ref} {...props}>
+      <DropdownMenuContent align="start" ref={ref} {...props}>
         {children}
       </DropdownMenuContent>
     );
-  },
-);
+  }
+  return (
+    <DropdownMenuContent ref={ref} {...props}>
+      {children}
+    </DropdownMenuContent>
+  );
+});
 
 export const DropdownMenuItem = forwardRef<
   any,
@@ -288,7 +271,7 @@ export const DropdownMenuItem = forwardRef<
 >(({ inset, disabled, style, children, ...props }, ref) => {
   const { theme } = useTheme();
   return (
-    <Pressable {...props}>
+    <DropdownMenuPrimitive.Item ref={ref} {...props}>
       <TextClassContext.Provider
         value={objectFromObjects([
           { color: theme.colors.popoverForeground },
@@ -316,7 +299,7 @@ export const DropdownMenuItem = forwardRef<
           )}
         </View>
       </TextClassContext.Provider>
-    </Pressable>
+    </DropdownMenuPrimitive.Item>
   );
 });
 
@@ -328,6 +311,7 @@ export const DropdownMenuCheckboxItem = forwardRef<
   }
 >(({ children, checked, ...props }, ref) => {
   const { theme } = useTheme();
+
   return (
     <DropdownMenuPrimitive.CheckboxItem
       ref={ref}
@@ -348,19 +332,9 @@ export const DropdownMenuCheckboxItem = forwardRef<
       >
         {children}
         <View style={[pl[1], layout.position.absolute, right[1]]}>
-          {checked ? (
-            <CheckCircle
-              size={14}
-              strokeWidth={3}
-              color={theme.colors.foreground}
-            />
-          ) : (
-            <Circle
-              size={14}
-              strokeWidth={3}
-              color={theme.colors.mutedForeground}
-            />
-          )}
+          <DropdownMenuPrimitive.ItemIndicator>
+            <Check size={14} strokeWidth={3} color={theme.colors.foreground} />
+          </DropdownMenuPrimitive.ItemIndicator>
         </View>
       </View>
     </DropdownMenuPrimitive.CheckboxItem>
@@ -372,13 +346,16 @@ export const DropdownMenuRadioItem = forwardRef<
   DropdownMenuPrimitive.RadioItemProps & {
     ref?: React.RefObject<DropdownMenuPrimitive.RadioItemRef>;
     children?: React.ReactNode;
+    value?: string;
   }
->(({ children, ...props }, ref) => {
+>(({ children, value, ...props }, ref) => {
   const { theme } = useTheme();
+
   return (
     <DropdownMenuPrimitive.RadioItem
       ref={ref}
       closeOnPress={props.closeOnPress || false}
+      value={value}
       {...props}
     >
       <View
@@ -504,3 +481,6 @@ export const DropdownMenuInfo = forwardRef<any, any>(
     );
   },
 );
+
+// Re-export DropdownMenuBottomSheet for compatibility with native
+export const DropdownMenuBottomSheet = DropdownMenuContent;

package/src/components/ui/index.ts

@@ -14,6 +14,7 @@ export * from "./info-box";
 export * from "./info-row";
 export * from "./input";
 export * from "./loader";
+export * from "./menu";
 export * from "./resizeable";
 export * from "./slider";
 export * from "./text";

package/src/components/ui/menu.tsx

@@ -0,0 +1,171 @@
+import { forwardRef, ReactNode } from "react";
+import { Platform, View, ViewStyle } from "react-native";
+import {
+  a,
+  borderRadius,
+  fontSize,
+  gap,
+  mt,
+  mx,
+  p,
+  pb,
+  pl,
+  pr,
+  pt,
+  px,
+  py,
+} from "../../lib/theme/atoms";
+import { mergeStyles, useTheme } from "../../ui";
+import { Text } from "./text";
+
+export interface MenuContainerProps {
+  children: ReactNode;
+  style?: ViewStyle;
+}
+
+export const MenuContainer = forwardRef<View, MenuContainerProps>(
+  ({ children, style }, ref) => {
+    const { theme } = useTheme();
+    return (
+      <View ref={ref} style={[gap.all[4], mt[4], mx[2], style]}>
+        {children}
+      </View>
+    );
+  },
+);
+
+export interface MenuGroupProps {
+  children: ReactNode;
+  style?: ViewStyle;
+}
+
+export const MenuGroup = forwardRef<View, MenuGroupProps>(
+  ({ children, style }, ref) => {
+    const { theme } = useTheme();
+    return (
+      <View
+        ref={ref}
+        style={[
+          { backgroundColor: theme.colors.muted + "c0" },
+          Platform.OS === "web" ? [px[1], py[1]] : p[1],
+          gap.all[1],
+          { borderRadius: borderRadius.lg },
+          style,
+        ]}
+      >
+        {children}
+      </View>
+    );
+  },
+);
+
+export interface MenuItemProps {
+  children: ReactNode;
+  disabled?: boolean;
+  style?: ViewStyle;
+  onPress?: () => void;
+}
+
+export const MenuItem = forwardRef<View, MenuItemProps>(
+  ({ children, disabled, style }, ref) => {
+    const { theme } = useTheme();
+    return (
+      <View
+        ref={ref}
+        style={[
+          a.layout.flex.row,
+          a.layout.flex.alignCenter,
+          a.radius.all.sm,
+          py[1],
+          pl[3],
+          pr[2],
+          disabled && { opacity: 0.5 },
+          style,
+        ]}
+      >
+        {typeof children === "string" ? (
+          <Text style={{ color: theme.colors.popoverForeground }}>
+            {children}
+          </Text>
+        ) : (
+          children
+        )}
+      </View>
+    );
+  },
+);
+
+export interface MenuLabelProps {
+  children: ReactNode;
+  style?: ViewStyle;
+}
+
+export const MenuLabel = forwardRef<View, MenuLabelProps>(
+  ({ children, style }, ref) => {
+    const { theme } = useTheme();
+    return (
+      <Text
+        ref={ref as any}
+        style={mergeStyles(
+          px[4],
+          py[2],
+          { color: theme.colors.textMuted },
+          a.fontSize.base,
+          style,
+        )}
+      >
+        {children}
+      </Text>
+    );
+  },
+);
+
+export interface MenuSeparatorProps {
+  style?: ViewStyle;
+}
+
+export const MenuSeparator = forwardRef<View, MenuSeparatorProps>(
+  ({ style }, ref) => {
+    const { theme } = useTheme();
+    return (
+      <View
+        ref={ref}
+        style={[
+          mx[2],
+          {
+            height: 1,
+            backgroundColor: theme.colors.border,
+            marginVertical: 0,
+          },
+          style,
+        ]}
+      />
+    );
+  },
+);
+
+export interface MenuInfoProps {
+  description: string;
+  style?: ViewStyle;
+}
+
+export const MenuInfo = forwardRef<View, MenuInfoProps>(
+  ({ description, style }, ref) => {
+    const { theme } = useTheme();
+    return (
+      <Text
+        ref={ref as any}
+        style={mergeStyles(
+          { color: theme.colors.textMuted, marginTop: -8 },
+          pt[1],
+          pl[4],
+          pb[2],
+          fontSize.sm,
+          style,
+        )}
+      >
+        {description}
+      </Text>
+    );
+  },
+);

package/src/components/ui/resizeable.tsx

@@ -39,7 +39,7 @@ export function Resizable({
 }: ResizableChatSheetProps) {
   const { slideKeyboard } = useKeyboardSlide();
   const { bottom: safeBottom } = useSafeAreaInsets();
-  const MAX_HEIGHT = (SCREEN_HEIGHT - safeBottom) * 0.5;
+  const MAX_HEIGHT = (SCREEN_HEIGHT - safeBottom) * 0.55;
   const MIN_HEIGHT = -(SCREEN_HEIGHT - safeBottom) * 0.2;
   const COLLAPSE_HEIGHT = (SCREEN_HEIGHT - safeBottom) * 0.1;
 

package/src/components/ui/toast.tsx

@@ -880,13 +880,18 @@ export function Toast({
                     width: "100%",
                   }}
                 >
-                  <Button variant={buttonTypeMap[variant]} onPress={onAction}>
+                  <Button
+                    width="min"
+                    variant={buttonTypeMap[variant]}
+                    onPress={onAction}
+                  >
                     <Text style={{ color: theme.colors.foreground }}>
                       {actionLabel}
                     </Text>
                   </Button>
                   <Button
                     variant="secondary"
+                    width="min"
                     onPress={() => onOpenChange(false)}
                   >
                     <Text style={{ color: theme.colors.foreground }}>