@himakarinv/nativex 1.0.0

package/src/components/DropdownMenu/DropdownMenu.tsx

@@ -0,0 +1,471 @@
+import { useEffect, useRef, useState } from 'react';
+import {
+  Dimensions,
+  Modal,
+  Platform,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+
+import { borders, colors, radius, shadows, spacing, typography } from '../../theme';
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+  IconPosition,
+  dismissButtonFocus,
+} from '../Button';
+import { Checkbox, CheckboxSize } from '../Checkbox';
+import { Icon, IconName } from '../Icon';
+
+export const DropdownMenuVariant = {
+  Default: 'default',
+  WithHeader: 'with-header',
+  WithShortcuts: 'with-shortcuts',
+  WithIcons: 'with-icons',
+  Complete: 'complete',
+} as const;
+
+export type DropdownMenuVariant = (typeof DropdownMenuVariant)[keyof typeof DropdownMenuVariant];
+
+export const DropdownMenuPlacement = {
+  TopStart: 'top-start',
+  TopEnd: 'top-end',
+  BottomStart: 'bottom-start',
+  BottomEnd: 'bottom-end',
+} as const;
+
+export type DropdownMenuPlacement =
+  (typeof DropdownMenuPlacement)[keyof typeof DropdownMenuPlacement];
+
+export const DropdownMenuTrigger = {
+  Button: 'button',
+  VerticalDots: 'verticaldots',
+  AvatarIcon: 'avataricon',
+} as const;
+
+export type DropdownMenuTrigger = (typeof DropdownMenuTrigger)[keyof typeof DropdownMenuTrigger];
+
+export type DropdownMenuAutoClose = boolean | 'inside' | 'outside';
+
+export type DropdownMenuItem = {
+  id: string;
+  label: string;
+  icon?: IconName | string;
+  shortcut?: string;
+  disabled?: boolean;
+  divider?: boolean;
+  hasCheckbox?: boolean;
+  checked?: boolean;
+};
+
+export type DropdownMenuProps = {
+  trigger?: DropdownMenuTrigger;
+  triggerLabel?: string;
+  triggerVariant?: ButtonVariant | null;
+  triggerSize?: ButtonSize | null;
+  placement?: DropdownMenuPlacement;
+  autoClose?: DropdownMenuAutoClose;
+  variant?: DropdownMenuVariant;
+  headerName?: string;
+  headerText?: string;
+  showShortcuts?: boolean;
+  showIcons?: boolean;
+  showCheckboxes?: boolean;
+  items?: DropdownMenuItem[];
+  onItemClick?: (item: DropdownMenuItem) => void;
+  onCheckboxChange?: (payload: { item: DropdownMenuItem; checked: boolean }) => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+const isNative = Platform.OS !== 'web';
+const MENU_MIN_WIDTH = spacing['7xl'] + spacing['7xl'] + spacing['7xl'] + spacing['3xl'];
+const MENU_MAX_WIDTH = MENU_MIN_WIDTH + MENU_MIN_WIDTH;
+const MENU_MAX_HEIGHT = MENU_MIN_WIDTH + MENU_MIN_WIDTH;
+const MENU_GAP = spacing.xs;
+const FOCUS_CLEAR_MS = 220;
+
+function webMenuShadow(): ViewStyle {
+  return {
+    boxShadow: `0 ${shadows.boxLight.offsetY}px ${shadows.boxLight.radius}px ${colors.boxShadowLight}`,
+  } as ViewStyle;
+}
+
+function closesOnOutside(autoClose: DropdownMenuAutoClose) {
+  return autoClose === true || autoClose === 'outside';
+}
+
+function closesOnInside(autoClose: DropdownMenuAutoClose) {
+  return autoClose === true || autoClose === 'inside';
+}
+
+function menuPosition(
+  placement: DropdownMenuPlacement,
+  trigger: { x: number; y: number; width: number; height: number },
+  menu: { width: number; height: number },
+) {
+  const window = Dimensions.get('window');
+  const pad = spacing.lg;
+  const alignEnd = placement === DropdownMenuPlacement.TopEnd || placement === DropdownMenuPlacement.BottomEnd;
+  const placeTop = placement === DropdownMenuPlacement.TopStart || placement === DropdownMenuPlacement.TopEnd;
+
+  let top = placeTop ? trigger.y - menu.height - MENU_GAP : trigger.y + trigger.height + MENU_GAP;
+  let left = alignEnd ? trigger.x + trigger.width - menu.width : trigger.x;
+
+  left = Math.min(Math.max(pad, left), window.width - menu.width - pad);
+  top = Math.min(Math.max(pad, top), window.height - menu.height - pad);
+
+  return { top, left };
+}
+
+function checkedMapFrom(items: DropdownMenuItem[]) {
+  return Object.fromEntries(items.map((item) => [item.id, Boolean(item.checked)]));
+}
+
+function compactTriggerStyle(size: ButtonSize): ViewStyle {
+  if (size === ButtonSize.Large || size === ButtonSize.ExtraLarge || size === ButtonSize.ExtraExtraLarge) {
+    return {
+      height: spacing['6xl'],
+      minHeight: spacing['6xl'],
+      paddingVertical: spacing.sm,
+      paddingHorizontal: spacing.base,
+    };
+  }
+
+  return {
+    height: spacing['4xl'],
+    minHeight: spacing['4xl'],
+    paddingVertical: spacing.xs,
+    paddingHorizontal: spacing.md,
+  };
+}
+
+export function DropdownMenu({
+  trigger = DropdownMenuTrigger.Button,
+  triggerLabel = 'Account',
+  triggerVariant = null,
+  triggerSize = null,
+  placement = DropdownMenuPlacement.BottomEnd,
+  autoClose = true,
+  variant: _variant = DropdownMenuVariant.Default,
+  headerName = '',
+  headerText = '',
+  showShortcuts = false,
+  showIcons = false,
+  showCheckboxes = false,
+  items = [],
+  onItemClick,
+  onCheckboxChange,
+  style,
+}: DropdownMenuProps) {
+  const triggerRef = useRef<View>(null);
+  const [open, setOpen] = useState(false);
+  const [hoveredItem, setHoveredItem] = useState<string | null>(null);
+  const [triggerBox, setTriggerBox] = useState({ x: 0, y: 0, width: 0, height: 0 });
+  const [menuSize, setMenuSize] = useState({ width: MENU_MIN_WIDTH, height: 0 });
+  const [checkedById, setCheckedById] = useState(() => checkedMapFrom(items));
+  const position = menuPosition(placement, triggerBox, menuSize);
+  const hasHeader = Boolean(headerName) || Boolean(headerText);
+  const hasHeaderAndText = Boolean(headerName) && Boolean(headerText);
+  const isButtonTrigger = trigger === DropdownMenuTrigger.Button;
+  const isAvatarTrigger = trigger === DropdownMenuTrigger.AvatarIcon;
+  const effectiveVariant =
+    triggerVariant ?? (isButtonTrigger ? ButtonVariant.SecondaryGray : ButtonVariant.TertiaryGray);
+  const effectiveSize = triggerSize ?? ButtonSize.Small;
+  const prefixIconName =
+    trigger === DropdownMenuTrigger.VerticalDots
+      ? open
+        ? IconName.VerticalDotsActive
+        : IconName.VerticalThreeDots
+      : IconName.DropdownAvatar;
+
+  useEffect(() => {
+    setCheckedById(checkedMapFrom(items));
+  }, [items]);
+
+  const close = () => {
+    setOpen(false);
+    setHoveredItem(null);
+    dismissButtonFocus();
+    setTimeout(() => dismissButtonFocus(), FOCUS_CLEAR_MS);
+  };
+
+  const toggle = () => {
+    if (open) {
+      close();
+      return;
+    }
+
+    triggerRef.current?.measureInWindow((x, y, width, measuredHeight) => {
+      setTriggerBox({ x, y, width, height: measuredHeight });
+      setOpen(true);
+    });
+  };
+
+  const select = (item: DropdownMenuItem) => {
+    if (item.disabled || item.divider) {
+      return;
+    }
+    onItemClick?.(item);
+    if (closesOnInside(autoClose)) {
+      close();
+    }
+  };
+
+  const toggleChecked = (item: DropdownMenuItem) => {
+    if (item.disabled) {
+      return;
+    }
+    const next = !checkedById[item.id];
+    setCheckedById((current) => ({ ...current, [item.id]: next }));
+    onCheckboxChange?.({ item: { ...item, checked: next }, checked: next });
+  };
+
+  return (
+    <View ref={triggerRef} collapsable={false} style={[styles.host, style]}>
+      <Button
+        label={isButtonTrigger ? triggerLabel : ''}
+        variant={effectiveVariant}
+        size={effectiveSize}
+        iconPosition={isButtonTrigger ? IconPosition.After : IconPosition.Only}
+        iconName={isButtonTrigger ? IconName.ChevronDown : prefixIconName}
+        iconDecorative
+        accessibilityLabel={open ? 'Close menu' : 'Open menu'}
+        onPress={toggle}
+        style={isAvatarTrigger ? styles.avatarTrigger : undefined}
+        contentStyle={
+          isAvatarTrigger
+            ? styles.avatarContent
+            : trigger === DropdownMenuTrigger.VerticalDots
+              ? styles.dotsContent
+              : compactTriggerStyle(effectiveSize)
+        }
+      />
+
+      <Modal visible={open} transparent animationType="none" onRequestClose={close}>
+        <Pressable
+          accessible={false}
+          style={styles.backdrop}
+          onPress={() => {
+            if (closesOnOutside(autoClose)) {
+              close();
+            }
+          }}>
+          <Pressable
+            accessible={false}
+            accessibilityRole="menu"
+            onPress={(event) => {
+              if ('stopPropagation' in event && typeof event.stopPropagation === 'function') {
+                event.stopPropagation();
+              }
+            }}
+            onLayout={(event) => {
+              const { width, height: nextHeight } = event.nativeEvent.layout;
+              if (width !== menuSize.width || nextHeight !== menuSize.height) {
+                setMenuSize({ width, height: nextHeight });
+              }
+            }}
+            style={[styles.menu, { top: position.top, left: position.left }, !isNative && webMenuShadow()]}>
+            {hasHeader ? (
+              <View style={[styles.header, hasHeaderAndText && styles.headerCentered]}>
+                {headerName ? <Text style={styles.headerName}>{headerName}</Text> : null}
+                {headerText ? (
+                  <View style={styles.headerMeta}>
+                    <View style={styles.onlineDot} />
+                    <Text style={styles.headerText}>{headerText}</Text>
+                  </View>
+                ) : null}
+              </View>
+            ) : null}
+
+            <ScrollView
+              style={styles.list}
+              contentContainerStyle={styles.listContent}
+              keyboardShouldPersistTaps="handled">
+              {items.map((item, index) => {
+                if (item.divider) {
+                  return <View key={`divider-${item.id}-${index}`} style={styles.divider} />;
+                }
+
+                const disabled = Boolean(item.disabled);
+                const hovered = hoveredItem === item.id && !disabled;
+                const checked = Boolean(checkedById[item.id]);
+                const showCheckbox = showCheckboxes || Boolean(item.hasCheckbox);
+
+                return (
+                  <Pressable
+                    key={item.id}
+                    accessibilityRole="menuitem"
+                    accessibilityState={{ disabled, checked: showCheckbox ? checked : undefined }}
+                    accessibilityLabel={item.label}
+                    disabled={disabled}
+                    onHoverIn={() => setHoveredItem(item.id)}
+                    onHoverOut={() => setHoveredItem((current) => (current === item.id ? null : current))}
+                    onPress={() => select(item)}
+                    style={[styles.item, hovered && styles.itemHovered, disabled && styles.itemDisabled]}>
+                    <View style={styles.itemLeft}>
+                      {showCheckbox ? (
+                        <Pressable
+                          accessible={false}
+                          disabled={disabled}
+                          hitSlop={spacing.sm}
+                          onPress={(event) => {
+                            if ('stopPropagation' in event && typeof event.stopPropagation === 'function') {
+                              event.stopPropagation();
+                            }
+                            toggleChecked(item);
+                          }}>
+                          <View pointerEvents="none">
+                            <Checkbox checked={checked} disabled={disabled} size={CheckboxSize.Small} />
+                          </View>
+                        </Pressable>
+                      ) : null}
+                      {showIcons && item.icon ? (
+                        <Icon name={item.icon} size={spacing.lg} color={colors.gray.darker} decorative />
+                      ) : null}
+                      <Text style={[styles.itemLabel, disabled && styles.itemLabelDisabled]}>{item.label}</Text>
+                    </View>
+                    {showShortcuts && item.shortcut ? <Text style={styles.shortcut}>{item.shortcut}</Text> : null}
+                  </Pressable>
+                );
+              })}
+            </ScrollView>
+          </Pressable>
+        </Pressable>
+      </Modal>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  host: {
+    alignSelf: 'flex-start',
+  },
+  dotsContent: {
+    width: spacing['4xl'],
+    height: spacing['4xl'],
+    borderWidth: borders.width.none,
+    padding: spacing.none,
+  },
+  avatarTrigger: {
+    borderRadius: radius.full,
+  },
+  avatarContent: {
+    width: spacing['4xl'],
+    height: spacing['4xl'],
+    padding: spacing.none,
+    borderWidth: borders.width.none,
+    borderRadius: radius.full,
+    overflow: 'hidden',
+  },
+  backdrop: {
+    flex: 1,
+  },
+  menu: {
+    position: 'absolute',
+    minWidth: MENU_MIN_WIDTH,
+    maxWidth: MENU_MAX_WIDTH,
+    maxHeight: MENU_MAX_HEIGHT,
+    backgroundColor: colors.white,
+    borderWidth: borders.width.thin,
+    borderColor: colors.surfaceMuted,
+    borderRadius: radius.md,
+    overflow: 'hidden',
+  },
+  header: {
+    paddingVertical: spacing.md,
+    paddingHorizontal: spacing.base,
+    backgroundColor: colors.white,
+    borderBottomWidth: borders.width.thin,
+    borderBottomColor: colors.surfaceMuted,
+    alignItems: 'flex-start',
+    gap: spacing.xs,
+  },
+  headerCentered: {
+    alignItems: 'center',
+  },
+  headerName: {
+    fontWeight: typography.fontWeight.bold,
+    fontSize: typography.fontSize.sm,
+    lineHeight: typography.buttonLineHeight.sm,
+    color: colors.gray.darker,
+    ...Platform.select({
+      android: {},
+      default: { fontFamily: typography.fontFamily.base },
+    }),
+  },
+  headerMeta: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.xs,
+  },
+  onlineDot: {
+    width: spacing.sm,
+    height: spacing.sm,
+    borderRadius: radius.full,
+    backgroundColor: colors.success.base,
+  },
+  headerText: {
+    fontFamily: typography.fontFamily.base,
+    fontWeight: typography.fontWeight.regular,
+    fontSize: typography.fontSize.sm,
+    lineHeight: typography.buttonLineHeight.sm,
+    color: colors.gray.dark,
+  },
+  list: {
+    maxHeight: MENU_MAX_HEIGHT,
+  },
+  listContent: {
+    paddingTop: spacing.xs,
+    paddingBottom: spacing.base,
+  },
+  item: {
+    minHeight: spacing['5xl'],
+    paddingHorizontal: spacing.base,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: spacing.md,
+  },
+  itemHovered: {
+    backgroundColor: colors.gray.light,
+  },
+  itemDisabled: {
+    opacity: 0.5,
+  },
+  itemLeft: {
+    flex: 1,
+    minWidth: spacing.none,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.md,
+  },
+  itemLabel: {
+    flexShrink: 1,
+    fontFamily: typography.fontFamily.base,
+    fontWeight: typography.fontWeight.medium,
+    fontSize: typography.fontSize.sm,
+    lineHeight: typography.buttonLineHeight.sm,
+    color: colors.gray.darker,
+  },
+  itemLabelDisabled: {
+    color: colors.gray.dark,
+  },
+  shortcut: {
+    fontFamily: typography.fontFamily.base,
+    fontWeight: typography.fontWeight.regular,
+    fontSize: typography.fontSize.sm,
+    lineHeight: typography.buttonLineHeight.sm,
+    color: colors.text.muted,
+  },
+  divider: {
+    height: borders.width.thin,
+    backgroundColor: colors.borderSubtle,
+    marginVertical: spacing.sm,
+  },
+});

package/src/components/DropdownMenu/index.ts

@@ -0,0 +1,11 @@
+export {
+  DropdownMenu,
+  DropdownMenuVariant,
+  DropdownMenuPlacement,
+  DropdownMenuTrigger,
+} from './DropdownMenu';
+export type {
+  DropdownMenuProps,
+  DropdownMenuItem,
+  DropdownMenuAutoClose,
+} from './DropdownMenu';