@ds-mo/ui 0.3.0 → 0.4.0

package/src/components/Menu/Menu.tsx

@@ -1,418 +0,0 @@
-import React, { useState, useEffect, useLayoutEffect, useRef, useMemo, useCallback } from 'react';
-import { createPortal } from 'react-dom';
-import { Text } from '@/components/Text';
-import { Surface } from '@/components/Surface';
-import { MenuItem as MenuItemComponent } from './MenuItem';
-import { DestructiveMenuItem } from './DestructiveMenuItem';
-import { getCssSpacePx } from '@/utils/css-tokens';
-import type { IconComponent } from '@/types';
-import type { MenuItemSelectionStyle } from './MenuItem';
-import styles from './Menu.module.css';
-
-const CLOSE_ANIMATION_MS = 220;
-
-export type MenuSide = 'top' | 'right' | 'bottom' | 'left';
-export type MenuAlign = 'start' | 'center' | 'end';
-
-export interface MenuItemData {
-  label: string;
-  onClick: () => void;
-  isSelected?: boolean;
-  isDestructive?: boolean;
-  isInactive?: boolean;
-  intent?: 'negative';
-  keepOpenOnClick?: boolean;
-  holdDuration?: number;
-  icon?: IconComponent;
-  subtext?: string;
-  showToggle?: boolean;
-  toggleValue?: boolean;
-  selectionStyle?: MenuItemSelectionStyle;
-}
-
-export interface MenuSection {
-  header?: string;
-  items: MenuItemData[];
-}
-
-export interface MenuProps {
-  isOpen: boolean;
-  onClose: () => void;
-  anchorRef: React.RefObject<HTMLElement | null>;
-  items?: MenuItemData[];
-  sections?: MenuSection[];
-  side?: MenuSide;
-  align?: MenuAlign;
-  sideOffset?: number;
-  alignOffset?: number;
-  sideOffsetToken?: string;
-  alignOffsetToken?: string;
-  width?: string;
-  minWidth?: string;
-  maxWidth?: string;
-  matchAnchorWidth?: boolean;
-  matchAnchorWidthOffset?: number;
-  usePortal?: boolean;
-  /** Container role + item role semantics. Defaults to `menu` (items are buttons with menuitem* roles, keyboard nav handled internally). `listbox` makes items render as `option` with `aria-selected`, with keyboard nav handled by the consumer via `activeIndex`. */
-  role?: 'menu' | 'listbox';
-  /** DOM id for the popup container — required when an external combobox references it via `aria-controls`/`aria-activedescendant`. */
-  id?: string;
-  /** Accessible label for the popup container. Defaults to `'Menu'` for menu role; omitted for listbox (let consumer provide via aria-labelledby on the combobox). */
-  ariaLabel?: string;
-  /** Active descendant index for listbox keyboard nav — highlights one option visually without moving DOM focus. */
-  activeIndex?: number;
-  /** Builds the DOM id for option `index`. Required in listbox mode if `aria-activedescendant` is used externally. */
-  getOptionId?: (index: number) => string;
-}
-
-export const Menu: React.FC<MenuProps> = ({
-  isOpen,
-  onClose,
-  anchorRef,
-  items,
-  sections,
-  side = 'bottom',
-  align = 'start',
-  sideOffset = 4,
-  alignOffset = 0,
-  sideOffsetToken,
-  alignOffsetToken,
-  width,
-  minWidth,
-  maxWidth,
-  matchAnchorWidth = false,
-  matchAnchorWidthOffset = 0,
-  usePortal = true,
-  role = 'menu',
-  id,
-  ariaLabel,
-  activeIndex,
-  getOptionId,
-}) => {
-  const isListbox = role === 'listbox';
-  const [isClosing, setIsClosing] = useState(false);
-  const [shouldRender, setShouldRender] = useState(isOpen);
-  const [isPositionReady, setIsPositionReady] = useState(false);
-  const [position, setPosition] = useState<{ x: number; y: number }>({ x: 0, y: 0 });
-  const [menuSize, setMenuSize] = useState<{ width: number; height: number }>({ width: 0, height: 0 });
-  const [anchorSize, setAnchorSize] = useState<{ width: number; height: number }>({ width: 0, height: 0 });
-  const [focusedIndex, setFocusedIndex] = useState(0);
-  const positionCalculatedRef = useRef(false);
-  const menuRef = useRef<HTMLDivElement>(null);
-  const lastSectionsRef = useRef<MenuSection[]>([]);
-  const itemRefs = useRef<Array<HTMLButtonElement | null>>([]);
-  const focusedOnOpenRef = useRef(false);
-
-  const menuSections: MenuSection[] = sections || (items ? [{ items }] : []);
-
-  const hasItems = menuSections.some((s) => s.items.length > 0);
-  if (!isClosing && menuSections.length > 0 && hasItems) {
-    lastSectionsRef.current = menuSections;
-  }
-  const sectionsToRender = isClosing ? lastSectionsRef.current : menuSections;
-
-  const flatItems = useMemo(() => {
-    const list: MenuItemData[] = [];
-    sectionsToRender.forEach((section) => {
-      section.items.forEach((it) => list.push(it));
-    });
-    return list;
-  }, [sectionsToRender]);
-
-  useEffect(() => {
-    if (isOpen) {
-      setShouldRender(true);
-      setIsClosing(false);
-      setIsPositionReady(false);
-      positionCalculatedRef.current = false;
-    } else if (shouldRender) {
-      setIsClosing(true);
-      const timer = setTimeout(() => {
-        setShouldRender(false);
-        setIsClosing(false);
-        positionCalculatedRef.current = false;
-      }, CLOSE_ANIMATION_MS);
-      return () => clearTimeout(timer);
-    }
-  }, [isOpen, shouldRender]);
-
-  useLayoutEffect(() => {
-    if (!isOpen || !shouldRender || !menuRef.current) return;
-    const updateSize = () => {
-      if (!menuRef.current) return;
-      const rect = menuRef.current.getBoundingClientRect();
-      if (rect.width > 0 && rect.height > 0) setMenuSize({ width: rect.width, height: rect.height });
-    };
-    updateSize();
-    requestAnimationFrame(() => requestAnimationFrame(updateSize));
-    if (typeof ResizeObserver !== 'undefined') {
-      const observer = new ResizeObserver(updateSize);
-      observer.observe(menuRef.current);
-      return () => observer.disconnect();
-    }
-  }, [isOpen, shouldRender, menuSections.length]);
-
-  useLayoutEffect(() => {
-    if (!isOpen || !shouldRender || !anchorRef.current || !menuRef.current) return;
-    const calculatePosition = () => {
-      const anchor = anchorRef.current;
-      const menu = menuRef.current;
-      if (!anchor || !menu) return;
-      const anchorRect = anchor.getBoundingClientRect();
-      const menuRect = menu.getBoundingClientRect();
-      const menuWidth = menuRect.width || menuSize.width || 200;
-      const menuHeight = menuRect.height || menuSize.height || 160;
-      setAnchorSize({ width: anchorRect.width, height: anchorRect.height });
-      const gap = sideOffsetToken != null ? getCssSpacePx(sideOffsetToken, 12) : sideOffset;
-      const alignOff = alignOffsetToken != null ? getCssSpacePx(alignOffsetToken, 4) : alignOffset;
-      let x = 0, y = 0;
-      switch (side) {
-        case 'top':
-          y = anchorRect.top - menuHeight - gap;
-          x = align === 'start' ? anchorRect.left + alignOff : align === 'end' ? anchorRect.right - menuWidth + alignOff : anchorRect.left + anchorRect.width / 2 - menuWidth / 2 + alignOff;
-          break;
-        case 'bottom':
-          y = anchorRect.bottom + gap;
-          x = align === 'start' ? anchorRect.left + alignOff : align === 'end' ? anchorRect.right - menuWidth + alignOff : anchorRect.left + anchorRect.width / 2 - menuWidth / 2 + alignOff;
-          break;
-        case 'left':
-          x = anchorRect.left - menuWidth - gap;
-          y = align === 'start' ? anchorRect.top + alignOff : align === 'end' ? anchorRect.bottom - menuHeight + alignOff : anchorRect.top + anchorRect.height / 2 - menuHeight / 2 + alignOff;
-          break;
-        case 'right':
-          x = anchorRect.right + gap;
-          y = align === 'start' ? anchorRect.top + alignOff : align === 'end' ? anchorRect.bottom - menuHeight + alignOff : anchorRect.top + anchorRect.height / 2 - menuHeight / 2 + alignOff;
-          break;
-      }
-      const vp = 4;
-      setPosition({
-        x: Math.min(Math.max(x, vp), window.innerWidth - menuWidth - vp),
-        y: Math.min(Math.max(y, vp), window.innerHeight - menuHeight - vp),
-      });
-      positionCalculatedRef.current = true;
-      setIsPositionReady(true);
-    };
-    if (!positionCalculatedRef.current) {
-      calculatePosition();
-      requestAnimationFrame(() => { if (!positionCalculatedRef.current) calculatePosition(); });
-    }
-    const handleScrollResize = () => calculatePosition();
-    window.addEventListener('scroll', handleScrollResize, true);
-    window.addEventListener('resize', handleScrollResize);
-    return () => {
-      window.removeEventListener('scroll', handleScrollResize, true);
-      window.removeEventListener('resize', handleScrollResize);
-    };
-  }, [isOpen, shouldRender, anchorRef, side, align, sideOffset, alignOffset, sideOffsetToken, alignOffsetToken, menuSize.width, menuSize.height, menuSections.length, matchAnchorWidthOffset]);
-
-  const closeAndRestoreFocus = useCallback(() => {
-    const active = document.activeElement as HTMLElement | null;
-    const focusInside = !!(active && menuRef.current?.contains(active));
-    if (focusInside && anchorRef.current) {
-      anchorRef.current.focus();
-    }
-    onClose();
-  }, [onClose, anchorRef]);
-
-  useEffect(() => {
-    if (!isOpen || !shouldRender) return;
-    const handleClickOutside = (event: MouseEvent) => {
-      const target = event.target as HTMLElement;
-      if (menuRef.current?.contains(target)) return;
-      if (anchorRef.current?.contains(target)) return;
-      onClose();
-    };
-    document.addEventListener('mousedown', handleClickOutside, true);
-    return () => document.removeEventListener('mousedown', handleClickOutside, true);
-  }, [isOpen, shouldRender, onClose, anchorRef]);
-
-  useEffect(() => {
-    if (!isOpen) return;
-    const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        if (isListbox) {
-          onClose();
-        } else {
-          e.preventDefault();
-          closeAndRestoreFocus();
-        }
-      }
-    };
-    document.addEventListener('keydown', handleEscape);
-    return () => document.removeEventListener('keydown', handleEscape);
-  }, [isOpen, isListbox, onClose, closeAndRestoreFocus]);
-
-  useEffect(() => {
-    if (!isOpen) {
-      focusedOnOpenRef.current = false;
-      return;
-    }
-    if (isListbox || !isPositionReady || focusedOnOpenRef.current) return;
-    const firstEnabled = flatItems.findIndex((it) => !it.isInactive);
-    const targetIdx = firstEnabled >= 0 ? firstEnabled : 0;
-    setFocusedIndex(targetIdx);
-    itemRefs.current[targetIdx]?.focus();
-    focusedOnOpenRef.current = true;
-  }, [isOpen, isListbox, isPositionReady, flatItems]);
-
-  const moveFocus = useCallback((idx: number) => {
-    setFocusedIndex(idx);
-    itemRefs.current[idx]?.focus();
-  }, []);
-
-  const handleKeyDown = useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {
-    if (isListbox || !flatItems.length) return;
-    const enabled: number[] = [];
-    flatItems.forEach((it, i) => { if (!it.isInactive) enabled.push(i); });
-    if (!enabled.length) return;
-    const currentPos = enabled.indexOf(focusedIndex);
-    const safePos = currentPos < 0 ? 0 : currentPos;
-
-    switch (e.key) {
-      case 'ArrowDown': {
-        e.preventDefault();
-        e.stopPropagation();
-        moveFocus(enabled[(safePos + 1) % enabled.length]);
-        break;
-      }
-      case 'ArrowUp': {
-        e.preventDefault();
-        e.stopPropagation();
-        moveFocus(enabled[(safePos - 1 + enabled.length) % enabled.length]);
-        break;
-      }
-      case 'Home': {
-        e.preventDefault();
-        e.stopPropagation();
-        moveFocus(enabled[0]);
-        break;
-      }
-      case 'End': {
-        e.preventDefault();
-        e.stopPropagation();
-        moveFocus(enabled[enabled.length - 1]);
-        break;
-      }
-      case 'Tab': {
-        e.preventDefault();
-        closeAndRestoreFocus();
-        break;
-      }
-    }
-  }, [isListbox, flatItems, focusedIndex, moveFocus, closeAndRestoreFocus]);
-
-  if (!shouldRender || sectionsToRender.length === 0) return null;
-
-  const setItemRef = (flatIndex: number) => (el: HTMLButtonElement | null) => {
-    itemRefs.current[flatIndex] = el;
-  };
-
-  const handleItemFocus = (flatIndex: number) => () => {
-    setFocusedIndex(flatIndex);
-  };
-
-  const handleItemActivate = (item: MenuItemData) => {
-    if (item.isInactive) return;
-    item.onClick();
-    if (item.keepOpenOnClick) return;
-    if (isListbox) {
-      onClose();
-    } else {
-      closeAndRestoreFocus();
-    }
-  };
-
-  const renderMenuItem = (item: MenuItemData, key: number, flatIndex: number) => {
-    if (item.isDestructive) {
-      const tabIndexValue = isListbox ? -1 : (focusedIndex === flatIndex ? 0 : -1);
-      return (
-        <DestructiveMenuItem
-          key={key}
-          ref={setItemRef(flatIndex)}
-          label={item.label}
-          subtext={item.subtext}
-          holdDuration={item.holdDuration ?? 4000}
-          onClick={() => { item.onClick(); if (!item.keepOpenOnClick) { if (isListbox) onClose(); else closeAndRestoreFocus(); } }}
-          tabIndex={tabIndexValue}
-          onFocus={handleItemFocus(flatIndex)}
-        />
-      );
-    }
-    const optionId = isListbox && getOptionId ? getOptionId(flatIndex) : undefined;
-    const tabIndexValue = isListbox ? -1 : (focusedIndex === flatIndex ? 0 : -1);
-    return (
-      <MenuItemComponent
-        key={key}
-        ref={setItemRef(flatIndex)}
-        icon={item.icon}
-        label={item.label}
-        subtext={item.subtext}
-        onClick={() => handleItemActivate(item)}
-        isSelected={item.isSelected}
-        isInactive={item.isInactive}
-        intent={item.intent}
-        showToggle={item.showToggle}
-        toggleValue={item.toggleValue}
-        selectionStyle={item.selectionStyle}
-        role={isListbox ? 'option' : undefined}
-        id={optionId}
-        ariaSelected={isListbox ? !!item.isSelected : undefined}
-        isActive={isListbox && activeIndex === flatIndex}
-        tabIndex={tabIndexValue}
-        onFocus={handleItemFocus(flatIndex)}
-      />
-    );
-  };
-
-  const menuStyle: React.CSSProperties = {
-    position: 'absolute',
-    left: 0,
-    top: 0,
-    transform: `translate(${Math.round(position.x)}px, ${Math.round(position.y)}px)`,
-    willChange: 'transform',
-    zIndex: 9998,
-    visibility: isPositionReady ? 'visible' : 'hidden',
-    ...(matchAnchorWidth && anchorSize.width > 0 ? { width: `${anchorSize.width + matchAnchorWidthOffset}px` } : width ? { width } : {}),
-    ...(minWidth ? { minWidth } : {}),
-    ...(maxWidth ? { maxWidth } : {}),
-  };
-
-  let flatIndexCounter = 0;
-  const containerLabel = ariaLabel ?? (isListbox ? undefined : 'Menu');
-  const menuContent = (
-    <div
-      ref={menuRef}
-      id={id}
-      className={`${styles.menuContainer} ${isClosing ? styles.closing : ''}`}
-      style={menuStyle}
-      role={role}
-      aria-label={containerLabel}
-      aria-orientation="vertical"
-      onKeyDown={handleKeyDown}
-    >
-      {sectionsToRender.map((section, sectionIndex) => (
-        <Surface
-          key={sectionIndex}
-          as="div"
-          className={styles.menuSection}
-          edge={sectionIndex < sectionsToRender.length - 1 ? 'bottom' : undefined}
-          elevation="none"
-          role={section.header ? 'group' : undefined}
-          aria-label={section.header}
-        >
-          {section.header && (
-            <div className={styles.sectionHeader} aria-hidden="true">
-              <Text variant="text-body-small-emphasis" as="span" className={styles.sectionLabel}>{section.header}</Text>
-            </div>
-          )}
-          {section.items.map((item, itemIndex) => renderMenuItem(item, itemIndex, flatIndexCounter++))}
-        </Surface>
-      ))}
-    </div>
-  );
-
-  if (usePortal) return createPortal(menuContent, document.body);
-  return menuContent;
-};
-
-Menu.displayName = 'Menu';

package/src/components/Menu/MenuItem.module.css

@@ -1,86 +0,0 @@
-.menuItem {
-  display: flex;
-  align-items: center;
-  gap: var(--dimension-space-050);
-  padding: var(--dimension-space-075);
-  border: none;
-  cursor: pointer;
-  -webkit-user-select: none;
-  user-select: none;
-  text-align: left;
-  width: 100%;
-  min-height: var(--dimension-size-400);
-}
-
-.menuItem:has(.subtext) { align-items: flex-start; }
-
-.iconPrefix {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  color: var(--color-foreground-secondary);
-}
-
-.menuItemSelected .iconPrefix { color: var(--color-foreground-primary); }
-
-.content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: var(--dimension-space-025);
-  min-width: 0;
-}
-
-.label { color: var(--color-foreground-secondary); }
-.menuItem:has(.subtext) .label { color: var(--color-foreground-primary); }
-.menuItemSelected .label { color: var(--color-foreground-primary) !important; }
-.menuItemLabelTertiary .label, .menuItemLabelTertiary .iconPrefix { color: var(--color-foreground-tertiary); }
-.menuItemNegative .label { color: var(--color-foreground-bold-negative) !important; }
-
-.subtext { color: var(--color-foreground-secondary); line-height: 1.4; }
-
-.menuItemInactive { opacity: 0.5; cursor: default; pointer-events: none; }
-
-.menuItemActive { background-color: var(--color-interaction-hover); }
-
-.toggleSuffix { flex-shrink: 0; display: flex; align-items: center; }
-
-.toggle {
-  width: calc(var(--dimension-size-400) + var(--dimension-size-050));
-  height: var(--dimension-size-250);
-  background-color: var(--color-background-translucent);
-  border-radius: var(--dimension-radius-125);
-  position: relative;
-  transition: var(--effect-transition-interaction-background-short-2);
-}
-
-.toggleOn { background-color: var(--color-background-medium-brand); }
-
-.toggleThumb {
-  width: var(--dimension-size-200);
-  height: var(--dimension-size-200);
-  background-color: var(--color-foreground-on-bold-background-primary);
-  border-radius: 50%;
-  position: absolute;
-  top: var(--dimension-space-025);
-  left: var(--dimension-space-025);
-  transition: transform var(--effect-motion-short-2);
-}
-
-.toggleOn .toggleThumb { transform: translateX(var(--dimension-offset-200)); }
-
-.checkSuffix {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  color: var(--color-foreground-primary);
-}
-
-.chevronSuffix {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  color: var(--color-foreground-secondary);
-}
-
-.menuItemSelected .chevronSuffix { color: var(--color-foreground-primary); }

package/src/components/Menu/MenuItem.tsx

@@ -1,144 +0,0 @@
-import React, { forwardRef } from 'react';
-import { Text } from '@/components/Text';
-import { Surface } from '@/components/Surface';
-import type { IconComponent } from '@/types';
-import styles from './MenuItem.module.css';
-
-export type MenuItemSelectionStyle = 'highlight' | 'radio' | 'noOverlay';
-
-export interface MenuItemProps {
-  label: string;
-  onClick: () => void;
-  isSelected?: boolean;
-  isInactive?: boolean;
-  icon?: IconComponent;
-  labelColor?: 'primary' | 'secondary' | 'tertiary';
-  subtext?: string;
-  showToggle?: boolean;
-  toggleValue?: boolean;
-  intent?: 'negative';
-  selectionStyle?: MenuItemSelectionStyle;
-  showTrailingChevron?: boolean;
-  checkIcon?: IconComponent;
-  chevronIcon?: IconComponent;
-  /** Override the implicit role. Defaults derive from menu context: `menuitem`, `menuitemcheckbox` (showToggle), or `menuitemradio` (radio selectionStyle). Pass `'option'` for listbox usage. */
-  role?: string;
-  /** Element id — required when used as an `option` referenced by `aria-activedescendant`. */
-  id?: string;
-  /** Maps to `aria-selected`. Used when role is `option`. */
-  ariaSelected?: boolean;
-  /** Visual highlight for keyboard "active" cursor (separate from selection state). */
-  isActive?: boolean;
-  /** Override default tabIndex (e.g. -1 for listbox options driven by aria-activedescendant). */
-  tabIndex?: number;
-  onKeyDown?: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
-  onFocus?: (e: React.FocusEvent<HTMLButtonElement>) => void;
-}
-
-export const MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>(
-  ({
-    label,
-    onClick,
-    isSelected = false,
-    isInactive = false,
-    icon: Icon,
-    labelColor,
-    subtext,
-    showToggle = false,
-    toggleValue = false,
-    intent,
-    selectionStyle = 'highlight',
-    showTrailingChevron = false,
-    checkIcon: CheckIcon,
-    chevronIcon: ChevronIcon,
-    role,
-    id,
-    ariaSelected,
-    isActive = false,
-    tabIndex,
-    onKeyDown,
-    onFocus,
-  }, ref) => {
-    const useRadioStyle = selectionStyle === 'radio';
-    const noOverlay = selectionStyle === 'noOverlay' || useRadioStyle;
-    const showSelectedOverlay = isSelected && !noOverlay;
-
-    const resolvedRole = role ?? (
-      showToggle ? 'menuitemcheckbox'
-        : useRadioStyle ? 'menuitemradio'
-          : 'menuitem'
-    );
-
-    const ariaCheckedValue: boolean | undefined = role
-      ? undefined
-      : resolvedRole === 'menuitemcheckbox'
-        ? !!toggleValue
-        : resolvedRole === 'menuitemradio'
-          ? !!isSelected
-          : undefined;
-
-    const ariaSelectedValue: boolean | undefined = role && ariaSelected !== undefined ? ariaSelected : undefined;
-
-    return (
-      <Surface
-        ref={ref as React.Ref<HTMLElement>}
-        as="button"
-        interactive={!isInactive}
-        selected={showSelectedOverlay}
-        radius="sm"
-        className={`${styles.menuItem} ${isSelected ? styles.menuItemSelected : ''} ${isInactive ? styles.menuItemInactive : ''} ${intent === 'negative' ? styles.menuItemNegative : ''} ${labelColor === 'tertiary' ? styles.menuItemLabelTertiary : ''} ${isActive ? styles.menuItemActive : ''}`}
-        onClick={onClick}
-        type="button"
-        inactive={isInactive}
-        role={resolvedRole}
-        id={id}
-        aria-checked={ariaCheckedValue}
-        aria-selected={ariaSelectedValue}
-        aria-disabled={isInactive || undefined}
-        tabIndex={tabIndex}
-        onKeyDown={onKeyDown}
-        onFocus={onFocus}
-      >
-        {Icon && (
-          <div className={styles.iconPrefix} aria-hidden="true">
-            <Icon size={20} />
-          </div>
-        )}
-        <div className={styles.content}>
-          <Text
-            variant={isSelected ? 'text-body-medium-emphasis' : 'text-body-medium'}
-            color={labelColor}
-            as="span"
-            className={styles.label}
-          >
-            {label}
-          </Text>
-          {subtext && (
-            <Text variant="text-body-small" as="span" className={styles.subtext}>
-              {subtext}
-            </Text>
-          )}
-        </div>
-        {showToggle && (
-          <div className={styles.toggleSuffix} aria-hidden="true">
-            <div className={`${styles.toggle} ${toggleValue ? styles.toggleOn : ''}`}>
-              <div className={styles.toggleThumb} />
-            </div>
-          </div>
-        )}
-        {useRadioStyle && isSelected && CheckIcon && (
-          <div className={styles.checkSuffix} aria-hidden="true">
-            <CheckIcon size={20} />
-          </div>
-        )}
-        {showTrailingChevron && ChevronIcon && (
-          <div className={styles.chevronSuffix} aria-hidden="true">
-            <ChevronIcon size={20} />
-          </div>
-        )}
-      </Surface>
-    );
-  }
-);
-
-MenuItem.displayName = 'MenuItem';

package/src/components/Menu/index.ts

@@ -1,6 +0,0 @@
-export { Menu } from './Menu';
-export type { MenuProps, MenuSection, MenuItemData, MenuSide, MenuAlign } from './Menu';
-export { MenuItem } from './MenuItem';
-export type { MenuItemProps, MenuItemSelectionStyle } from './MenuItem';
-export { DestructiveMenuItem } from './DestructiveMenuItem';
-export type { DestructiveMenuItemProps } from './DestructiveMenuItem';