@fluentui-react-native/menu 0.9.3 → 0.11.1

package/src/MenuItem/MenuItem.styling.ts

@@ -47,6 +47,13 @@ export const stylingSettings: UseStylingOptions<MenuItemProps, MenuItemSlotProps
       (tokens: MenuItemTokens) => {
         return {
           color: tokens.color,
+          height: 16,
+          width: 16,
+          viewBox:
+            '0 0 ' +
+            (tokens.submenuIndicatorSize - tokens.submenuIndicatorPadding * 2) +
+            ' ' +
+            (tokens.submenuIndicatorSize - tokens.submenuIndicatorPadding * 2),
         };
       },
       ['color'],

package/src/MenuItem/MenuItem.tsx

@@ -1,5 +1,5 @@
 /** @jsx withSlots */
-import { View } from 'react-native';
+import { I18nManager, View } from 'react-native';
 import { SvgXml } from 'react-native-svg';
 import { compose, mergeProps, UseSlots, withSlots } from '@fluentui-react-native/framework';
 import { Text } from '@fluentui-react-native/experimental-text';
@@ -22,10 +22,15 @@ export const MenuItem = compose<MenuItemType>({
 
     return (final: MenuItemProps) => {
       const mergedProps = mergeProps(menuItem.props, final);
-      const chevronXml = `
-      <svg width="12" height="16" viewBox="0 0 11 6">
-        <path fill='currentColor' d='M0.646447 0.646447C0.841709 0.451184 1.15829 0.451184 1.35355 0.646447L5.5 4.79289L9.64645 0.646447C9.84171 0.451185 10.1583 0.451185 10.3536 0.646447C10.5488 0.841709 10.5488 1.15829 10.3536 1.35355L5.85355 5.85355C5.65829 6.04882 5.34171 6.04882 5.14645 5.85355L0.646447 1.35355C0.451184 1.15829 0.451184 0.841709 0.646447 0.646447Z' />
-      </svg>`;
+      const chevronXml = I18nManager.isRTL
+        ? `
+          <svg>
+            <path fill='currentColor' d='M7.35355 2.14645C7.54882 2.34171 7.54882 2.65829 7.35355 2.85355L4.20711 6L7.35355 9.14645C7.54882 9.34171 7.54882 9.65829 7.35355 9.85355C7.15829 10.0488 6.84171 10.0488 6.64645 9.85355L3.14645 6.35355C2.95118 6.15829 2.95118 5.84171 3.14645 5.64645L6.64645 2.14645C6.84171 1.95118 7.15829 1.95118 7.35355 2.14645Z' />
+          </svg>`
+        : `
+          <svg>
+            <path fill='currentColor' d='M4.64645 2.14645C4.45118 2.34171 4.45118 2.65829 4.64645 2.85355L7.79289 6L4.64645 9.14645C4.45118 9.34171 4.45118 9.65829 4.64645 9.85355C4.84171 10.0488 5.15829 10.0488 5.35355 9.85355L8.85355 6.35355C9.04882 6.15829 9.04882 5.84171 8.85355 5.64645L5.35355 2.14645C5.15829 1.95118 4.84171 1.95118 4.64645 2.14645Z' />
+          </svg>`;
 
       return (
         <Slots.root {...mergedProps}>

package/src/MenuItem/MenuItem.types.ts

@@ -10,6 +10,8 @@ export const menuItemName = 'MenuItem';
 
 export interface MenuItemTokens extends LayoutTokens, FontTokens, IBorderTokens, IColorTokens {
   checkmarkSize?: number;
+  submenuIndicatorPadding?: number;
+  submenuIndicatorSize?: number;
   gap?: number;
 
   disabled?: MenuItemTokens;

package/src/MenuItem/MenuItemTokens.ts

@@ -7,6 +7,8 @@ export const defaultMenuItemTokens: TokenSettings<MenuItemTokens, Theme> = (t: T
   backgroundColor: t.colors.neutralBackground1,
   borderRadius: globalTokens.corner.radius.medium,
   checkmarkSize: 16,
+  submenuIndicatorPadding: globalTokens.spacing.none,
+  submenuIndicatorSize: 16,
   color: t.colors.neutralForeground2,
   fontFamily: t.typography.families.primary,
   fontSize: globalTokens.font.size[300],

package/src/MenuItem/MenuItemTokens.win32.ts

@@ -7,6 +7,8 @@ export const defaultMenuItemTokens: TokenSettings<MenuItemTokens, Theme> = (t: T
   backgroundColor: t.colors.neutralBackground1,
   borderRadius: globalTokens.corner.radius.none,
   checkmarkSize: 16,
+  submenuIndicatorPadding: globalTokens.spacing.xxs,
+  submenuIndicatorSize: 16,
   color: t.colors.neutralForeground1,
   fontFamily: t.typography.families.primary,
   fontSize: globalTokens.font.size[200],

package/src/MenuItem/useMenuItem.ts

@@ -5,6 +5,7 @@ import { memoize } from '@fluentui-react-native/framework';
 import { useAsPressable, useKeyProps } from '@fluentui-react-native/interactive-hooks';
 import { useMenuContext } from '../context/menuContext';
 import { useMenuListContext } from '../context/menuListContext';
+import { useMenuTriggerContext } from '../context/menuTriggerContext';
 
 export const useMenuItem = (props: MenuItemProps): MenuItemState => {
   // attach the pressable state handlers
@@ -12,7 +13,8 @@ export const useMenuItem = (props: MenuItemProps): MenuItemState => {
   const { onClick, accessibilityState, componentRef = defaultComponentRef, disabled, ...rest } = props;
   const pressable = useAsPressable({ ...rest, disabled, onPress: onClick });
   const onKeyProps = useKeyProps(onClick, ' ', 'Enter');
-  const hasSubmenu = useMenuContext().isSubmenu;
+  const isTrigger = useMenuTriggerContext();
+  const hasSubmenu = useMenuContext().isSubmenu && isTrigger;
   const hasCheckmarks = useMenuListContext().hasCheckmarks;
 
   return {

package/src/MenuItemCheckbox/MenuItemCheckbox.tsx

@@ -1,9 +1,15 @@
 /** @jsx withSlots */
 import { View } from 'react-native';
 import { SvgXml } from 'react-native-svg';
-import { compose, mergeProps, UseSlots, withSlots } from '@fluentui-react-native/framework';
+import { compose, mergeProps, Slots, UseSlots, withSlots } from '@fluentui-react-native/framework';
 import { Text } from '@fluentui-react-native/experimental-text';
-import { menuItemCheckboxName, MenuItemCheckboxProps, MenuItemCheckboxType } from './MenuItemCheckbox.types';
+import {
+  menuItemCheckboxName,
+  MenuItemCheckboxProps,
+  MenuItemCheckboxSlotProps,
+  MenuItemCheckboxState,
+  MenuItemCheckboxType,
+} from './MenuItemCheckbox.types';
 import { useMenuItemCheckbox } from './useMenuItemCheckbox';
 import { stylingSettings } from './MenuItemCheckbox.styling';
 
@@ -19,19 +25,26 @@ export const MenuItemCheckbox = compose<MenuItemCheckboxType>({
     const menuItem = useMenuItemCheckbox(userProps);
     const Slots = useSlots(userProps, (layer): boolean => menuItem.state[layer]);
 
-    return (final: MenuItemCheckboxProps) => {
-      const mergedProps = mergeProps(menuItem.props, final);
-      const chevronXml = `
-      <svg>
-        <path fill='currentColor' d='M9.85355 3.14645C10.0488 3.34171 10.0488 3.65829 9.85355 3.85355L5.35355 8.35355C5.15829 8.54882 4.84171 8.54882 4.64645 8.35355L2.64645 6.35355C2.45118 6.15829 2.45118 5.84171 2.64645 5.64645C2.84171 5.45118 3.15829 5.45118 3.35355 5.64645L5 7.29289L9.14645 3.14645C9.34171 2.95118 9.65829 2.95118 9.85355 3.14645Z' />
-      </svg>`;
-
-      return (
-        <Slots.root {...mergedProps}>
-          <Slots.checkmark xml={chevronXml} />
-          {mergedProps.content && <Slots.content>{mergedProps.content}</Slots.content>}
-        </Slots.root>
-      );
-    };
+    return menuItemFinalRender(menuItem, Slots);
   },
 });
+
+export const menuItemFinalRender = (
+  menuItem: MenuItemCheckboxState,
+  Slots: Slots<MenuItemCheckboxSlotProps>,
+): React.FunctionComponent<MenuItemCheckboxProps> => {
+  return (final: MenuItemCheckboxProps) => {
+    const mergedProps = mergeProps(menuItem.props, final);
+    const checkmarkXml = `
+    <svg>
+      <path fill='currentColor' d='M9.85355 3.14645C10.0488 3.34171 10.0488 3.65829 9.85355 3.85355L5.35355 8.35355C5.15829 8.54882 4.84171 8.54882 4.64645 8.35355L2.64645 6.35355C2.45118 6.15829 2.45118 5.84171 2.64645 5.64645C2.84171 5.45118 3.15829 5.45118 3.35355 5.64645L5 7.29289L9.14645 3.14645C9.34171 2.95118 9.65829 2.95118 9.85355 3.14645Z' />
+    </svg>`;
+
+    return (
+      <Slots.root {...mergedProps}>
+        <Slots.checkmark xml={checkmarkXml} />
+        {mergedProps.content && <Slots.content>{mergedProps.content}</Slots.content>}
+      </Slots.root>
+    );
+  };
+};

package/src/MenuItemCheckbox/useMenuItemCheckbox.ts

@@ -14,7 +14,41 @@ import { useMenuListContext } from '../context/menuListContext';
 const defaultAccessibilityActions = [{ name: 'Toggle' }];
 
 export const useMenuItemCheckbox = (props: MenuItemCheckboxProps): MenuItemCheckboxState => {
-  // attach the pressable state handlers
+  const { name } = props;
+  const context = useMenuListContext();
+  const checked = context.checked?.[name];
+  const onCheckedChange = context.onCheckedChange;
+
+  const toggleChecked = React.useCallback(
+    (e: InteractionEvent) => {
+      onCheckedChange(e, name, !checked);
+    },
+    [checked, name, onCheckedChange],
+  );
+
+  return useMenuCheckboxInteraction(props, toggleChecked);
+};
+
+const getAccessibilityState = memoize(getAccessibilityStateWorker);
+function getAccessibilityStateWorker(disabled: boolean, checked: boolean, accessibilityState?: AccessibilityState) {
+  if (accessibilityState) {
+    return { disabled, checked, ...accessibilityState };
+  }
+  return { disabled, checked };
+}
+
+/**
+ * Create interactivity and accessibility props to be passed into the inner render.
+ * This logic is shared between Checkbox and Radio versions of MenuItem.
+ *
+ * @param props Props passed into the outer compoennt
+ * @param toggleCallback Function to be called when item is toggled
+ * @returns Props and additional state needed to render the component
+ */
+export const useMenuCheckboxInteraction = (
+  props: MenuItemCheckboxProps,
+  toggleCallback: (e: InteractionEvent) => void,
+): MenuItemCheckboxState => {
   const defaultComponentRef = React.useRef(null);
   const {
     accessibilityActions,
@@ -27,32 +61,25 @@ export const useMenuItemCheckbox = (props: MenuItemCheckboxProps): MenuItemCheck
   } = props;
   const context = useMenuListContext();
   const checked = context.checked?.[name];
-  const onCheckedChange = context.onCheckedChange;
 
-  const toggleChecked = React.useCallback(
-    (e: InteractionEvent) => {
-      onCheckedChange(e, name, !checked);
-    },
-    [checked, name, onCheckedChange],
-  );
   // Ensure focus is placed on checkbox after click
-  const toggleCheckedWithFocus = useOnPressWithFocus(componentRef, toggleChecked);
+  const toggleCheckedWithFocus = useOnPressWithFocus(componentRef, toggleCallback);
 
   const pressable = useAsPressable({ onPress: toggleCheckedWithFocus, ...rest });
   const buttonRef = useViewCommandFocus(componentRef);
 
-  const onKeyProps = useKeyProps(toggleChecked, ' ');
+  const onKeyProps = useKeyProps(toggleCallback, ' ');
   const accessibilityActionsProp = accessibilityActions
     ? [...defaultAccessibilityActions, ...accessibilityActions]
     : defaultAccessibilityActions;
   const onAccessibilityActionProp = React.useCallback(
     (event: AccessibilityActionEvent) => {
       if (event.nativeEvent.actionName === 'Toggle') {
-        toggleChecked(event);
+        toggleCallback(event);
       }
       onAccessibilityAction && onAccessibilityAction(event);
     },
-    [toggleChecked, onAccessibilityAction],
+    [toggleCallback, onAccessibilityAction],
   );
 
   const state = {
@@ -78,11 +105,3 @@ export const useMenuItemCheckbox = (props: MenuItemCheckboxProps): MenuItemCheck
     state: state,
   };
 };
-
-const getAccessibilityState = memoize(getAccessibilityStateWorker);
-function getAccessibilityStateWorker(disabled: boolean, checked: boolean, accessibilityState?: AccessibilityState) {
-  if (accessibilityState) {
-    return { disabled, checked, ...accessibilityState };
-  }
-  return { disabled, checked };
-}

package/src/MenuItemRadio/MenuItemRadio.tsx

@@ -0,0 +1,16 @@
+import { UseSlots } from '@fluentui-react-native/framework';
+import { useMenuItemRadio } from './useMenuItemRadio';
+import { MenuItemCheckbox, menuItemFinalRender } from '../MenuItemCheckbox/MenuItemCheckbox';
+import { MenuItemCheckboxProps, MenuItemCheckboxType } from '../MenuItemCheckbox/MenuItemCheckbox.types';
+
+export const menuItemRadioName = 'MenuItemRadio';
+
+export const MenuItemRadio = MenuItemCheckbox.compose({
+  displayName: menuItemRadioName,
+  useRender: (userProps: MenuItemCheckboxProps, useSlots: UseSlots<MenuItemCheckboxType>) => {
+    const menuItem = useMenuItemRadio(userProps);
+    const Slots = useSlots(userProps, (layer): boolean => menuItem.state[layer]);
+
+    return menuItemFinalRender(menuItem, Slots);
+  },
+});

package/src/MenuItemRadio/useMenuItemRadio.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
+import { useMenuListContext } from '../context/menuListContext';
+import { MenuItemCheckboxProps, MenuItemCheckboxState } from '../MenuItemCheckbox/MenuItemCheckbox.types';
+import { useMenuCheckboxInteraction } from '../MenuItemCheckbox/useMenuItemCheckbox';
+
+export const useMenuItemRadio = (props: MenuItemCheckboxProps): MenuItemCheckboxState => {
+  const { name } = props;
+  const context = useMenuListContext();
+  const checked = context.checked?.[name];
+  const selectRadio = context.selectRadio;
+
+  const toggleChecked = React.useCallback(
+    (e: InteractionEvent) => {
+      selectRadio(e, name, !checked);
+    },
+    [checked, name, selectRadio],
+  );
+
+  return useMenuCheckboxInteraction(props, toggleChecked);
+};

package/src/MenuList/MenuList.types.ts

@@ -17,6 +17,7 @@ export interface MenuListProps extends Omit<IViewProps, 'onPress'> {
 
 export interface MenuListState extends MenuListProps {
   isCheckedControlled: boolean;
+  selectRadio?: (e: InteractionEvent, name: string, isChecked: boolean) => void;
 }
 
 export interface MenuListSlotProps {

package/src/MenuList/useMenuList.ts

@@ -9,20 +9,25 @@ export const useMenuList = (_props: MenuListProps): MenuListState => {
   // MenuList v2 needs to be able to be standalone, but this is not in scope for v1
   // Assuming that checked information will come from parent Menu
   const isCheckedControlled = typeof context.checked !== 'undefined';
-  const [checked, onCheckedChange] = useMenuCheckedState(isCheckedControlled, context);
+  const [checked, onCheckedChange, selectRadio] = useMenuCheckedState(isCheckedControlled, context);
 
   return {
     ...context,
     isCheckedControlled,
     checked,
     onCheckedChange,
+    selectRadio,
   };
 };
 
 const useMenuCheckedState = (
   isControlled: boolean,
   props: MenuListProps,
-): [Record<string, boolean>, (e: InteractionEvent, name: string, isChecked: boolean) => void] => {
+): [
+  Record<string, boolean>,
+  (e: InteractionEvent, name: string, isChecked: boolean) => void,
+  (e: InteractionEvent, name: string, isChecked: boolean) => void,
+] => {
   const { defaultChecked, onCheckedChange, checked } = props;
   const initialState = defaultChecked ?? checked ?? {};
   const [checkedInternal, setCheckedInternal] = React.useState<Record<string, boolean>>(initialState);
@@ -45,5 +50,19 @@ const useMenuCheckedState = (
     [isControlled, state, onCheckedChange, setCheckedInternal],
   );
 
-  return [state, setChecked];
+  const selectRadio = React.useCallback(
+    (e: InteractionEvent, name: string, isChecked: boolean) => {
+      if (!isControlled) {
+        const updatedChecked = { [name]: true };
+        setCheckedInternal(updatedChecked);
+      }
+
+      if (onCheckedChange) {
+        onCheckedChange(e, name, isChecked);
+      }
+    },
+    [isControlled, onCheckedChange, setCheckedInternal],
+  );
+
+  return [state, setChecked, selectRadio];
 };

package/src/MenuPopover/MenuPopover.tsx

@@ -16,6 +16,9 @@ export const MenuPopover = stagedComponent((props: MenuPopoverProps) => {
         target={state.triggerRef}
         onDismiss={state.onDismiss}
         dismissBehaviors={state.dismissBehaviors}
+        setInitialFocus={state.setInitialFocus}
+        directionalHint={state.directionalHint}
+        doNotTakePointerCapture={state.doNotTakePointerCapture}
       >
         {children}
       </Callout>

package/src/MenuPopover/MenuPopover.types.ts

@@ -1,12 +1,15 @@
 import type { IViewProps } from '@fluentui-react-native/adapters';
-import { DismissBehaviors } from '@fluentui-react-native/callout';
+import { DirectionalHint, DismissBehaviors } from '@fluentui-react-native/callout';
 
 export const menuPopoverName = 'MenuPopover';
 
 export interface MenuPopoverProps extends Omit<IViewProps, 'onPress'> {}
 
 export interface MenuPopoverState {
+  directionalHint?: DirectionalHint;
   dismissBehaviors: DismissBehaviors[];
+  doNotTakePointerCapture: boolean;
   onDismiss: () => void;
+  setInitialFocus: boolean;
   triggerRef: React.RefObject<React.Component>;
 }

package/src/MenuPopover/useMenuPopover.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-import { DismissBehaviors } from '@fluentui-react-native/callout';
+import { I18nManager, Platform } from 'react-native';
+import { DirectionalHint, DismissBehaviors } from '@fluentui-react-native/callout';
 import { useMenuContext } from '../context/menuContext';
 import { MenuPopoverProps, MenuPopoverState } from './MenuPopover.types';
 
@@ -12,6 +13,24 @@ export const useMenuPopover = (_props: MenuPopoverProps): MenuPopoverState => {
   const dismissBehaviors = context.isControlled
     ? (['preventDismissOnKeyDown', 'preventDismissOnClickOutside'] as DismissBehaviors[])
     : undefined;
+  const directionalHint = getDirectionalHint(context.isSubmenu, I18nManager.isRTL);
 
-  return { triggerRef, onDismiss, dismissBehaviors };
+  // Initial focus behavior differs per platform, Windows platforms move focus
+  // automatically onto first element of Callout
+  const setInitialFocus = Platform.OS === ('win32' as any) || Platform.OS === 'windows';
+  const doNotTakePointerCapture = context.openOnHover;
+
+  return { triggerRef, onDismiss, directionalHint, dismissBehaviors, doNotTakePointerCapture, setInitialFocus };
+};
+
+const getDirectionalHint = (isSubmenu: boolean, isRtl: boolean): DirectionalHint | undefined => {
+  if (!isSubmenu) {
+    return undefined;
+  }
+
+  if (isRtl) {
+    return 'leftTopEdge';
+  }
+
+  return 'rightTopEdge';
 };

package/src/MenuTrigger/MenuTrigger.tsx

@@ -2,9 +2,10 @@ import React from 'react';
 import { stagedComponent } from '@fluentui-react-native/framework';
 import { menuTriggerName, MenuTriggerProps } from './MenuTrigger.types';
 import { useMenuTrigger } from './useMenuTrigger';
+import { MenuTriggerProvider } from '../context/menuTriggerContext';
 
 export const MenuTrigger = stagedComponent((props: MenuTriggerProps) => {
-  const state = useMenuTrigger(props);
+  const menuTrigger = useMenuTrigger(props);
 
   return (_rest: MenuTriggerProps, children: React.ReactNode) => {
     const childrenArray = React.Children.toArray(children) as React.ReactElement[];
@@ -16,9 +17,9 @@ export const MenuTrigger = stagedComponent((props: MenuTriggerProps) => {
     }
 
     const child = childrenArray[0];
-    const revised = React.cloneElement(child, state);
+    const revised = React.cloneElement(child, menuTrigger.props);
 
-    return <>{revised}</>;
+    return <MenuTriggerProvider value={menuTrigger.hasSubmenu}>{revised}</MenuTriggerProvider>;
   };
 });
 MenuTrigger.displayName = menuTriggerName;

package/src/MenuTrigger/MenuTrigger.types.ts

@@ -1,7 +1,18 @@
-import type { IViewProps } from '@fluentui-react-native/adapters';
+import { InteractionEvent, IWithPressableOptions } from '@fluentui-react-native/interactive-hooks';
+import { ViewProps } from 'react-native';
 
 export const menuTriggerName = 'MenuTrigger';
 
-export interface MenuTriggerProps extends Omit<IViewProps, 'onPress'> {}
+export interface MenuTriggerProps extends Omit<IWithPressableOptions<ViewProps>, 'onPress'> {
+  /**
+   * A RefObject to refer to the trigger component.
+   */
+  componentRef?: React.RefObject<React.Component>;
 
-export interface MenuTriggerState {}
+  onClick?: (e: InteractionEvent) => void;
+}
+
+export interface MenuTriggerState {
+  props: MenuTriggerProps;
+  hasSubmenu: boolean;
+}

package/src/MenuTrigger/useMenuTrigger.ts

@@ -1,8 +1,9 @@
 import { useMenuContext } from '../context/menuContext';
 import { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
-import { MenuTriggerProps } from './MenuTrigger.types';
+import { MenuTriggerProps, MenuTriggerState } from './MenuTrigger.types';
+import { Platform } from 'react-native';
 
-export const useMenuTrigger = (_props: MenuTriggerProps) => {
+export const useMenuTrigger = (_props: MenuTriggerProps): MenuTriggerState => {
   const context = useMenuContext();
 
   const setOpen = context.setOpen;
@@ -10,15 +11,29 @@ export const useMenuTrigger = (_props: MenuTriggerProps) => {
   const openOnHover = context.openOnHover;
   const triggerRef = context.triggerRef;
 
+  const delayHover = Platform.select({
+    macos: 100,
+    default: 500, // win32
+  });
+
   const onHoverIn = (e: InteractionEvent) => {
     if (openOnHover) {
       setOpen(e, true /* isOpen */);
     }
   };
 
+  const onHoverOut = (e: InteractionEvent) => {
+    if (openOnHover) {
+      setOpen(e, false /* isOpen */);
+    }
+  };
+
   const onClick = (e: InteractionEvent) => {
     setOpen(e, !open);
   };
 
-  return { onClick, onHoverIn, componentRef: triggerRef };
+  return {
+    props: { onClick, onHoverIn, onHoverOut, componentRef: triggerRef, delayHoverIn: delayHover, delayHoverOut: delayHover },
+    hasSubmenu: context.isSubmenu,
+  };
 };

package/src/context/menuTriggerContext.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+
+/**
+ * This context keeps track of whether a trigger component is for a submenu.
+ * This allows the trigger to show a submenu indicator.
+ */
+export const MenuTriggerContext = React.createContext<boolean>(false);
+
+export const MenuTriggerProvider = MenuTriggerContext.Provider;
+export const useMenuTriggerContext = () => React.useContext(MenuTriggerContext);

package/src/index.ts

@@ -3,5 +3,6 @@ export { MenuTrigger } from './MenuTrigger/MenuTrigger';
 export { MenuPopover } from './MenuPopover/MenuPopover';
 export { MenuItem } from './MenuItem/MenuItem';
 export { MenuItemCheckbox } from './MenuItemCheckbox/MenuItemCheckbox';
+export { MenuItemRadio } from './MenuItemRadio/MenuItemRadio';
 export { MenuList } from './MenuList/MenuList';
 export { MenuDivider } from './MenuDivider/MenuDivider';