@idealyst/components 1.0.82 → 1.0.84

package/src/Menu/MenuItem.native.tsx

@@ -0,0 +1,66 @@
+import React, { isValidElement, forwardRef, ComponentRef } from 'react';
+import { Pressable, Text, View } from 'react-native';
+import { Icon } from '../Icon';
+import { menuItemStyles } from './MenuItem.styles';
+import type { MenuItem as MenuItemType, MenuSizeVariant } from './types';
+import MaterialDesignIcons from '@react-native-vector-icons/material-design-icons';
+
+interface MenuItemProps {
+  item: MenuItemType;
+  onPress: (item: MenuItemType) => void;
+  size?: MenuSizeVariant;
+  testID?: string;
+}
+
+const MenuItem = forwardRef<ComponentRef<typeof Pressable>, MenuItemProps>(({ item, onPress, size = 'md', testID }, ref) => {
+  // Initialize styles with useVariants
+  menuItemStyles.useVariants({
+    size,
+    disabled: Boolean(item.disabled),
+    intent: item.intent || 'neutral',
+  });
+
+  const renderIcon = () => {
+    if (!item.icon) return null;
+
+    if (typeof item.icon === 'string') {
+      return (
+        <MaterialDesignIcons
+          name={item.icon as any}
+          style={menuItemStyles.icon}
+        />
+      );
+    } else if (isValidElement(item.icon)) {
+      return item.icon;
+    }
+    return null;
+  };
+
+  return (
+    <Pressable
+      ref={ref}
+      style={menuItemStyles.item}
+      onPress={() => onPress(item)}
+      disabled={item.disabled}
+      accessibilityRole="menuitem"
+      accessibilityState={{
+        disabled: item.disabled,
+      }}
+      android_ripple={{ color: 'rgba(0, 0, 0, 0.1)' }}
+      testID={testID}
+    >
+      {item.icon && (
+        <View>
+          {renderIcon()}
+        </View>
+      )}
+      <Text style={menuItemStyles.label}>
+        {item.label}
+      </Text>
+    </Pressable>
+  );
+});
+
+MenuItem.displayName = 'MenuItem';
+
+export default MenuItem;

package/src/Menu/MenuItem.styles.tsx

@@ -0,0 +1,119 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { Theme } from '@idealyst/theme';
+import { buildSizeVariants } from '../utils/buildSizeVariants';
+
+// Styles are inlined here instead of in @idealyst/theme because Unistyles' Babel transform on native cannot resolve function calls to extract variant structures.
+// @ts-ignore - TS language server needs restart to pick up theme structure changes
+export const menuItemStyles = StyleSheet.create((theme: Theme) => {
+    return {
+        item: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            backgroundColor: 'transparent',
+            borderRadius: 4,
+            minHeight: 44,
+            _web: {
+                cursor: 'pointer',
+                border: 'none',
+                outline: 'none',
+                transition: 'background-color 0.2s ease',
+                textAlign: 'left',
+                _hover: {
+                    backgroundColor: theme.colors.surface.secondary,
+                },
+            },
+            variants: {
+                size: buildSizeVariants(theme, 'menu', (size) => ({
+                    paddingVertical: size.paddingVertical,
+                    paddingHorizontal: size.paddingHorizontal,
+                })),
+                disabled: {
+                    true: {
+                        opacity: 0.5,
+                        _web: {
+                            cursor: 'not-allowed',
+                        },
+                    },
+                    false: {},
+                },
+                intent: {
+                    primary: {
+                        _web: {
+                            _hover: {
+                                backgroundColor: theme.intents.primary.light,
+                                color: theme.intents.primary.primary,
+                            },
+                        },
+                    },
+                    neutral: {},
+                    success: {
+                        _web: {
+                            _hover: {
+                                backgroundColor: theme.intents.success.light,
+                                color: theme.intents.success.primary,
+                            },
+                        },
+                    },
+                    error: {
+                        _web: {
+                            _hover: {
+                                backgroundColor: theme.intents.error.light,
+                                color: theme.intents.error.primary,
+                            },
+                        },
+                    },
+                    warning: {
+                        _web: {
+                            _hover: {
+                                backgroundColor: theme.intents.warning.light,
+                                color: theme.intents.warning.primary,
+                            },
+                        },
+                    },
+                    info: {
+                        _web: {
+                            _hover: {
+                                backgroundColor: theme.intents.info.light,
+                                color: theme.intents.info.primary,
+                            },
+                        },
+                    },
+                },
+            },
+            compoundVariants: [
+                {
+                    disabled: true,
+                    styles: {
+                        _web: {
+                            _hover: {
+                                backgroundColor: 'transparent',
+                            },
+                        },
+                    },
+                },
+            ],
+        },
+        icon: {
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexShrink: 0,
+            marginRight: 12,
+            variants: {
+                size: buildSizeVariants(theme, 'menu', (size) => ({
+                    width: size.iconSize,
+                    height: size.iconSize,
+                    fontSize: size.iconSize,
+                }))
+            },
+        },
+        label: {
+            flex: 1,
+            color: theme.colors.text.primary,
+            variants: {
+                size: buildSizeVariants(theme, 'menu', (size) => ({
+                    fontSize: size.labelFontSize,
+                })),
+            },
+        },
+    };
+});

package/src/Menu/MenuItem.web.tsx

@@ -0,0 +1,67 @@
+import React, { isValidElement } from 'react';
+import { getWebProps } from 'react-native-unistyles/web';
+import { menuItemStyles } from './MenuItem.styles';
+import type { MenuItem as MenuItemType, MenuSizeVariant } from './types';
+import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
+import { resolveIconPath, isIconName } from '../Icon/icon-resolver';
+
+interface MenuItemProps {
+  item: MenuItemType;
+  onPress: (item: MenuItemType) => void;
+  size?: MenuSizeVariant;
+  testID?: string;
+}
+
+const MenuItem: React.FC<MenuItemProps> = ({ item, onPress, size = 'md', testID }) => {
+  // Initialize styles with useVariants
+  menuItemStyles.useVariants({
+    size,
+    disabled: Boolean(item.disabled),
+    intent: item.intent || 'neutral',
+  });
+
+  const itemProps = getWebProps([menuItemStyles.item]);
+  const iconProps = getWebProps([menuItemStyles.icon]);
+  const labelProps = getWebProps([menuItemStyles.label]);
+
+  const renderIcon = () => {
+    if (!item.icon) return null;
+
+    if (isIconName(item.icon)) {
+      // Resolve icon name to path and render with IconSvg
+      const iconPath = resolveIconPath(item.icon);
+      return (
+        <IconSvg
+          path={iconPath}
+          aria-label={item.icon}
+        />
+      );
+    } else if (isValidElement(item.icon)) {
+      // Render custom component as-is
+      return item.icon;
+    }
+
+    return null;
+  };
+
+  return (
+    <button
+      {...itemProps}
+      onClick={() => onPress(item)}
+      disabled={item.disabled}
+      role="menuitem"
+      data-testid={testID}
+    >
+      {item.icon && (
+        <span {...iconProps}>
+          {renderIcon()}
+        </span>
+      )}
+      <span {...labelProps}>
+        {item.label}
+      </span>
+    </button>
+  );
+};
+
+export default MenuItem;

package/src/Menu/index.native.ts

@@ -0,0 +1,3 @@
+export { default } from './Menu.native';
+export { default as Menu } from './Menu.native';
+export * from './types';

package/src/Menu/index.ts

@@ -0,0 +1,3 @@
+export { default } from './Menu.web';
+export { default as Menu } from './Menu.web';
+export * from './types';

package/src/Menu/index.web.ts

@@ -0,0 +1,3 @@
+export { default } from './Menu.web';
+export { default as Menu } from './Menu.web';
+export * from './types';

package/src/Menu/types.ts

@@ -0,0 +1,30 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { IconName } from '../Icon/icon-types';
+import { Intent, Size } from '@idealyst/theme';
+
+// Component-specific type aliases for future extensibility
+export type MenuIntentVariant = Intent;
+export type MenuSizeVariant = Size;
+export type MenuPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'right';
+
+export interface MenuItem {
+  id: string;
+  label: string;
+  onClick?: () => void;
+  disabled?: boolean;
+  icon?: IconName | React.ReactNode;
+  intent?: MenuIntentVariant;
+  separator?: boolean;
+}
+
+export interface MenuProps {
+  children: React.ReactNode;
+  items: MenuItem[];
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  placement?: MenuPlacement;
+  closeOnSelection?: boolean;
+  size?: MenuSizeVariant;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}

package/src/Popover/Popover.native.tsx

@@ -1,9 +1,12 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState, forwardRef } from 'react';
 import { Modal, View, TouchableWithoutFeedback, BackHandler, Dimensions } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { PopoverProps } from './types';
 import { popoverStyles } from './Popover.styles';
+import { calculateSmartPosition, calculateAvailableHeight } from '../utils/positionUtils.native';
+import { BoundedModalContent } from '../internal/BoundedModalContent.native';
 
-const Popover: React.FC<PopoverProps> = ({
+const Popover = forwardRef<View, PopoverProps>(({
   open,
   onOpenChange,
   anchor,
@@ -11,11 +14,28 @@ const Popover: React.FC<PopoverProps> = ({
   placement = 'bottom',
   offset = 8,
   closeOnClickOutside = true,
-  showArrow = false, // Arrows are complex on native, disabled by default
+  showArrow = false,
   style,
   testID,
-}) => {
+}, ref) => {
   const popoverRef = useRef<View>(null);
+  const [popoverPosition, setPopoverPosition] = useState({ top: 0, left: 0, width: 0 });
+  const [popoverSize, setPopoverSize] = useState({ width: 0, height: 0 });
+  const anchorMeasurements = useRef({ x: 0, y: 0, width: 0, height: 0 });
+  const insets = useSafeAreaInsets();
+
+  // Apply variants
+  popoverStyles.useVariants({});
+
+  // Determine if anchor is a ref object
+  const anchorRefToUse = React.useMemo(() => {
+    if (!anchor || typeof anchor !== 'object') return null;
+    // Check if it has 'current' property (ref object)
+    if ('current' in anchor) {
+      return anchor as React.RefObject<any>;
+    }
+    return null;
+  }, [anchor]);
 
   // Handle Android back button
   useEffect(() => {
@@ -30,30 +50,76 @@ const Popover: React.FC<PopoverProps> = ({
     return () => backHandler.remove();
   }, [open, onOpenChange]);
 
+  // Measure anchor position when opening
+  useEffect(() => {
+    if (open && anchorRefToUse?.current) {
+      anchorRefToUse.current?.measureInWindow((x: number, y: number, width: number, height: number) => {
+        anchorMeasurements.current = { x, y, width, height };
+        calculatePopoverPosition(x, y, width, height);
+      });
+    }
+  }, [open, placement, anchorRefToUse]);
+
+  // Recalculate position when popover size changes
+  useEffect(() => {
+    if (open && popoverSize.width > 0 && popoverSize.height > 0) {
+      const { x, y, width, height } = anchorMeasurements.current;
+      if (x > 0 || y > 0) {
+        calculatePopoverPosition(x, y, width, height);
+      }
+    }
+  }, [popoverSize, open]);
+
+  const calculatePopoverPosition = (x: number, y: number, width: number, height: number) => {
+    // Use measured size if available, otherwise use estimates
+    const popoverWidth = popoverSize.width || 200;
+    const desiredMaxHeight = 500; // Maximum height we want for popovers
+
+    // For flip detection, use maxHeight so it properly detects when there's not enough space
+    // But if we have a measured size that's SMALLER than maxHeight, use that for final positioning
+    // to avoid unnecessary gaps (this happens when content naturally fits)
+    const heightForPositioning = popoverSize.height > 0 && popoverSize.height < desiredMaxHeight
+      ? popoverSize.height
+      : desiredMaxHeight;
+
+    const desiredSize = {
+      width: popoverWidth,
+      height: heightForPositioning
+    };
+
+    // Use smart positioning with boundary detection and flipping
+    const position = calculateSmartPosition(
+      { x, y, width, height },
+      desiredSize,
+      placement,
+      offset,
+      false,
+      insets
+    );
+
+    setPopoverPosition({ top: position.top, left: position.left, width });
+  };
+
   const handleBackdropPress = () => {
     if (closeOnClickOutside) {
       onOpenChange(false);
     }
   };
 
-  if (!open) return null;
-
-  // For React Native, we simplify positioning - center the popover
-  // More complex anchor positioning would require measuring anchor positions
-  // which is challenging cross-platform
-  const screenDimensions = Dimensions.get('window');
-  const popoverStyle = [
-    popoverStyles.container,
-    {
-      // Center on screen as a simplified approach
-      position: 'absolute',
-      top: screenDimensions.height * 0.4,
-      left: 20,
-      right: 20,
-      maxWidth: screenDimensions.width - 40,
-    },
-    style,
-  ];
+  const handlePopoverLayout = (event: any) => {
+    const { width, height } = event.nativeEvent.layout;
+    // Only update if size has changed significantly (to avoid infinite loops)
+    if (Math.abs(width - popoverSize.width) > 1 || Math.abs(height - popoverSize.height) > 1) {
+      setPopoverSize({ width, height });
+    }
+  };
+
+  const { width: screenWidth } = Dimensions.get('window');
+  const maxPopoverWidth = screenWidth - 24; // 12px padding on each side
+
+  if (!open || popoverPosition.top === 0) {
+    return null;
+  }
 
   return (
     <Modal
@@ -65,23 +131,27 @@ const Popover: React.FC<PopoverProps> = ({
     >
       <TouchableWithoutFeedback onPress={handleBackdropPress}>
         <View style={popoverStyles.backdrop}>
-          <TouchableWithoutFeedback onPress={(e) => e.stopPropagation()}>
-            <View ref={popoverRef} style={popoverStyle}>
-              {showArrow && (
-                <View style={[
-                  popoverStyles.arrow,
-                  // Apply placement-based arrow positioning
-                ]} />
-              )}
+          <TouchableWithoutFeedback>
+            <BoundedModalContent
+              top={popoverPosition.top}
+              left={popoverPosition.left}
+              width={Math.min(popoverPosition.width || 200, maxPopoverWidth)}
+              maxHeight={500}
+              style={[popoverStyles.container, style]}
+              onLayout={handlePopoverLayout}
+            >
+              {showArrow && <View style={popoverStyles.arrow} />}
               <View style={popoverStyles.content}>
                 {children}
               </View>
-            </View>
+            </BoundedModalContent>
           </TouchableWithoutFeedback>
         </View>
       </TouchableWithoutFeedback>
     </Modal>
   );
-};
+});
+
+Popover.displayName = 'Popover';
 
 export default Popover;

package/src/Popover/Popover.styles.tsx

@@ -1,95 +1,128 @@
 import { StyleSheet } from 'react-native-unistyles';
+import { Theme, StylesheetStyles} from '@idealyst/theme';
 
-export const popoverStyles = StyleSheet.create((theme) => ({
-  container: {
-    backgroundColor: theme.colors?.surface?.primary || '#ffffff',
-    borderRadius: theme.borderRadius?.md || 8,
-    border: `1px solid ${theme.colors?.border?.primary || '#e5e7eb'}`,
-    boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
-    transition: 'opacity 150ms ease-out, transform 150ms ease-out',
-    transformOrigin: 'center center',
-  },
-  
-  content: {
-    padding: theme.spacing?.md || 12,
-  },
-  
-  arrow: {
-    position: 'absolute',
-    width: 12,
-    height: 12,
-    backgroundColor: theme.colors?.surface?.primary || '#ffffff',
-    transform: 'rotate(45deg)',
-    
-    variants: {
-      placement: {
+type PopoverPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
+
+type PopoverVariants = {
+    placement: PopoverPlacement;
+}
+
+export type ExpandedPopoverStyles = StylesheetStyles<keyof PopoverVariants>;
+
+export type PopoverStylesheet = {
+    container: ExpandedPopoverStyles;
+    content: ExpandedPopoverStyles;
+    arrow: ExpandedPopoverStyles;
+    backdrop: ExpandedPopoverStyles;
+}
+
+function createArrowPlacementVariants(theme: Theme) {
+    return {
         top: {
-          bottom: -6,
-          left: '50%',
-          marginLeft: -6,
+            bottom: -6,
+            _web: {
+                left: '50%',
+                marginLeft: -6,
+            },
         },
         'top-start': {
-          bottom: -6,
-          left: 16,
+            bottom: -6,
+            left: 16,
         },
         'top-end': {
-          bottom: -6,
-          right: 16,
+            bottom: -6,
+            right: 16,
         },
         bottom: {
-          top: -6,
-          left: '50%',
-          marginLeft: -6,
+            top: -6,
+            _web: {
+                left: '50%',
+                marginLeft: -6,
+            },
         },
         'bottom-start': {
-          top: -6,
-          left: 16,
+            top: -6,
+            left: 16,
         },
         'bottom-end': {
-          top: -6,
-          right: 16,
+            top: -6,
+            right: 16,
         },
         left: {
-          right: -6,
-          top: '50%',
-          marginTop: -6,
+            right: -6,
+            _web: {
+                top: '50%',
+                marginTop: -6,
+            },
         },
         'left-start': {
-          right: -6,
-          top: 16,
+            right: -6,
+            top: 16,
         },
         'left-end': {
-          right: -6,
-          bottom: 16,
+            right: -6,
+            bottom: 16,
         },
         right: {
-          left: -6,
-          top: '50%',
-          marginTop: -6,
+            left: -6,
+            _web: {
+                top: '50%',
+                marginTop: -6,
+            },
         },
         'right-start': {
-          left: -6,
-          top: 16,
+            left: -6,
+            top: 16,
         },
         'right-end': {
-          left: -6,
-          bottom: 16,
+            left: -6,
+            bottom: 16,
+        },
+    };
+}
+
+// Styles are inlined here instead of in @idealyst/theme because Unistyles' Babel
+// transform on native cannot resolve function calls to extract variant structures.
+// @ts-ignore - TS language server needs restart to pick up theme structure changes
+export const popoverStyles = StyleSheet.create((theme: Theme) => {
+  return {
+    container: {
+        backgroundColor: theme.colors.surface.primary,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: theme.colors.border.primary,
+        borderStyle: 'solid',
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.1,
+        shadowRadius: 12,
+        elevation: 8,
+        _web: {
+            border: `1px solid ${theme.colors.border.primary}`,
+            boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+            transition: 'opacity 150ms ease-out, transform 150ms ease-out',
+            transformOrigin: 'center center',
+        },
+    },
+    content: {
+        padding: 16,
+    },
+    arrow: {
+        position: 'absolute',
+        width: 12,
+        height: 12,
+        backgroundColor: theme.colors.surface.primary,
+        variants: {
+            placement: createArrowPlacementVariants(theme),
+        },
+        _web: {
+            transform: 'rotate(45deg)',
+            boxShadow: '-2px 2px 4px rgba(0, 0, 0, 0.1)',
         },
-      },
     },
-    
-    _web: {
-      boxShadow: '-2px 2px 4px rgba(0, 0, 0, 0.1)',
+    backdrop: {
+        flex: 1,
+        backgroundColor: 'transparent',
     },
-  },
-  
-  // Native-specific backdrop
-  backdrop: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    backgroundColor: 'transparent',
-  },
-}));
+  };
+});