@fluentui-react-native/menu 1.4.33 → 1.5.0

package/src/MenuList/MenuList.styling.ts

@@ -1,3 +1,5 @@
+import { Platform } from 'react-native';
+
 import type { Theme, UseStylingOptions } from '@fluentui-react-native/framework';
 import { buildProps } from '@fluentui-react-native/framework';
 import { layoutStyles } from '@fluentui-react-native/tokens';
@@ -18,6 +20,7 @@ export const stylingSettings: UseStylingOptions<MenuListProps, MenuListSlotProps
           backgroundColor: tokens.backgroundColor,
           display: 'flex',
           ...layoutStyles.from(tokens, theme),
+          ...(Platform.OS === 'android' && { borderRadius: tokens.cornerRadius }),
         },
         gap: tokens.gap,
       }),

package/src/MenuList/MenuList.types.ts

@@ -18,6 +18,11 @@ export interface MenuListTokens extends LayoutTokens, IBackgroundColorTokens {
    * States of the list control
    */
   hasMaxHeight?: MenuListTokens;
+
+  /**
+   * Corner radius of the menu list
+   */
+  cornerRadius?: number;
 }
 
 export interface MenuListProps extends Omit<IViewProps, 'onPress'> {

package/src/MenuList/MenuListTokens.android.ts

@@ -0,0 +1,11 @@
+import type { Theme } from '@fluentui-react-native/framework';
+import { globalTokens } from '@fluentui-react-native/theme-tokens';
+import type { TokenSettings } from '@fluentui-react-native/use-styling';
+
+import type { MenuListTokens } from './MenuList.types';
+
+export const defaultMenuListTokens: TokenSettings<MenuListTokens, Theme> = (t: Theme): MenuListTokens => ({
+  backgroundColor: t.colors.neutralBackground1,
+  cornerRadius: globalTokens.corner.radius80,
+  paddingVertical: globalTokens.size80,
+});

package/src/MenuPopover/MenuPopover.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { Platform, View } from 'react-native';
 
-import { Callout } from '@fluentui-react-native/callout';
 import type { UseTokens } from '@fluentui-react-native/framework';
 import { compressible, mergeProps, patchTokens, useFluentTheme } from '@fluentui-react-native/framework';
 
@@ -10,6 +9,7 @@ import { menuPopoverName } from './MenuPopover.types';
 import { useMenuPopoverTokens } from './MenuPopoverTokens';
 import { useMenuPopover } from './useMenuPopover';
 import { useMenuContext } from '../context';
+import { MenuCallout } from '../MenuCallout';
 
 export const MenuPopover = compressible<MenuPopoverProps, MenuPopoverTokens>(
   (props: MenuPopoverProps, useTokens: UseTokens<MenuPopoverTokens>) => {
@@ -47,7 +47,11 @@ export const MenuPopover = compressible<MenuPopoverProps, MenuPopoverTokens>(
             }
           : state.innerView;
       const content = React.createElement(View, innerViewProps, children);
-      return <Callout {...mergedProps}>{content}</Callout>;
+      return (
+        <MenuCallout tokens={tokens} {...mergedProps}>
+          {content}
+        </MenuCallout>
+      );
     };
   },
   useMenuPopoverTokens,

package/src/MenuPopover/MenuPopover.types.ts

@@ -5,7 +5,20 @@ export const menuPopoverName = 'MenuPopover';
 
 // Support for anchorRect and beakWidth will come at a later time.
 // Omitting dismissBehaviors as it doesn't seem to make sense as a token
-export type MenuPopoverTokens = Omit<ICalloutTokens, 'anchorRect' | 'beakWidth' | 'dismissBehaviors'>;
+export type MenuPopoverTokens =
+  | Omit<ICalloutTokens, 'anchorRect' | 'beakWidth' | 'dismissBehaviors'> & {
+      /**
+       * The props for the corner radius for the Modal MenuPopover
+       * @platform android
+       */
+      cornerRadius?: number;
+
+      /**
+       * Shadown elevation for the Modal MenuPopover
+       * @platform android
+       */
+      elevation?: number;
+    };
 
 export type MenuPopoverProps = ICalloutProps;
 

package/src/MenuPopover/MenuPopoverTokens.android.ts

@@ -0,0 +1,21 @@
+import { Dimensions } from 'react-native';
+
+import type { Theme } from '@fluentui-react-native/framework';
+import { buildUseTokens } from '@fluentui-react-native/framework';
+import { globalTokens } from '@fluentui-react-native/theme-tokens';
+
+import type { MenuPopoverTokens } from './MenuPopover.types';
+import { menuPopoverName } from './MenuPopover.types';
+
+export const useMenuPopoverTokens = buildUseTokens<MenuPopoverTokens>(
+  (t: Theme) => ({
+    borderWidth: 1,
+    borderColor: t.colors.neutralStrokeAccessible,
+    maxHeight: Dimensions.get('window').height / 2 - globalTokens.size320, // Getting window height size and subtracting the padding considering on vertical
+    maxWidth: Dimensions.get('window').width - globalTokens.size160, // Getting window height size and subtracting the screen offset a/c design
+    cornerRadius: globalTokens.corner.radius80,
+    elevation: globalTokens.size160,
+    minPadding: globalTokens.size160,
+  }),
+  menuPopoverName,
+);

package/src/index.ts

@@ -36,7 +36,16 @@ export {
   useMenuCheckboxInteraction,
   useMenuItemCheckbox,
 } from './MenuItemCheckbox';
-export { MenuItemRadio, menuItemRadioName, useMenuItemRadio } from './MenuItemRadio';
+export {
+  MenuItemRadio,
+  menuItemRadioName,
+  useMenuItemRadio,
+  MenuItemRadioInfo,
+  MenuItemRadioProps,
+  MenuItemRadioSlotProps,
+  MenuItemRadioTokens,
+  MenuItemRadioType,
+} from './MenuItemRadio';
 export {
   MenuList,
   menuListName,