@cdx-ui/components 0.1.3 → 0.1.5

package/src/components/Drawer/styles.ts

@@ -0,0 +1,188 @@
+import { Platform } from 'react-native';
+import { cva, type VariantProps } from '@cdx-ui/utils';
+import { TRANSITION_COLORS } from '../../styles/constants';
+
+export const drawerPortalVariants = cva(['flex-1', 'absolute inset-0', 'web:fixed']);
+
+export const drawerOverlayVariants = cva([
+  'absolute inset-0',
+  'bg-surface-backdrop',
+  'web:transition-opacity web:duration-300 web:ease-[cubic-bezier(0.32,0.72,0,1)]',
+  'web:data-[state=entering]:opacity-0',
+  'web:data-[state=open]:opacity-100',
+  'web:data-[state=closed]:opacity-0 web:data-[state=closed]:duration-[220ms]',
+  'web:motion-reduce:transition-none web:motion-reduce:duration-0',
+]);
+
+const modalTransition = [
+  'web:transition-transform web:duration-300 web:ease-[cubic-bezier(0.32,0.72,0,1)]',
+  'web:data-[state=open]:translate-x-0 web:data-[state=open]:translate-y-0',
+  'web:data-[state=closed]:duration-[220ms]',
+  'web:motion-reduce:transition-none web:motion-reduce:duration-0',
+  Platform.select({ web: 'shadow-lg', default: '' }),
+]
+  .filter(Boolean)
+  .join(' ');
+
+export const drawerPanelVariants = cva(
+  ['flex flex-col bg-surface-primary shrink-0 overflow-hidden relative z-10'],
+  {
+    variants: {
+      size: {
+        small: '',
+        default: '',
+        large: '',
+      },
+      variant: {
+        permanent: 'self-stretch',
+        modal: modalTransition,
+      },
+      placement: {
+        left: '',
+        right: '',
+        top: '',
+        bottom: '',
+      },
+    },
+    compoundVariants: [
+      { size: 'small', placement: 'left', class: 'w-[240px]' },
+      { size: 'small', placement: 'right', class: 'w-[240px]' },
+      { size: 'default', placement: 'left', class: 'w-[360px]' },
+      { size: 'default', placement: 'right', class: 'w-[360px]' },
+      { size: 'large', placement: 'left', class: 'w-[480px]' },
+      { size: 'large', placement: 'right', class: 'w-[480px]' },
+      { size: 'small', placement: 'top', class: 'h-[240px] w-full' },
+      { size: 'small', placement: 'bottom', class: 'h-[240px] w-full' },
+      { size: 'default', placement: 'top', class: 'h-[360px] w-full' },
+      { size: 'default', placement: 'bottom', class: 'h-[360px] w-full' },
+      { size: 'large', placement: 'top', class: 'h-[480px] w-full' },
+      { size: 'large', placement: 'bottom', class: 'h-[480px] w-full' },
+      {
+        variant: 'permanent',
+        placement: 'right',
+        class: 'h-full border-l border-stroke-secondary',
+      },
+      { variant: 'permanent', placement: 'left', class: 'h-full border-r border-stroke-secondary' },
+      { variant: 'permanent', placement: 'top', class: 'w-full border-b border-stroke-secondary' },
+      {
+        variant: 'permanent',
+        placement: 'bottom',
+        class: 'w-full border-t border-stroke-secondary',
+      },
+      { variant: 'modal', placement: 'left', class: 'h-full max-h-full' },
+      { variant: 'modal', placement: 'right', class: 'h-full max-h-full' },
+      { variant: 'modal', placement: 'top', class: 'w-full max-w-full' },
+      { variant: 'modal', placement: 'bottom', class: 'w-full max-w-full' },
+      {
+        variant: 'modal',
+        placement: 'right',
+        class:
+          'web:data-[state=entering]:translate-x-full web:data-[state=closed]:translate-x-full',
+      },
+      {
+        variant: 'modal',
+        placement: 'left',
+        class:
+          'web:data-[state=entering]:-translate-x-full web:data-[state=closed]:-translate-x-full',
+      },
+      {
+        variant: 'modal',
+        placement: 'bottom',
+        class:
+          'web:data-[state=entering]:translate-y-full web:data-[state=closed]:translate-y-full',
+      },
+      {
+        variant: 'modal',
+        placement: 'top',
+        class:
+          'web:data-[state=entering]:-translate-y-full web:data-[state=closed]:-translate-y-full',
+      },
+    ],
+    defaultVariants: {
+      size: 'default',
+      variant: 'permanent',
+      placement: 'right',
+    },
+  },
+);
+
+export const drawerHeaderVariants = cva(
+  ['relative shrink-0 flex-row items-center gap-1.5 pl-4 pr-4 pb-4'],
+  {
+    variants: {
+      showSeparator: {
+        true: 'border-b border-stroke-secondary pb-[17px]',
+        false: '',
+      },
+    },
+    defaultVariants: {
+      showSeparator: true,
+    },
+  },
+);
+
+export const drawerHeaderContentVariants = cva(['flex-1 min-w-0 flex-col items-start']);
+
+export const drawerLeadingSlotVariants = cva(['flex shrink-0 items-center justify-center']);
+
+export const drawerTitleVariants = cva(['heading-sm text-content-primary']);
+
+export const drawerDescriptionVariants = cva(['body-sm text-content-secondary']);
+
+export const drawerContentVariants = cva(['flex-1 min-h-0'], {
+  variants: {
+    fullBleed: {
+      true: '',
+      false: 'px-4',
+    },
+  },
+  defaultVariants: {
+    fullBleed: false,
+  },
+});
+
+export const drawerContentInnerVariants = cva(['py-4 gap-4']);
+
+export const drawerFooterVariants = cva(['shrink-0 px-4 pt-4'], {
+  variants: {
+    showSeparator: {
+      true: 'border-t border-stroke-secondary pt-[17px]',
+      false: '',
+    },
+    direction: {
+      row: 'flex-row items-center justify-end gap-2',
+      column: 'flex-col items-stretch gap-2',
+    },
+  },
+  defaultVariants: {
+    showSeparator: false,
+    direction: 'row',
+  },
+});
+
+export const drawerCloseVariants = cva([
+  'ml-auto shrink-0',
+  'min-w-[32px] min-h-[32px] items-center justify-center',
+  'p-[6px] rounded-full',
+  TRANSITION_COLORS,
+  Platform.select({
+    default: 'data-[active=true]:opacity-70',
+    web: [
+      'data-[hover=true]:bg-surface-primary-hover',
+      'data-[active=true]:bg-surface-primary-active',
+      'data-[focus-visible=true]:ring-2 data-[focus-visible=true]:ring-stroke-focus data-[focus-visible=true]:ring-offset-2',
+    ].join(' '),
+  }),
+]);
+
+export const drawerCloseIconVariants = cva(['size-5 text-content-tertiary']);
+
+export type DrawerVariantProps = VariantProps<typeof drawerPanelVariants> & {
+  fullBleed?: boolean;
+};
+
+export type DrawerPlacement = NonNullable<DrawerVariantProps['placement']>;
+
+export type DrawerHeaderVariantProps = VariantProps<typeof drawerHeaderVariants>;
+
+export type DrawerFooterVariantProps = VariantProps<typeof drawerFooterVariants>;

package/src/components/Drawer/utils.ts

@@ -0,0 +1,83 @@
+import { useContext } from 'react';
+import { useWindowDimensions } from 'react-native';
+import { Easing, Keyframe } from 'react-native-reanimated';
+import { SafeAreaInsetsContext, type EdgeInsets } from 'react-native-safe-area-context';
+import type { DrawerPlacement, DrawerVariantProps } from './styles';
+
+export const DRAWER_ENTER_MS = 300;
+export const DRAWER_EXIT_MS = 220;
+export const WEB_TRANSITION_SAFETY_MS = DRAWER_ENTER_MS + 100;
+
+export const DRAWER_ENTER_EASING = Easing.bezier(0.32, 0.72, 0, 1);
+export const DRAWER_EXIT_EASING = Easing.bezier(0.4, 0, 1, 1);
+export const DRAWER_WIDE_BREAKPOINT = 600;
+export const DRAWER_EDGE_PADDING = 16;
+export const DRAWER_SIZE_PX = {
+  small: 240,
+  default: 360,
+  large: 480,
+} as const;
+
+const ZERO_INSETS: EdgeInsets = { top: 0, bottom: 0, left: 0, right: 0 };
+
+export function useSafeInsets(): EdgeInsets {
+  return useContext(SafeAreaInsetsContext) ?? ZERO_INSETS;
+}
+
+export function isHorizontalDrawerPlacement(placement: DrawerPlacement): boolean {
+  return placement === 'left' || placement === 'right';
+}
+
+export function resolveDrawerPlacement(
+  placement: DrawerVariantProps['placement'],
+): DrawerPlacement {
+  return placement ?? 'right';
+}
+
+export function useClampedDrawerExtent(
+  size: DrawerVariantProps['size'],
+  placement: DrawerPlacement,
+): number {
+  const { width, height } = useWindowDimensions();
+  const token = DRAWER_SIZE_PX[size ?? 'default'];
+  return Math.min(token, isHorizontalDrawerPlacement(placement) ? width : height);
+}
+
+function createSlideKeyframes(axis: 'translateX' | 'translateY', offscreen: number) {
+  const from = axis === 'translateX' ? { translateX: offscreen } : { translateY: offscreen };
+  const to = axis === 'translateX' ? { translateX: 0 } : { translateY: 0 };
+
+  return {
+    entering: new Keyframe({
+      0: {
+        transform: [from],
+      },
+      100: {
+        transform: [to],
+        easing: DRAWER_ENTER_EASING,
+      },
+    }).duration(DRAWER_ENTER_MS),
+    exiting: new Keyframe({
+      0: {
+        transform: [to],
+      },
+      100: {
+        transform: [from],
+        easing: DRAWER_EXIT_EASING,
+      },
+    }).duration(DRAWER_EXIT_MS),
+  };
+}
+
+export function getDrawerSlideKeyframes(placement: DrawerPlacement, extent: number) {
+  switch (placement) {
+    case 'left':
+      return createSlideKeyframes('translateX', -extent);
+    case 'right':
+      return createSlideKeyframes('translateX', extent);
+    case 'top':
+      return createSlideKeyframes('translateY', -extent);
+    case 'bottom':
+      return createSlideKeyframes('translateY', extent);
+  }
+}

package/src/components/InsuranceDisclosure/styles.ts

@@ -26,6 +26,4 @@ export type InsuranceDisclosureRootVariantProps = VariantProps<
 
 export const insuranceDisclosureLogoVariants = cva(['h-5 w-11 shrink-0']);
 
-export const insuranceDisclosureTextVariants = cva([
-  'shrink text-content-primary italic [font-family:var(--font-body-italic)]',
-]);
+export const insuranceDisclosureTextVariants = cva(['shrink text-content-primary italic']);

package/src/components/Menu/index.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useMemo, type ReactNode } from 'react';
+import { Children, forwardRef, isValidElement, useMemo, type ReactNode } from 'react';
 import {
   Platform,
   ScrollView,
@@ -12,6 +12,7 @@ import { Check } from '@cdx-ui/icons';
 import {
   MenuCheckboxItem as MenuCheckboxItemPrimitive,
   MenuItem as MenuItemPrimitive,
+  MenuItemAction as MenuItemActionPrimitive,
   MenuOverlayRoot as MenuOverlayRootPrimitive,
   MenuPopup as MenuPopupPrimitive,
   MenuRadioGroup as MenuRadioGroupPrimitive,
@@ -25,6 +26,7 @@ import {
   useOptionalMenuPopupContext,
   type IMenuCheckboxItemProps,
   type IMenuItemProps,
+  type IMenuItemActionProps,
   type IMenuOverlayRootProps,
   type IMenuPopupProps,
   type IMenuProps,
@@ -34,8 +36,14 @@ import {
 } from '@cdx-ui/primitives';
 import { cn, ParentContext, useParentContext, useStyleContext } from '@cdx-ui/utils';
 import { Icon, type IconProps } from '../Icon';
+import { checkboxIconVariants, checkboxIndicatorVariants } from '../Checkbox/styles';
+import { radioIndicatorVariants, radioInnerDotVariants } from '../Radio/styles';
 import { positionToDataIcon, type IconSlotPosition } from '../../utils/positionToDataIcon';
 import {
+  menuGroupHeaderVariants,
+  menuItemActionVariants,
+  menuItemControlVariants,
+  menuItemCountVariants,
   menuItemIconVariants,
   menuItemLabelVariants,
   menuItemIndicatorVariants,
@@ -53,25 +61,36 @@ 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 FILTER_SLOT_NAMES = new Set(['Menu.ItemControl', 'Menu.ItemAction']);
+
+const hasFilterChrome = (children: ReactNode): boolean =>
+  Children.toArray(children).some((child) => {
+    if (!isValidElement(child)) {
+      return false;
+    }
+    const name = (child.type as { displayName?: string }).displayName;
+    return !!name && FILTER_SLOT_NAMES.has(name);
+  });
+
+const useMenuStyleContext = (): Pick<MenuItemVariantProps, 'color' | 'layout'> => {
   const ctx = useStyleContext(SCOPE) as MenuItemVariantProps | undefined;
-  return { size: ctx?.size ?? 'default', color: ctx?.color ?? 'neutral' };
+  return {
+    color: ctx?.color ?? 'neutral',
+    layout: ctx?.layout ?? 'default',
+  };
 };
 
 const useMenuItemStyleValue = (
-  sizeProp: MenuItemVariantProps['size'],
   color: NonNullable<MenuItemVariantProps['color']>,
+  layout: NonNullable<MenuItemVariantProps['layout']>,
 ) => {
-  const { size: contextSize } = useMenuStyleContext();
   const parent = useParentContext();
-  const size = sizeProp ?? contextSize ?? 'default';
   const contextValue = useMemo(
-    () => ({ ...parent, [SCOPE]: { size, color } }),
-    [parent, size, color],
+    () => ({ ...parent, [SCOPE]: { color, layout } }),
+    [parent, color, layout],
   );
 
-  return { contextValue, size };
+  return { contextValue, layout };
 };
 
 // =============================================================================
@@ -167,9 +186,7 @@ export interface MenuContentProps
 
 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
@@ -203,19 +220,17 @@ const MenuContent = forwardRef<View, MenuContentProps>(
     );
 
     return (
-      <ParentContext.Provider value={ctx}>
-        <MenuRootPrimitive
-          ref={ref}
-          scrollable={shouldScroll}
-          asSurface={asSurface}
-          className={computedClassName}
-          style={[style, constrainedStyle]}
-          {...props}
-          {...contentDataAttributes}
-        >
-          {content}
-        </MenuRootPrimitive>
-      </ParentContext.Provider>
+      <MenuRootPrimitive
+        ref={ref}
+        scrollable={shouldScroll}
+        asSurface={asSurface}
+        className={computedClassName}
+        style={[style, constrainedStyle]}
+        {...props}
+        {...contentDataAttributes}
+      >
+        {content}
+      </MenuRootPrimitive>
     );
   },
 );
@@ -238,22 +253,11 @@ export interface MenuItemProps extends Omit<MenuItemVariantProps, 'color'>, IMen
 }
 
 const MenuItem = forwardRef<View, MenuItemProps>(
-  (
-    {
-      asChild,
-      color = 'neutral',
-      inset = false,
-      size: sizeProp,
-      className,
-      style,
-      children,
-      ...props
-    },
-    ref,
-  ) => {
-    const { contextValue, size } = useMenuItemStyleValue(sizeProp, color);
+  ({ asChild, color = 'neutral', inset = false, className, style, children, ...props }, ref) => {
+    const layout = hasFilterChrome(children) ? 'filter' : 'default';
+    const { contextValue } = useMenuItemStyleValue(color, layout);
 
-    const computedClassName = cn(menuItemVariants({ color, inset, size }), className);
+    const computedClassName = cn(menuItemVariants({ color, inset, layout }), className);
 
     return (
       <ParentContext.Provider value={contextValue}>
@@ -283,27 +287,16 @@ export interface MenuCheckboxItemProps
 }
 
 const MenuCheckboxItem = forwardRef<View, MenuCheckboxItemProps>(
-  (
-    {
-      asChild,
-      color = 'neutral',
-      inset = false,
-      size: sizeProp,
-      className,
-      style,
-      children,
-      ...props
-    },
-    ref,
-  ) => {
-    const { contextValue, size } = useMenuItemStyleValue(sizeProp, color);
+  ({ asChild, color = 'neutral', inset = false, className, style, children, ...props }, ref) => {
+    const layout = hasFilterChrome(children) ? 'filter' : 'default';
+    const { contextValue } = useMenuItemStyleValue(color, layout);
 
     return (
       <ParentContext.Provider value={contextValue}>
         <MenuCheckboxItemPrimitive
           ref={ref}
           asChild={asChild}
-          className={cn(menuItemVariants({ color, inset, size }), className)}
+          className={cn(menuItemVariants({ color, inset, layout }), className)}
           style={style}
           {...props}
           {...mergeDataAttributes(props, dataAttributes({ slot: 'menu-checkbox-item' }))}
@@ -354,7 +347,7 @@ const MenuRadioItem = forwardRef<View, MenuRadioItemProps>(
       asChild,
       color = 'neutral',
       inset = false,
-      size: sizeProp,
+      closeOnSelect,
       className,
       style,
       children,
@@ -362,14 +355,16 @@ const MenuRadioItem = forwardRef<View, MenuRadioItemProps>(
     },
     ref,
   ) => {
-    const { contextValue, size } = useMenuItemStyleValue(sizeProp, color);
+    const layout = hasFilterChrome(children) ? 'filter' : 'default';
+    const { contextValue } = useMenuItemStyleValue(color, layout);
 
     return (
       <ParentContext.Provider value={contextValue}>
         <MenuRadioItemPrimitive
           ref={ref}
           asChild={asChild}
-          className={cn(menuItemVariants({ color, inset, size }), className)}
+          closeOnSelect={closeOnSelect ?? (layout === 'filter' ? false : undefined)}
+          className={cn(menuItemVariants({ color, inset, layout }), className)}
           style={style}
           {...props}
           {...mergeDataAttributes(props, dataAttributes({ slot: 'menu-radio-item' }))}
@@ -387,7 +382,7 @@ MenuRadioItem.displayName = 'Menu.RadioItem';
 // ITEM SLOTS
 // =============================================================================
 
-export interface MenuItemLabelProps extends TextProps, Pick<MenuItemVariantProps, 'size'> {
+export interface MenuItemLabelProps extends TextProps {
   asChild?: boolean;
   className?: string;
   /** Checked state when used outside a selectable Menu item (e.g. `Select.ItemLabel`). */
@@ -395,8 +390,8 @@ export interface MenuItemLabelProps extends TextProps, Pick<MenuItemVariantProps
 }
 
 const MenuItemLabel = forwardRef<Text, MenuItemLabelProps>(
-  ({ asChild, className, style, children, isChecked: checkedProp, size, ...props }, ref) => {
-    const { color } = useMenuStyleContext();
+  ({ asChild, className, style, children, isChecked: checkedProp, ...props }, ref) => {
+    const { color, layout } = useMenuStyleContext();
     const menuItemCtx = useOptionalMenuItemContext();
     const checked = checkedProp ?? menuItemCtx?.checked ?? false;
     const Comp = asChild ? Slot : Text;
@@ -405,7 +400,7 @@ const MenuItemLabel = forwardRef<Text, MenuItemLabelProps>(
       <Comp
         ref={ref}
         className={cn(
-          menuItemLabelVariants({ size, color }),
+          menuItemLabelVariants({ color, layout }),
           checked ? 'font-medium' : undefined,
           className,
         )}
@@ -630,6 +625,145 @@ const MenuSeparator = forwardRef<View, MenuSeparatorProps>(
 
 MenuSeparator.displayName = 'Menu.Separator';
 
+// =============================================================================
+// FILTER SLOTS
+// =============================================================================
+
+export interface MenuGroupHeaderProps extends ViewProps {
+  asChild?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+
+const MenuGroupHeader = forwardRef<View, MenuGroupHeaderProps>(
+  ({ asChild, className, style, children, ...props }, ref) => {
+    const parent = useParentContext();
+    const ctx = useMemo(
+      () => ({
+        ...parent,
+        [SCOPE]: { color: 'neutral' as const, layout: 'filter' as const },
+      }),
+      [parent],
+    );
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <ParentContext.Provider value={ctx}>
+        <Comp
+          ref={ref}
+          className={cn(menuGroupHeaderVariants(), className)}
+          style={style}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'menu-group-header' }))}
+        >
+          {children}
+        </Comp>
+      </ParentContext.Provider>
+    );
+  },
+);
+
+MenuGroupHeader.displayName = 'Menu.GroupHeader';
+
+export interface MenuItemActionProps extends IMenuItemActionProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const MenuItemAction = forwardRef<View, MenuItemActionProps>(
+  ({ asChild, className, style, children, ...props }, ref) => (
+    <MenuItemActionPrimitive
+      ref={ref}
+      asChild={asChild}
+      className={cn(menuItemActionVariants(), className)}
+      style={style}
+      {...props}
+      {...mergeDataAttributes(props, dataAttributes({ slot: 'menu-item-action' }))}
+    >
+      {children}
+    </MenuItemActionPrimitive>
+  ),
+);
+
+MenuItemAction.displayName = 'Menu.ItemAction';
+
+export interface MenuItemControlProps extends ViewProps {
+  className?: string;
+}
+
+const MenuItemControl = ({ className, style, ...props }: MenuItemControlProps) => {
+  const menuItem = useOptionalMenuItemContext();
+  if (!menuItem || menuItem.itemRole === 'menuitem') {
+    return null;
+  }
+
+  const checked = menuItem.checked;
+  const fieldState = checked ? 'checked' : 'idle';
+  const control =
+    menuItem.itemRole === 'menuitemradio' ? (
+      <View className={radioIndicatorVariants()} {...dataAttributes({ checked, fieldState })}>
+        <View
+          collapsable={false}
+          className={radioInnerDotVariants()}
+          {...dataAttributes({ checked, fieldState })}
+        />
+      </View>
+    ) : (
+      <View className={checkboxIndicatorVariants()} {...dataAttributes({ checked, fieldState })}>
+        {checked ? (
+          <Icon
+            as={Check}
+            className={checkboxIconVariants()}
+            accessibilityElementsHidden
+            aria-hidden
+          />
+        ) : null}
+      </View>
+    );
+
+  return (
+    <View
+      className={cn(menuItemControlVariants(), 'pointer-events-none', className)}
+      style={style}
+      accessible={false}
+      accessibilityElementsHidden
+      importantForAccessibility="no-hide-descendants"
+      aria-hidden
+      {...props}
+      {...mergeDataAttributes(props, dataAttributes({ slot: 'menu-item-control' }))}
+    >
+      {control}
+    </View>
+  );
+};
+
+MenuItemControl.displayName = 'Menu.ItemControl';
+
+export interface MenuItemCountProps extends TextProps {
+  asChild?: boolean;
+  className?: string;
+}
+
+const MenuItemCount = forwardRef<Text, MenuItemCountProps>(
+  ({ asChild, className, style, children, ...props }, ref) => {
+    const Comp = asChild ? Slot : Text;
+
+    return (
+      <Comp
+        ref={ref}
+        className={cn(menuItemCountVariants(), className)}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'menu-item-count' }))}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+MenuItemCount.displayName = 'Menu.ItemCount';
+
 // =============================================================================
 // COMPOUND EXPORT
 // =============================================================================
@@ -646,6 +780,10 @@ type MenuCompoundComponent = typeof MenuOverlayRoot & {
   ItemIcon: typeof MenuItemIcon;
   ItemShortcut: typeof MenuItemShortcut;
   ItemIndicator: typeof MenuItemIndicator;
+  ItemAction: typeof MenuItemAction;
+  ItemControl: typeof MenuItemControl;
+  ItemCount: typeof MenuItemCount;
+  GroupHeader: typeof MenuGroupHeader;
   SectionLabel: typeof MenuSectionLabel;
   Separator: typeof MenuSeparator;
 };
@@ -662,6 +800,10 @@ export const Menu = Object.assign(MenuOverlayRoot, {
   ItemIcon: MenuItemIcon,
   ItemShortcut: MenuItemShortcut,
   ItemIndicator: MenuItemIndicator,
+  ItemAction: MenuItemAction,
+  ItemControl: MenuItemControl,
+  ItemCount: MenuItemCount,
+  GroupHeader: MenuGroupHeader,
   SectionLabel: MenuSectionLabel,
   Separator: MenuSeparator,
 }) as MenuCompoundComponent;