@cdx-ui/components 0.0.1-beta.18 → 0.0.1-beta.181

package/src/components/Menu/index.tsx

@@ -0,0 +1,667 @@
+import { forwardRef, useMemo, type ReactNode } from 'react';
+import {
+  Platform,
+  ScrollView,
+  Text,
+  View,
+  type TextProps,
+  type ViewProps,
+  type ViewStyle,
+} from 'react-native';
+import { Check } from '@cdx-ui/icons';
+import {
+  MenuCheckboxItem as MenuCheckboxItemPrimitive,
+  MenuItem as MenuItemPrimitive,
+  MenuOverlayRoot as MenuOverlayRootPrimitive,
+  MenuPopup as MenuPopupPrimitive,
+  MenuRadioGroup as MenuRadioGroupPrimitive,
+  MenuRadioItem as MenuRadioItemPrimitive,
+  MenuRoot as MenuRootPrimitive,
+  MenuTrigger as MenuTriggerPrimitive,
+  Slot,
+  dataAttributes,
+  mergeDataAttributes,
+  useOptionalMenuItemContext,
+  useOptionalMenuPopupContext,
+  type IMenuCheckboxItemProps,
+  type IMenuItemProps,
+  type IMenuOverlayRootProps,
+  type IMenuPopupProps,
+  type IMenuProps,
+  type IMenuRadioGroupProps,
+  type IMenuRadioItemProps,
+  type IMenuTriggerProps,
+} from '@cdx-ui/primitives';
+import { cn, ParentContext, useParentContext, useStyleContext } from '@cdx-ui/utils';
+import { Icon, type IconProps } from '../Icon';
+import { positionToDataIcon, type IconSlotPosition } from '../../utils/positionToDataIcon';
+import {
+  menuItemIconVariants,
+  menuItemLabelVariants,
+  menuItemIndicatorVariants,
+  menuItemShortcutVariants,
+  menuItemVariants,
+  menuRootVariants,
+  menuSectionLabelVariants,
+  menuSeparatorLineVariants,
+  menuSeparatorVariants,
+  type MenuItemVariantProps,
+  type MenuRootVariantProps,
+} from './styles';
+
+const SCOPE = 'MENU';
+const MENU_MAX_HEIGHT = 240;
+const MENU_POPUP_MIN_WIDTH = 192;
+const MENU_SCROLL_STYLE: ViewStyle = { flexGrow: 0 };
+
+const useMenuStyleContext = (): Pick<MenuItemVariantProps, 'size' | 'color'> => {
+  const ctx = useStyleContext(SCOPE) as MenuItemVariantProps | undefined;
+  return { size: ctx?.size ?? 'default', color: ctx?.color ?? 'neutral' };
+};
+
+const useMenuItemStyleValue = (
+  sizeProp: MenuItemVariantProps['size'],
+  color: NonNullable<MenuItemVariantProps['color']>,
+) => {
+  const { size: contextSize } = useMenuStyleContext();
+  const parent = useParentContext();
+  const size = sizeProp ?? contextSize ?? 'default';
+  const contextValue = useMemo(
+    () => ({ ...parent, [SCOPE]: { size, color } }),
+    [parent, size, color],
+  );
+
+  return { contextValue, size };
+};
+
+// =============================================================================
+// OVERLAY ROOT
+// =============================================================================
+
+export interface MenuProps extends ViewProps, IMenuOverlayRootProps {
+  className?: string;
+}
+
+const MenuOverlayRoot = forwardRef<View, MenuProps>(
+  ({ className, style, children, ...props }, ref) => (
+    <MenuOverlayRootPrimitive
+      ref={ref}
+      className={className}
+      style={style}
+      {...props}
+      {...mergeDataAttributes(props, dataAttributes({ slot: 'menu-root' }))}
+    >
+      {children}
+    </MenuOverlayRootPrimitive>
+  ),
+);
+
+MenuOverlayRoot.displayName = 'Menu';
+
+// =============================================================================
+// TRIGGER
+// =============================================================================
+
+export interface MenuTriggerProps extends IMenuTriggerProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const MenuTrigger = forwardRef<View, MenuTriggerProps>(
+  ({ className, style, children, ...props }, ref) => (
+    <MenuTriggerPrimitive
+      ref={ref}
+      className={className}
+      style={style}
+      {...props}
+      {...mergeDataAttributes(props, dataAttributes({ slot: 'menu-trigger' }))}
+    >
+      {children}
+    </MenuTriggerPrimitive>
+  ),
+);
+
+MenuTrigger.displayName = 'Menu.Trigger';
+
+// =============================================================================
+// POPUP
+// =============================================================================
+
+export interface MenuPopupProps extends IMenuPopupProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const MenuPopup = forwardRef<View, MenuPopupProps>(
+  ({ className, style, children, ...props }, ref) => (
+    <MenuPopupPrimitive
+      ref={ref}
+      className={cn(
+        Platform.select({
+          web: 'w-max max-w-full',
+          default: 'self-start',
+        }),
+        className,
+      )}
+      style={[{ minWidth: MENU_POPUP_MIN_WIDTH }, style]}
+      {...props}
+      {...mergeDataAttributes(props, dataAttributes({ slot: 'menu-popup' }))}
+    >
+      {children}
+    </MenuPopupPrimitive>
+  ),
+);
+
+MenuPopup.displayName = 'Menu.Popup';
+
+// =============================================================================
+// CONTENT (menu list surface)
+// =============================================================================
+
+export interface MenuContentProps
+  extends ViewProps, Omit<IMenuProps, 'scrollable'>, MenuRootVariantProps {
+  className?: string;
+  /** Visual-only surface without menu semantics (e.g. inside Select listbox). */
+  asSurface?: boolean;
+}
+
+const MenuContent = forwardRef<View, MenuContentProps>(
+  ({ scrollable = false, asSurface = false, className, style, children, ...props }, ref) => {
+    const parent = useParentContext();
+    const popup = useOptionalMenuPopupContext();
+    const ctx = useMemo(() => ({ ...parent, [SCOPE]: { size: 'default' as const } }), [parent]);
+    const shouldScroll = scrollable || popup !== null;
+    const constrainedStyle =
+      popup === null
+        ? undefined
+        : {
+            flexShrink: 1,
+            maxHeight:
+              popup.availableHeight === undefined
+                ? undefined
+                : Math.min(MENU_MAX_HEIGHT, popup.availableHeight),
+            maxWidth: popup.availableWidth,
+          };
+
+    const computedClassName = cn(menuRootVariants({ scrollable: shouldScroll }), className);
+    // Embedded surfaces inherit the parent collection's slot identity.
+    const contentDataAttributes = asSurface
+      ? mergeDataAttributes(dataAttributes({ slot: 'menu-content' }), props)
+      : mergeDataAttributes(props, dataAttributes({ slot: 'menu-content' }));
+
+    const content = shouldScroll ? (
+      <ScrollView
+        className="shrink"
+        style={[MENU_SCROLL_STYLE, constrainedStyle]}
+        scrollEventThrottle={16}
+        nestedScrollEnabled
+      >
+        {children}
+      </ScrollView>
+    ) : (
+      children
+    );
+
+    return (
+      <ParentContext.Provider value={ctx}>
+        <MenuRootPrimitive
+          ref={ref}
+          scrollable={shouldScroll}
+          asSurface={asSurface}
+          className={computedClassName}
+          style={[style, constrainedStyle]}
+          {...props}
+          {...contentDataAttributes}
+        >
+          {content}
+        </MenuRootPrimitive>
+      </ParentContext.Provider>
+    );
+  },
+);
+
+MenuContent.displayName = 'Menu.Content';
+
+// =============================================================================
+// ITEM
+// =============================================================================
+
+export interface MenuItemProps extends Omit<MenuItemVariantProps, 'color'>, IMenuItemProps {
+  asChild?: boolean;
+  /**
+   * Color theme applied to the item content and interaction states.
+   * @default 'neutral'
+   */
+  color?: 'neutral' | 'danger';
+  className?: string;
+  children?: ReactNode;
+}
+
+const MenuItem = forwardRef<View, MenuItemProps>(
+  (
+    {
+      asChild,
+      color = 'neutral',
+      inset = false,
+      size: sizeProp,
+      className,
+      style,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const { contextValue, size } = useMenuItemStyleValue(sizeProp, color);
+
+    const computedClassName = cn(menuItemVariants({ color, inset, size }), className);
+
+    return (
+      <ParentContext.Provider value={contextValue}>
+        <MenuItemPrimitive
+          ref={ref}
+          asChild={asChild}
+          className={computedClassName}
+          style={style}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'menu-item' }))}
+        >
+          {children}
+        </MenuItemPrimitive>
+      </ParentContext.Provider>
+    );
+  },
+);
+
+MenuItem.displayName = 'Menu.Item';
+
+export interface MenuCheckboxItemProps
+  extends Omit<MenuItemVariantProps, 'color'>, IMenuCheckboxItemProps {
+  asChild?: boolean;
+  color?: 'neutral' | 'danger';
+  className?: string;
+  children?: ReactNode;
+}
+
+const MenuCheckboxItem = forwardRef<View, MenuCheckboxItemProps>(
+  (
+    {
+      asChild,
+      color = 'neutral',
+      inset = false,
+      size: sizeProp,
+      className,
+      style,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const { contextValue, size } = useMenuItemStyleValue(sizeProp, color);
+
+    return (
+      <ParentContext.Provider value={contextValue}>
+        <MenuCheckboxItemPrimitive
+          ref={ref}
+          asChild={asChild}
+          className={cn(menuItemVariants({ color, inset, size }), className)}
+          style={style}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'menu-checkbox-item' }))}
+        >
+          {children}
+        </MenuCheckboxItemPrimitive>
+      </ParentContext.Provider>
+    );
+  },
+);
+
+MenuCheckboxItem.displayName = 'Menu.CheckboxItem';
+
+export interface MenuRadioGroupProps extends IMenuRadioGroupProps {
+  asChild?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+
+const MenuRadioGroup = forwardRef<View, MenuRadioGroupProps>(
+  ({ asChild, className, style, children, ...props }, ref) => (
+    <MenuRadioGroupPrimitive
+      ref={ref}
+      asChild={asChild}
+      className={className}
+      style={style}
+      {...props}
+      {...mergeDataAttributes(props, dataAttributes({ slot: 'menu-radio-group' }))}
+    >
+      {children}
+    </MenuRadioGroupPrimitive>
+  ),
+);
+
+MenuRadioGroup.displayName = 'Menu.RadioGroup';
+
+export interface MenuRadioItemProps
+  extends Omit<MenuItemVariantProps, 'color'>, IMenuRadioItemProps {
+  asChild?: boolean;
+  color?: 'neutral' | 'danger';
+  className?: string;
+  children?: ReactNode;
+}
+
+const MenuRadioItem = forwardRef<View, MenuRadioItemProps>(
+  (
+    {
+      asChild,
+      color = 'neutral',
+      inset = false,
+      size: sizeProp,
+      className,
+      style,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const { contextValue, size } = useMenuItemStyleValue(sizeProp, color);
+
+    return (
+      <ParentContext.Provider value={contextValue}>
+        <MenuRadioItemPrimitive
+          ref={ref}
+          asChild={asChild}
+          className={cn(menuItemVariants({ color, inset, size }), className)}
+          style={style}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'menu-radio-item' }))}
+        >
+          {children}
+        </MenuRadioItemPrimitive>
+      </ParentContext.Provider>
+    );
+  },
+);
+
+MenuRadioItem.displayName = 'Menu.RadioItem';
+
+// =============================================================================
+// ITEM SLOTS
+// =============================================================================
+
+export interface MenuItemLabelProps extends TextProps, Pick<MenuItemVariantProps, 'size'> {
+  asChild?: boolean;
+  className?: string;
+  /** Checked state when used outside a selectable Menu item (e.g. `Select.ItemLabel`). */
+  isChecked?: boolean;
+}
+
+const MenuItemLabel = forwardRef<Text, MenuItemLabelProps>(
+  ({ asChild, className, style, children, isChecked: checkedProp, size, ...props }, ref) => {
+    const { color } = useMenuStyleContext();
+    const menuItemCtx = useOptionalMenuItemContext();
+    const checked = checkedProp ?? menuItemCtx?.checked ?? false;
+    const Comp = asChild ? Slot : Text;
+
+    return (
+      <Comp
+        ref={ref}
+        className={cn(
+          menuItemLabelVariants({ size, color }),
+          checked ? 'font-medium' : undefined,
+          className,
+        )}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(
+          dataAttributes({
+            slot: 'menu-item-label',
+            state: checked ? 'checked' : 'unchecked',
+          }),
+          props,
+        )}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+MenuItemLabel.displayName = 'Menu.ItemLabel';
+
+export interface MenuItemIconProps extends Omit<IconProps, 'as' | 'children'> {
+  asChild?: boolean;
+  as?: IconProps['as'];
+  position?: IconSlotPosition;
+  className?: string;
+  children?: ReactNode;
+}
+
+const MenuItemIcon = ({
+  asChild,
+  as,
+  position = 'leading',
+  className,
+  style,
+  children,
+  ...props
+}: MenuItemIconProps) => {
+  const { color } = useMenuStyleContext();
+  const computedClassName = cn(menuItemIconVariants({ color }), className);
+  const slotData = mergeDataAttributes(
+    props,
+    dataAttributes({ slot: 'menu-item-icon' }),
+    positionToDataIcon(position),
+  );
+
+  if (asChild) {
+    return (
+      <Slot
+        className={computedClassName}
+        style={style}
+        accessibilityElementsHidden
+        aria-hidden
+        {...props}
+        {...slotData}
+      >
+        {children}
+      </Slot>
+    );
+  }
+
+  if (!as) {
+    return null;
+  }
+
+  return (
+    <Icon
+      as={as}
+      className={computedClassName}
+      style={style}
+      accessibilityElementsHidden
+      aria-hidden
+      {...props}
+      {...slotData}
+    />
+  );
+};
+
+MenuItemIcon.displayName = 'Menu.ItemIcon';
+
+export interface MenuItemShortcutProps extends TextProps {
+  asChild?: boolean;
+  className?: string;
+}
+
+const MenuItemShortcut = forwardRef<Text, MenuItemShortcutProps>(
+  ({ asChild, className, style, children, ...props }, ref) => {
+    const Comp = asChild ? Slot : Text;
+
+    return (
+      <Comp
+        ref={ref}
+        className={cn(menuItemShortcutVariants(), className)}
+        style={style}
+        accessibilityElementsHidden
+        aria-hidden
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'menu-item-shortcut' }))}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+MenuItemShortcut.displayName = 'Menu.ItemShortcut';
+
+export interface MenuItemIndicatorProps extends Omit<IconProps, 'as' | 'children'> {
+  asChild?: boolean;
+  as?: IconProps['as'];
+  isChecked?: boolean;
+  position?: IconSlotPosition;
+  className?: string;
+  children?: ReactNode;
+}
+
+const MenuItemIndicator = ({
+  asChild,
+  as = Check,
+  isChecked: checkedProp,
+  position = 'trailing',
+  className,
+  style,
+  children,
+  ...props
+}: MenuItemIndicatorProps) => {
+  const menuItemContext = useOptionalMenuItemContext();
+  const checked = checkedProp ?? menuItemContext?.checked ?? false;
+  if (!checked) {
+    return null;
+  }
+
+  const computedClassName = cn(menuItemIndicatorVariants(), className);
+  const slotData = mergeDataAttributes(
+    props,
+    dataAttributes({ slot: 'menu-item-indicator' }),
+    positionToDataIcon(position),
+  );
+
+  if (asChild) {
+    return (
+      <Slot
+        className={computedClassName}
+        style={style}
+        accessibilityElementsHidden
+        aria-hidden
+        {...props}
+        {...slotData}
+      >
+        {children}
+      </Slot>
+    );
+  }
+
+  return (
+    <Icon
+      as={as}
+      className={computedClassName}
+      style={style}
+      accessibilityElementsHidden
+      aria-hidden
+      {...props}
+      {...slotData}
+    />
+  );
+};
+
+MenuItemIndicator.displayName = 'Menu.ItemIndicator';
+
+// =============================================================================
+// NON-INTERACTIVE SLOTS
+// =============================================================================
+
+export interface MenuSectionLabelProps extends TextProps {
+  asChild?: boolean;
+  className?: string;
+}
+
+const MenuSectionLabel = forwardRef<Text, MenuSectionLabelProps>(
+  ({ asChild, className, style, children, ...props }, ref) => {
+    const Comp = asChild ? Slot : Text;
+
+    return (
+      <Comp
+        ref={ref}
+        className={cn(menuSectionLabelVariants(), className)}
+        style={style}
+        accessibilityRole="header"
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'menu-section-label' }))}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+MenuSectionLabel.displayName = 'Menu.SectionLabel';
+
+export interface MenuSeparatorProps extends ViewProps {
+  className?: string;
+}
+
+const MenuSeparator = forwardRef<View, MenuSeparatorProps>(
+  ({ className, style, ...props }, ref) => {
+    return (
+      <View
+        ref={ref}
+        className={cn(menuSeparatorVariants(), className)}
+        style={style}
+        accessibilityElementsHidden
+        importantForAccessibility="no-hide-descendants"
+        aria-hidden
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'menu-separator' }))}
+      >
+        <View className={menuSeparatorLineVariants()} />
+      </View>
+    );
+  },
+);
+
+MenuSeparator.displayName = 'Menu.Separator';
+
+// =============================================================================
+// COMPOUND EXPORT
+// =============================================================================
+
+type MenuCompoundComponent = typeof MenuOverlayRoot & {
+  Trigger: typeof MenuTrigger;
+  Popup: typeof MenuPopup;
+  Content: typeof MenuContent;
+  Item: typeof MenuItem;
+  CheckboxItem: typeof MenuCheckboxItem;
+  RadioGroup: typeof MenuRadioGroup;
+  RadioItem: typeof MenuRadioItem;
+  ItemLabel: typeof MenuItemLabel;
+  ItemIcon: typeof MenuItemIcon;
+  ItemShortcut: typeof MenuItemShortcut;
+  ItemIndicator: typeof MenuItemIndicator;
+  SectionLabel: typeof MenuSectionLabel;
+  Separator: typeof MenuSeparator;
+};
+
+export const Menu = Object.assign(MenuOverlayRoot, {
+  Trigger: MenuTrigger,
+  Popup: MenuPopup,
+  Content: MenuContent,
+  Item: MenuItem,
+  CheckboxItem: MenuCheckboxItem,
+  RadioGroup: MenuRadioGroup,
+  RadioItem: MenuRadioItem,
+  ItemLabel: MenuItemLabel,
+  ItemIcon: MenuItemIcon,
+  ItemShortcut: MenuItemShortcut,
+  ItemIndicator: MenuItemIndicator,
+  SectionLabel: MenuSectionLabel,
+  Separator: MenuSeparator,
+}) as MenuCompoundComponent;