@fluentui-react-native/menu 1.4.34 → 1.6.0

package/src/MenuItemRadio/MenuItemRadio.tsx

@@ -1,17 +1,76 @@
-import type { UseSlots } from '@fluentui-react-native/framework';
+/** @jsx withSlots */
+import React from 'react';
+import { Image, Platform, Pressable, View } from 'react-native';
 
-import { useMenuItemRadio } from './useMenuItemRadio';
-import { MenuItemCheckbox, menuItemFinalRender } from '../MenuItemCheckbox/MenuItemCheckbox';
-import type { MenuItemCheckboxProps, MenuItemCheckboxType } from '../MenuItemCheckbox/MenuItemCheckbox.types';
+import type { Slots, UseSlots } from '@fluentui-react-native/framework';
+import { compose, mergeProps, withSlots } from '@fluentui-react-native/framework';
+import { IconV1 as Icon } from '@fluentui-react-native/icon';
+import { TextV1 as Text } from '@fluentui-react-native/text';
+import { SvgXml } from 'react-native-svg';
 
-export const menuItemRadioName = 'MenuItemRadio';
+import { stylingSettings } from './MenuItemRadio.styling';
+import type { MenuItemRadioInfo, MenuItemRadioProps, MenuItemRadioSlotProps, MenuItemRadioType } from './MenuItemRadio.types';
+import { menuItemRadioName } from './MenuItemRadio.types';
+import { useMenuItemRadio } from './useMenuItemRadio';
+import { getAccessibilityLabel, getTooltip } from '../MenuItem/MenuItem';
 
-export const MenuItemRadio = MenuItemCheckbox.compose({
+export const MenuItemRadio = compose<MenuItemRadioType>({
   displayName: menuItemRadioName,
-  useRender: (userProps: MenuItemCheckboxProps, useSlots: UseSlots<MenuItemCheckboxType>) => {
+  ...stylingSettings,
+  slots: {
+    root: Pressable,
+    radioInnerCircle: View,
+    radioButton: Pressable,
+    checkmark: SvgXml,
+    content: Text,
+    iconPlaceholder: View,
+    imgIcon: Image,
+    fontOrSvgIcon: Icon,
+  },
+  useRender: (userProps: MenuItemRadioProps, useSlots: UseSlots<MenuItemRadioType>) => {
     const menuItem = useMenuItemRadio(userProps);
-    const Slots = useSlots(userProps, (layer): boolean => menuItem.state[layer]);
+    const Slots = useSlots(userProps, (layer): boolean => menuItem.state[layer] || userProps[layer]);
 
-    return menuItemFinalRender(menuItem, Slots);
+    return menuItemRadioFinalRender(menuItem, Slots);
   },
 });
+
+export const menuItemRadioFinalRender = (
+  menuItem: MenuItemRadioInfo,
+  Slots: Slots<MenuItemRadioSlotProps>,
+): React.FunctionComponent<MenuItemRadioProps> => {
+  return (final: MenuItemRadioProps, children: React.ReactNode) => {
+    const { accessibilityLabel, icon, tooltip, ...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>`;
+
+    const label = getAccessibilityLabel(accessibilityLabel, children[0]);
+    const tooltipResult = getTooltip(tooltip, menuItem.state.hasTooltips, children[0]);
+
+    return (
+      <Slots.root {...mergedProps} accessibilityLabel={label}>
+        {Platform.OS === 'android' ? (
+          <Slots.radioButton onPress={mergedProps.onPress} accessible={false} focusable={false}>
+            <Slots.radioInnerCircle />
+          </Slots.radioButton>
+        ) : (
+          <Slots.checkmark accessible={false} xml={checkmarkXml} />
+        )}
+        {(icon || menuItem.state.hasIcons) && (
+          <Slots.iconPlaceholder accessible={false}>
+            {icon && icon.source && <Slots.imgIcon accessible={false} {...icon} />}
+            {icon && (icon.svgSource || icon.fontSource) && <Slots.fontOrSvgIcon accessible={false} {...icon} />}
+          </Slots.iconPlaceholder>
+        )}
+        {children && (
+          <Slots.content accessible={false} tooltip={tooltipResult}>
+            {children}
+          </Slots.content>
+        )}
+      </Slots.root>
+    );
+  };
+};

package/src/MenuItemRadio/MenuItemRadio.types.ts

@@ -0,0 +1,160 @@
+import type * as React from 'react';
+import type { ColorValue, ImageProps, ViewStyle } from 'react-native';
+
+import type { IViewProps } from '@fluentui-react-native/adapters';
+import type { IconPropsV1 as IconProps } from '@fluentui-react-native/icon';
+import type { PressablePropsExtended, PressableState } from '@fluentui-react-native/interactive-hooks';
+import type { TextProps } from '@fluentui-react-native/text';
+import type { XmlProps } from 'react-native-svg';
+
+import type { MenuItemProps, MenuItemTokens } from '../MenuItem/MenuItem.types';
+
+export const menuItemRadioName = 'MenuItemRadio';
+
+export interface MenuItemRadioTokens
+  extends Omit<MenuItemTokens, 'submenuIndicatorPadding' | 'submenuIndicatorSize' | 'disabled' | 'focused' | 'hovered' | 'pressed'> {
+  /**
+   * Color of the checkmark icon
+   */
+  checkmarkColor?: ColorValue;
+
+  /**
+   * Amount of space in pixels around the checkmark icon
+   */
+  checkmarkPadding?: number;
+
+  /**
+   * Visibility of the checkmark icon from 0 to 1
+   */
+  checkmarkVisibility?: number;
+
+  /**
+   * Color of the icon
+   */
+  iconColor?: ColorValue;
+
+  /**
+   * Size of the icon. Pixels for SVG and points for font icon.
+   */
+  iconSize?: number;
+
+  /**
+   * Ripple color for Android.
+   *
+   * A ripple animation is shown on click for Android. This sets the color of the ripple.
+   * @platform android
+   */
+  rippleColor?: ColorValue;
+
+  /**
+   * Color of the background of the box containing the radio.
+   * @platform android
+   */
+  radioBackgroundColor?: ColorValue;
+
+  /**
+   * Color of the border of the box containing the radio.
+   * @platform android
+   */
+  radioBorderColor?: ColorValue;
+
+  /**
+   * Border radius of the box containing the radio.
+   * @platform android
+   */
+  radioBorderRadius?: number;
+
+  /**
+   * Height and width of the box containing the radio.
+   * @platform android
+   */
+  radioSize?: number;
+
+  /**
+   * Indicator  radio border color
+   * @platform android
+   */
+  radioBorder?: ColorValue;
+
+  /**
+   * Indicator radio border style
+   * @platform android
+   */
+  radioBorderStyle?: ViewStyle['borderStyle'];
+
+  /**
+   * Inner circle color when selected
+   * @platform android
+   */
+  radioFill?: ColorValue;
+
+  /**
+   * Visibility of the radio inner circle from 0 to 1
+   * @platform android
+   */
+  radioVisibility?: number;
+
+  /**
+   * Diameter size of the outer indicator
+   * @platform android
+   */
+  radioOuterCircleSize?: number;
+
+  /**
+   * Diameter size of the inner circle indicator
+   * @platform android
+   */
+  radioInnerCircleSize?: number;
+
+  /**
+   * Border width of Radio
+   * @platform android
+   */
+  radioBorderWidth?: number;
+
+  /**
+   * Ripple radius for circular radio on Android.
+   *
+   * A ripple animation is shown on click for Android. This sets the radius of the circular ripple shown on the radio button.
+   * @platform android
+   */
+  rippleRadius?: number;
+
+  /**
+   * States of the item control
+   */
+  checked?: MenuItemRadioTokens;
+  disabled?: MenuItemRadioTokens;
+  focused?: MenuItemRadioTokens;
+  hovered?: MenuItemRadioTokens;
+  pressed?: MenuItemRadioTokens;
+}
+
+export interface MenuItemRadioProps extends MenuItemProps {
+  /**
+   * Identifier for the control
+   */
+  name: string;
+}
+
+export interface MenuItemRadioInfo {
+  props: MenuItemRadioProps & React.ComponentPropsWithRef<any>;
+  state: PressableState & { hasIcons: boolean; hasTooltips: boolean };
+}
+
+export interface MenuItemRadioSlotProps {
+  root: React.PropsWithRef<PressablePropsExtended>;
+  content?: TextProps;
+  checkmark?: XmlProps;
+  radioButton?: PressablePropsExtended;
+  radioInnerCircle?: React.PropsWithRef<IViewProps>;
+  iconPlaceholder?: React.PropsWithRef<IViewProps>;
+  imgIcon?: ImageProps;
+  fontOrSvgIcon?: IconProps;
+}
+
+export interface MenuItemRadioType {
+  props: MenuItemRadioProps;
+  tokens: MenuItemRadioTokens;
+  slotProps: MenuItemRadioSlotProps;
+}

package/src/MenuItemRadio/MenuItemRadioTokens.android.ts

@@ -0,0 +1,51 @@
+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 { MenuItemRadioTokens } from './MenuItemRadio.types';
+
+export const defaultMenuItemRadioTokens: TokenSettings<MenuItemRadioTokens, Theme> = (t: Theme): MenuItemRadioTokens => ({
+  checkmarkSize: globalTokens.size120,
+  color: t.colors.neutralForeground1,
+  variant: 'body1',
+  gap: globalTokens.size160,
+  iconColor: t.colors.neutralForeground2,
+  iconSize: globalTokens.size200,
+  maxWidth: 300,
+  paddingVertical: globalTokens.size60,
+  paddingHorizontal: globalTokens.size160,
+
+  radioOuterCircleSize: globalTokens.size200,
+  radioInnerCircleSize: globalTokens.size100,
+  radioBorderStyle: 'solid',
+  radioBorderWidth: globalTokens.stroke.width15,
+  rippleRadius: globalTokens.size160,
+
+  // Unselected, Rest
+  radioBorder: t.colors.neutralStrokeAccessible,
+  radioVisibility: 0,
+
+  rippleColor: '#D4D4D4',
+  pressed: {
+    backgroundColor: t.colors.neutralBackground1Pressed,
+  },
+  disabled: {
+    backgroundColor: t.colors.neutralBackground1,
+    color: t.colors.neutralForegroundDisabled1,
+    iconColor: t.colors.neutralForegroundDisabled,
+    // Unselected, Disabled
+    rippleColor: '#D4D4D4',
+    radioBorder: t.colors.neutralStrokeDisabled,
+    radioVisibility: 0,
+    checked: {
+      radioBorder: t.colors.brandBackgroundDisabled,
+      radioFill: t.colors.brandForegroundDisabled2,
+      radioVisibility: 1,
+    },
+  },
+  checked: {
+    radioBorder: t.colors.brandBackground,
+    radioFill: t.colors.brandForeground1,
+    radioVisibility: 1,
+  },
+});

package/src/MenuItemRadio/MenuItemRadioTokens.ts

@@ -0,0 +1,56 @@
+import type { FontWeightValue, 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 { MenuItemRadioTokens } from './MenuItemRadio.types';
+
+export const defaultMenuItemRadioTokens: TokenSettings<MenuItemRadioTokens, Theme> = (t: Theme): MenuItemRadioTokens => ({
+  backgroundColor: t.colors.neutralBackground1,
+  borderRadius: globalTokens.corner.radiusNone,
+  checkmarkPadding: globalTokens.size20,
+  checkmarkSize: 16,
+  checkmarkVisibility: 0,
+  color: t.colors.neutralForeground1,
+  fontFamily: t.typography.families.primary,
+  fontSize: globalTokens.font.size200,
+  fontWeight: globalTokens.font.weight.regular as FontWeightValue,
+  gap: globalTokens.size40,
+  iconColor: t.colors.neutralForeground1,
+  iconSize: 16,
+  minHeight: 24,
+  minWidth: 160,
+  maxWidth: 300,
+  padding: globalTokens.size40,
+  paddingHorizontal: globalTokens.size80,
+  pressed: {
+    backgroundColor: t.colors.neutralBackground1Pressed,
+    color: t.colors.neutralForeground1Pressed,
+    iconColor: t.colors.neutralForeground1Pressed,
+    checked: {
+      checkmarkColor: t.colors.neutralForeground1Pressed,
+      checkmarkVisibility: 1,
+    },
+  },
+  disabled: {
+    backgroundColor: t.colors.neutralBackground1,
+    color: t.colors.neutralForegroundDisabled,
+    iconColor: t.colors.neutralForegroundDisabled,
+    checked: {
+      checkmarkColor: t.colors.neutralForegroundDisabled,
+      checkmarkVisibility: 1,
+    },
+  },
+  focused: {
+    backgroundColor: t.colors.neutralBackground1Hover,
+    color: t.colors.neutralForeground1Hover,
+    iconColor: t.colors.neutralForeground1Hover,
+    checked: {
+      checkmarkColor: t.colors.neutralForeground1Hover,
+      checkmarkVisibility: 1,
+    },
+  },
+  checked: {
+    checkmarkColor: t.colors.neutralForeground1,
+    checkmarkVisibility: 1,
+  },
+});

package/src/MenuItemRadio/index.ts

@@ -1,2 +1,10 @@
-export { MenuItemRadio, menuItemRadioName } from './MenuItemRadio';
+export { MenuItemRadio } from './MenuItemRadio';
 export { useMenuItemRadio } from './useMenuItemRadio';
+export type {
+  MenuItemRadioInfo,
+  MenuItemRadioProps,
+  MenuItemRadioSlotProps,
+  MenuItemRadioTokens,
+  MenuItemRadioType,
+  menuItemRadioName,
+} from './MenuItemRadio.types';

package/src/MenuItemRadio/useMenuItemRadio.ts

@@ -4,10 +4,10 @@ import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks'
 
 import { useMenuContext } from '../context/menuContext';
 import { useMenuListContext } from '../context/menuListContext';
-import type { MenuItemCheckboxProps, MenuItemCheckboxInfo } from '../MenuItemCheckbox/MenuItemCheckbox.types';
 import { useMenuCheckboxInteraction } from '../MenuItemCheckbox/useMenuItemCheckbox';
+import type { MenuItemRadioProps, MenuItemRadioInfo } from '../MenuItemRadio/MenuItemRadio.types';
 
-export const useMenuItemRadio = (props: MenuItemCheckboxProps): MenuItemCheckboxInfo => {
+export const useMenuItemRadio = (props: MenuItemRadioProps): MenuItemRadioInfo => {
   const { disabled, name, persistOnClick } = props;
   const context = useMenuContext();
   const listContext = useMenuListContext();

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,12 @@ export interface MenuListTokens extends LayoutTokens, IBackgroundColorTokens {
    * States of the list control
    */
   hasMaxHeight?: MenuListTokens;
+
+  /**
+   * Corner radius of the menu list
+   * @platform android
+   */
+  cornerRadius?: number;
 }
 
 export interface MenuListProps extends Omit<IViewProps, 'onPress'> {
@@ -46,6 +52,7 @@ export interface MenuListProps extends Omit<IViewProps, 'onPress'> {
    *
    * This option is useful for programmatically generated items to provide
    * text for options that end up having tuncated text.
+   * @platform win32, macOS
    */
   hasTooltips?: boolean;
 

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,