@idealyst/components 1.0.82 → 1.0.84

package/src/List/ListItem.web.tsx

@@ -0,0 +1,110 @@
+import React, { isValidElement } from 'react';
+import { getWebProps } from 'react-native-unistyles/web';
+import { listStyles } from './List.styles';
+import type { ListItemProps } from './types';
+import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
+import { resolveIconPath, isIconName } from '../Icon/icon-resolver';
+import { useListContext } from './ListContext';
+
+const ListItem: React.FC<ListItemProps> = ({
+  id,
+  label,
+  children,
+  leading,
+  trailing,
+  active = false,
+  selected = false,
+  disabled = false,
+  indent = 0,
+  size,
+  onPress,
+  style,
+  testID,
+}) => {
+  const listContext = useListContext();
+  const isClickable = !disabled && !!onPress;
+
+  // Use explicit size prop, fallback to context size, then default
+  const effectiveSize = size ?? listContext.size ?? 'md';
+  const effectiveVariant = listContext.type ?? 'default';
+
+  // Apply types
+  listStyles.useVariants({
+    size: effectiveSize,
+    active,
+    selected,
+    disabled,
+    clickable: isClickable,
+  });
+
+  const itemProps = getWebProps([listStyles.item, style]);
+  const labelProps = getWebProps([listStyles.label]);
+  const leadingProps = getWebProps([listStyles.leading]);
+  const trailingProps = getWebProps([listStyles.trailing]);
+  const trailingIconProps = getWebProps([listStyles.trailing, listStyles.trailingIcon]);
+
+  const handleClick = () => {
+    if (!disabled && onPress) {
+      onPress();
+    }
+  };
+
+  // Helper to render leading/trailing icons
+  const renderElement = (element: typeof leading | typeof trailing, props: any, isTrailing = false) => {
+    if (!element) return null;
+
+    if (isIconName(element)) {
+      const iconPath = resolveIconPath(element);
+      // Use trailingIconProps for trailing icons to apply size constraints
+      const iconPropsToUse = isTrailing ? trailingIconProps : props;
+      return (
+        <IconSvg
+          path={iconPath}
+          {...iconPropsToUse}
+          aria-label={element}
+        />
+      );
+    } else if (isValidElement(element)) {
+      return element;
+    }
+
+    return null;
+  };
+
+  const content = (
+    <>
+      {leading && renderElement(leading, leadingProps)}
+
+      <div {...getWebProps([listStyles.labelContainer])}>
+        {label && (
+          <span {...labelProps}>{label}</span>
+        )}
+        {children}
+      </div>
+
+      {trailing && (
+        <div {...trailingProps}>
+          {renderElement(trailing, trailingIconProps, true)}
+        </div>
+      )}
+    </>
+  );
+
+  const indentStyle = indent > 0 ? { paddingLeft: `${indent * 16}px` } : {};
+
+  return (
+    <div
+      {...itemProps}
+      style={{ ...indentStyle }}
+      onClick={isClickable ? handleClick : undefined}
+      role="listitem"
+      aria-selected={selected}
+      aria-disabled={disabled}
+      data-testid={testID}
+    >
+      {content}
+    </div>
+  );
+};
+
+export default ListItem;

package/src/List/ListSection.native.tsx

@@ -0,0 +1,31 @@
+import React, { forwardRef } from 'react';
+import { View, Text } from 'react-native';
+import { listStyles } from './List.styles';
+import type { ListSectionProps } from './types';
+
+const ListSection = forwardRef<View, ListSectionProps>(({
+  title,
+  children,
+  collapsed = false,
+  style,
+  testID,
+}, ref) => {
+  return (
+    <View ref={ref} style={[listStyles.section, style]} testID={testID}>
+      {title && (
+        <Text style={listStyles.sectionTitle}>
+          {title}
+        </Text>
+      )}
+      {!collapsed && (
+        <View style={listStyles.sectionContent}>
+          {children}
+        </View>
+      )}
+    </View>
+  );
+});
+
+ListSection.displayName = 'ListSection';
+
+export default ListSection;

package/src/List/ListSection.web.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { getWebProps } from 'react-native-unistyles/web';
+import { listStyles } from './List.styles';
+import type { ListSectionProps } from './types';
+
+const ListSection: React.FC<ListSectionProps> = ({
+  title,
+  children,
+  collapsed = false,
+  style,
+  testID,
+}) => {
+  const sectionProps = getWebProps([listStyles.section, style as any]);
+  const titleProps = getWebProps([listStyles.sectionTitle]);
+  const contentProps = getWebProps([listStyles.sectionContent]);
+
+  return (
+    <div {...sectionProps} data-testid={testID}>
+      {title && (
+        <div {...titleProps}>
+          {title}
+        </div>
+      )}
+      {!collapsed && (
+        <div {...contentProps}>
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ListSection;

package/src/List/index.native.tsx

@@ -0,0 +1,5 @@
+export { default } from './List.native';
+export { default as List } from './List.native';
+export { default as ListItem } from './ListItem.native';
+export { default as ListSection } from './ListSection.native';
+export * from './types';

package/src/List/index.ts

@@ -0,0 +1,5 @@
+export { default } from './List.web';
+export { default as List } from './List.web';
+export { default as ListItem } from './ListItem.web';
+export { default as ListSection } from './ListSection.web';
+export * from './types';

package/src/List/index.web.tsx

@@ -0,0 +1,5 @@
+export { default } from './List.web';
+export { default as List } from './List.web';
+export { default as ListItem } from './ListItem.web';
+export { default as ListSection } from './ListSection.web';
+export * from './types';

package/src/List/types.ts

@@ -0,0 +1,42 @@
+import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
+import type { ReactNode } from 'react';
+import type { IconName } from '../Icon/icon-types';
+import { Size } from '@idealyst/theme';
+
+// Component-specific type aliases for future extensibility
+export type ListSizeVariant = Size;
+export type ListType = 'default' | 'bordered' | 'divided';
+
+export interface ListItemProps {
+  id?: string;
+  label?: string;
+  children?: ReactNode;
+  leading?: IconName | ReactNode;
+  trailing?: IconName | ReactNode;
+  active?: boolean;
+  selected?: boolean;
+  disabled?: boolean;
+  indent?: number;
+  size?: ListSizeVariant;
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export interface ListProps {
+  children: ReactNode;
+  type?: ListType;
+  size?: ListSizeVariant;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+  scrollable?: boolean;
+  maxHeight?: number | string;
+}
+
+export interface ListSectionProps {
+  title?: string;
+  children: ReactNode;
+  collapsed?: boolean;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}

package/src/Menu/Menu.native.tsx

@@ -0,0 +1,150 @@
+import React, { useRef, useState, isValidElement, cloneElement, forwardRef, useEffect } from 'react';
+import {
+  View,
+  Modal,
+  Pressable,
+  ScrollView,
+} from 'react-native';
+import { menuStyles } from './Menu.styles';
+import type { MenuProps, MenuItem as MenuItemType } from './types';
+import MenuItem from './MenuItem.native';
+import useMergeRefs from '../hooks/useMergeRefs';
+import { BoundedModalContent } from '../internal/BoundedModalContent.native';
+import { useSmartPosition } from '../hooks/useSmartPosition.native';
+
+const Menu = forwardRef<View, MenuProps>(({
+  children,
+  items,
+  open,
+  onOpenChange,
+  placement = 'bottom-start',
+  style,
+  size,
+  testID,
+}, ref) => {
+  const {
+    position: menuPosition,
+    size: menuSize,
+    isPositioned,
+    anchorRef: triggerRef,
+    measureAndPosition,
+    handleLayout: handleMenuLayout,
+    reset: resetPosition,
+  } = useSmartPosition({
+    placement,
+    offset: 8,
+    maxHeight: 300,
+    matchWidth: false,
+  });
+
+  const mergedTriggerRef = useMergeRefs(ref, triggerRef);
+
+  // Reset position when menu closes
+  useEffect(() => {
+    if (!open) {
+      resetPosition();
+    }
+  }, [open]);
+
+  const handleTriggerPress = () => {
+    if (!onOpenChange) return;
+
+    if (!open) {
+      // Measure and position menu
+      measureAndPosition();
+      onOpenChange(true);
+    } else {
+      onOpenChange(false);
+    }
+  };
+
+  const handleItemPress = (item: MenuItemType) => {
+    if (item.disabled) return;
+
+    item.onClick?.();
+    onOpenChange?.(false);
+  };
+
+  const handleBackdropPress = () => {
+    onOpenChange?.(false);
+  };
+
+  const renderMenu = () => {
+    if (!open) return null;
+
+    // Show menu only after it has been measured AND positioned
+    const isMeasured = menuSize.height > 0;
+    const shouldShow = isMeasured && isPositioned;
+
+    return (
+      <Modal
+        visible={true}
+        transparent
+        animationType="none"
+        onRequestClose={() => onOpenChange?.(false)}
+      >
+        <Pressable
+          style={{ flex: 1 }}
+          onPress={handleBackdropPress}
+        >
+          <BoundedModalContent
+            top={menuPosition.top}
+            left={menuPosition.left}
+            width={menuPosition.width}
+            maxHeight={300}
+            style={[
+              menuStyles.menu,
+              style,
+              { opacity: shouldShow ? 1 : 0 }
+            ]}
+            onLayout={handleMenuLayout}
+          >
+            <ScrollView
+              showsVerticalScrollIndicator={false}
+            >
+              {items.map((item, index) => {
+
+                return (
+                  <MenuItem
+                    key={item.id || index}
+                    item={item}
+                    onPress={handleItemPress}
+                    size={size}
+                    testID={testID ? `${testID}-item-${item.id || index}` : undefined}
+                  />
+                );
+              })}
+            </ScrollView>
+          </BoundedModalContent>
+        </Pressable>
+      </Modal>
+    );
+  };
+
+  // Clone the child element and merge onPress handler
+  const trigger = isValidElement(children)
+    ? cloneElement(children as React.ReactElement<any>, {
+        onPress: () => {
+          // Call original onPress if it exists
+          const originalOnPress = (children as any).props?.onPress;
+          originalOnPress?.();
+          // Then handle menu toggle
+          handleTriggerPress();
+        },
+      })
+    : children;
+
+  return (
+    <>
+      <View ref={mergedTriggerRef} collapsable={false}>
+        {trigger}
+      </View>
+
+      {renderMenu()}
+    </>
+  );
+});
+
+Menu.displayName = 'Menu';
+
+export default Menu;

package/src/Menu/Menu.styles.tsx

@@ -0,0 +1,185 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { Theme, StylesheetStyles, CompoundVariants, Intent, Size} from '@idealyst/theme';
+import { buildSizeVariants } from '../utils/buildSizeVariants';
+
+type MenuSize = Size;
+type MenuIntent = Intent;
+
+type MenuVariants = {
+    size: MenuSize;
+    intent: MenuIntent;
+    disabled: boolean;
+}
+
+export type ExpandedMenuStyles = StylesheetStyles<keyof MenuVariants>;
+
+export type MenuStylesheet = {
+    overlay: ExpandedMenuStyles;
+    menu: ExpandedMenuStyles;
+    separator: ExpandedMenuStyles;
+    item: ExpandedMenuStyles;
+    icon: ExpandedMenuStyles;
+    label: ExpandedMenuStyles;
+}
+
+/**
+ * Create size variants for menu item
+ */
+function createItemSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'menu', (size) => ({
+        paddingVertical: size.paddingVertical,
+        paddingHorizontal: size.paddingHorizontal,
+    }));
+}
+
+/**
+ * Get hover styles for menu item based on intent
+ */
+function getItemHoverStyles(theme: Theme, intent: MenuIntent) {
+    if (intent === 'neutral') {
+        return {};
+    }
+    const intentValue = theme.intents[intent];
+    return {
+        _web: {
+            _hover: {
+                backgroundColor: intentValue.light + '20',
+                color: intentValue.primary,
+            },
+        },
+    } as const;
+}
+
+/**
+ * Create compound variants for menu item
+ */
+function createItemCompoundVariants(theme: Theme): CompoundVariants<keyof MenuVariants> {
+    return [
+        {
+            disabled: true,
+            styles: {
+                _web: {
+                    _hover: {
+                        backgroundColor: 'transparent',
+                    },
+                },
+            },
+        },
+    ] as const;
+}
+
+/**
+ * Create size variants for icon
+ */
+function createIconSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'menu', (size) => ({
+        width: size.iconSize,
+        height: size.iconSize,
+        fontSize: size.iconSize,
+    }));
+}
+
+/**
+ * Create size variants for label
+ */
+function createLabelSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'menu', (size) => ({
+        fontSize: size.labelFontSize,
+    }));
+}
+
+const createItemStyles = (theme: Theme) => {
+    return ({ intent }: MenuVariants) => {
+        const hoverStyles = getItemHoverStyles(theme, intent);
+        return {
+            flexDirection: 'row',
+            alignItems: 'center',
+            backgroundColor: 'transparent',
+            borderRadius: 4,
+            minHeight: 44,
+            variants: {
+                size: createItemSizeVariants(theme),
+                disabled: {
+                    true: {
+                        opacity: 0.5,
+                        _web: {
+                            cursor: 'not-allowed',
+                        },
+                    },
+                    false: {},
+                },
+            },
+            compoundVariants: createItemCompoundVariants(theme),
+            _web: {
+                cursor: 'pointer',
+                border: 'none',
+                outline: 'none',
+                transition: 'background-color 0.2s ease',
+                textAlign: 'left',
+                _hover: {
+                    backgroundColor: theme.colors.surface.secondary,
+                },
+            },
+            ...hoverStyles,
+        } as const;
+    }
+}
+
+// Styles are inlined here instead of in @idealyst/theme because Unistyles' Babel transform on native cannot resolve function calls to extract variant structures.
+export const menuStyles = StyleSheet.create((theme: Theme) => {
+    return {
+        overlay: {
+            backgroundColor: 'transparent',
+            _web: {
+                position: 'fixed' as const,
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                zIndex: 999,
+            }
+        } as const,
+        menu: {
+            position: 'absolute',
+            zIndex: 1000,
+            backgroundColor: theme.colors.surface.primary,
+            borderWidth: 1,
+            borderStyle: 'solid',
+            borderColor: theme.colors.border.primary,
+            borderRadius: 8,
+            minWidth: 120,
+            maxWidth: 400,
+            padding: 4,
+            display: 'flex',
+            flexDirection: 'column',
+            _web: {
+                border: `1px solid ${theme.colors.border.primary}`,
+                boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+                width: 'fit-content',
+            },
+        } as const,
+        separator: {
+            height: 1,
+            backgroundColor: theme.colors.border.primary,
+            marginTop: 4,
+            marginBottom: 4,
+        },
+        item: createItemStyles(theme),
+        icon: {
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexShrink: 0,
+            marginRight: 8,
+            variants: {
+                size: createIconSizeVariants(theme),
+            } as const,
+        } as const,
+        label: {
+            flex: 1,
+            color: theme.colors.text.primary,
+            variants: {
+                size: createLabelSizeVariants(theme),
+            } as const,
+        } as const,
+    } as const;
+});

package/src/Menu/Menu.web.tsx

@@ -0,0 +1,99 @@
+import React, { useRef, forwardRef } from 'react';
+import { getWebProps } from 'react-native-unistyles/web';
+import { menuStyles } from './Menu.styles';
+import type { MenuProps } from './types';
+import MenuItem from './MenuItem.web';
+import useMergeRefs from '../hooks/useMergeRefs';
+import { PositionedPortal } from '../internal/PositionedPortal';
+
+const Menu = forwardRef<HTMLDivElement, MenuProps>(({
+  children,
+  items,
+  open = false,
+  onOpenChange,
+  placement = 'bottom-start',
+  closeOnSelection = true,
+  size = 'md',
+  style,
+  testID,
+}, ref) => {
+  const triggerRef = useRef<HTMLDivElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  menuStyles.useVariants({
+    size,
+  });
+
+  const overlayProps = getWebProps([menuStyles.overlay]);
+  const menuProps = getWebProps([menuStyles.menu, style as any]);
+  const separatorProps = getWebProps([menuStyles.separator]);
+
+  const handleTriggerClick = () => {
+    onOpenChange?.(!open);
+  };
+
+  const handleItemClick = (item: typeof items[0]) => {
+    if (item.disabled) return;
+
+    item.onClick?.();
+
+    if (closeOnSelection) {
+      onOpenChange?.(false);
+    }
+  };
+
+  const mergedMenuRef = useMergeRefs(ref, menuRef);
+
+  return (
+    <>
+      <div ref={triggerRef} onClick={handleTriggerClick} style={{ display: 'inline-block' }}>
+        {children}
+      </div>
+
+      {open && <div {...overlayProps} />}
+
+      <PositionedPortal
+        open={open}
+        anchor={triggerRef}
+        placement={placement}
+        offset={4}
+        onClickOutside={() => onOpenChange?.(false)}
+        onEscapeKey={() => onOpenChange?.(false)}
+        zIndex={1000}
+      >
+        <div
+          {...menuProps}
+          ref={mergedMenuRef}
+          role="menu"
+          data-testid={testID}
+        >
+          {items.map((item, index) => {
+            if (item.separator) {
+              return (
+                <div
+                  key={`separator-${index}`}
+                  {...separatorProps}
+                  role="separator"
+                />
+              );
+            }
+
+            return (
+              <MenuItem
+                key={item.id || index}
+                item={item}
+                onPress={handleItemClick}
+                size={size}
+                testID={testID ? `${testID}-item-${item.id || index}` : undefined}
+              />
+            );
+          })}
+        </div>
+      </PositionedPortal>
+    </>
+  );
+});
+
+Menu.displayName = 'Menu';
+
+export default Menu;