@fluentui-react-native/menu 0.4.0 → 0.5.2

package/src/MenuItemCheckbox/MenuItemCheckboxTokens.ts

@@ -0,0 +1,29 @@
+import { FontWeightValue, Theme } from '@fluentui-react-native/framework';
+import { globalTokens } from '@fluentui-react-native/theme-tokens';
+import { TokenSettings } from '@fluentui-react-native/use-styling';
+import { MenuItemCheckboxTokens } from './MenuItemCheckbox.types';
+
+export const defaultMenuItemCheckboxTokens: TokenSettings<MenuItemCheckboxTokens, Theme> = (t: Theme): MenuItemCheckboxTokens => ({
+  backgroundColor: t.colors.neutralBackground1,
+  borderRadius: globalTokens.corner.radius.medium,
+  color: t.colors.neutralForeground2,
+  fontFamily: t.typography.families.primary,
+  fontSize: globalTokens.font.size[300],
+  fontWeight: globalTokens.font.weight.regular as FontWeightValue,
+  minHeight: 32,
+  minWidth: 160,
+  maxWidth: 300,
+  padding: globalTokens.spacing.sNudge,
+  hovered: {
+    backgroundColor: t.colors.neutralBackground1Hover,
+    color: t.colors.neutralForeground2Hover,
+  },
+  pressed: {
+    backgroundColor: t.colors.neutralBackground1Pressed,
+    color: t.colors.neutralForeground2Pressed,
+  },
+  disabled: {
+    backgroundColor: t.colors.neutralBackground1,
+    color: t.colors.neutralForegroundDisabled,
+  },
+});

package/src/MenuItemCheckbox/MenuItemCheckboxTokens.win32.ts

@@ -0,0 +1,30 @@
+import { FontWeightValue, Theme } from '@fluentui-react-native/framework';
+import { globalTokens } from '@fluentui-react-native/theme-tokens';
+import { TokenSettings } from '@fluentui-react-native/use-styling';
+import { MenuItemCheckboxTokens } from './MenuItemCheckbox.types';
+
+export const defaultMenuItemCheckboxTokens: TokenSettings<MenuItemCheckboxTokens, Theme> = (t: Theme): MenuItemCheckboxTokens => ({
+  backgroundColor: t.colors.neutralBackground1,
+  borderRadius: globalTokens.corner.radius.none,
+  color: t.colors.neutralForeground1,
+  fontFamily: t.typography.families.primary,
+  fontSize: globalTokens.font.size[200],
+  fontWeight: globalTokens.font.weight.regular as FontWeightValue,
+  minHeight: 24,
+  minWidth: 160,
+  maxWidth: 300,
+  padding: globalTokens.spacing.xs,
+  paddingHorizontal: globalTokens.spacing.s,
+  hovered: {
+    backgroundColor: t.colors.neutralBackground1Hover,
+    color: t.colors.neutralForeground1Hover,
+  },
+  pressed: {
+    backgroundColor: t.colors.neutralBackground1Pressed,
+    color: t.colors.neutralForeground1Pressed,
+  },
+  disabled: {
+    backgroundColor: t.colors.neutralBackground1,
+    color: t.colors.neutralForegroundDisabled,
+  },
+});

package/src/MenuItemCheckbox/useMenuItemCheckbox.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { AccessibilityState } from 'react-native';
+import { MenuItemCheckboxProps, MenuItemCheckboxState } from './MenuItemCheckbox.types';
+import { memoize } from '@fluentui-react-native/framework';
+import { useAsPressable, useKeyProps } from '@fluentui-react-native/interactive-hooks';
+import { useMenuContext } from '../context/menuContext';
+
+export const useMenuItemCheckbox = (props: MenuItemCheckboxProps): MenuItemCheckboxState => {
+  // attach the pressable state handlers
+  const defaultComponentRef = React.useRef(null);
+  const { onClick, accessibilityState, componentRef = defaultComponentRef, disabled, ...rest } = props;
+  const pressable = useAsPressable({ ...rest, disabled, onPress: onClick });
+  const onKeyProps = useKeyProps(onClick, ' ', 'Enter');
+  const hasSubmenu = useMenuContext().isSubmenu;
+
+  return {
+    props: {
+      ...pressable.props,
+      accessible: true,
+      accessibilityRole: 'button',
+      onAccessibilityTap: props.onAccessibilityTap || props.onClick,
+      accessibilityLabel: props.accessibilityLabel,
+      accessibilityState: getAccessibilityState(disabled, accessibilityState),
+      enableFocusRing: true,
+      focusable: !disabled,
+      hasSubmenu,
+      ref: componentRef,
+      ...onKeyProps,
+    },
+    state: pressable.state,
+  };
+};
+
+const getAccessibilityState = memoize(getAccessibilityStateWorker);
+function getAccessibilityStateWorker(disabled: boolean, accessibilityState?: AccessibilityState) {
+  if (accessibilityState) {
+    return { disabled, ...accessibilityState };
+  }
+  return { disabled };
+}

package/src/MenuList/MenuList.styling.ts

@@ -0,0 +1,20 @@
+import { Theme, UseStylingOptions, buildProps } from '@fluentui-react-native/framework';
+import { layoutStyles } from '@fluentui-react-native/tokens';
+import { defaultMenuListTokens } from './MenuListTokens';
+import { menuListName, MenuListProps, MenuListTokens, MenuListSlotProps } from './MenuList.types';
+
+export const stylingSettings: UseStylingOptions<MenuListProps, MenuListSlotProps, MenuListTokens> = {
+  tokens: [defaultMenuListTokens, menuListName],
+  slotProps: {
+    root: buildProps(
+      (tokens: MenuListTokens, theme: Theme) => ({
+        style: {
+          backgroundColor: tokens.backgroundColor,
+          display: 'flex',
+          ...layoutStyles.from(tokens, theme),
+        },
+      }),
+      ['backgroundColor', ...layoutStyles.keys],
+    ),
+  },
+};

package/src/MenuList/MenuList.tsx

@@ -0,0 +1,23 @@
+/** @jsx withSlots */
+import React from 'react';
+import { View } from 'react-native';
+import { compose, UseSlots, withSlots } from '@fluentui-react-native/framework';
+import { menuListName, MenuListProps, MenuListType } from './MenuList.types';
+import { stylingSettings } from './MenuList.styling';
+
+export const MenuList = compose<MenuListType>({
+  displayName: menuListName,
+  ...stylingSettings,
+  slots: {
+    root: View,
+  },
+  useRender: (userProps: MenuListProps, useSlots: UseSlots<MenuListType>) => {
+    const Slots = useSlots(userProps);
+
+    return (_final: MenuListProps, children: React.ReactNode) => {
+      return <Slots.root>{children}</Slots.root>;
+    };
+  },
+});
+
+export default MenuList;

package/src/MenuList/MenuList.types.ts

@@ -0,0 +1,17 @@
+import type { IViewProps } from '@fluentui-react-native/adapters';
+import { IBackgroundColorTokens, LayoutTokens } from '@fluentui-react-native/tokens';
+
+export const menuListName = 'MenuList';
+
+export interface MenuListTokens extends LayoutTokens, IBackgroundColorTokens {}
+
+export interface MenuListProps extends Omit<IViewProps, 'onPress'> {}
+
+export interface MenuListSlotProps {
+  root: React.PropsWithRef<IViewProps>;
+}
+export interface MenuListType {
+  props: MenuListProps;
+  tokens: MenuListTokens;
+  slotProps: MenuListSlotProps;
+}

package/src/MenuList/MenuListTokens.ts

@@ -0,0 +1,11 @@
+import { Theme } from '@fluentui-react-native/framework';
+import { globalTokens } from '@fluentui-react-native/theme-tokens';
+import { TokenSettings } from '@fluentui-react-native/use-styling';
+import { MenuListTokens } from './MenuList.types';
+
+export const defaultMenuListTokens: TokenSettings<MenuListTokens, Theme> = (t: Theme): MenuListTokens => ({
+  padding: globalTokens.spacing.xs,
+  minWidth: 128,
+  maxWidth: 300,
+  backgroundColor: t.colors.neutralBackground1,
+});

package/src/MenuList/MenuListTokens.win32.ts

@@ -0,0 +1,11 @@
+import { Theme } from '@fluentui-react-native/framework';
+import { globalTokens } from '@fluentui-react-native/theme-tokens';
+import { TokenSettings } from '@fluentui-react-native/use-styling';
+import { MenuListTokens } from './MenuList.types';
+
+export const defaultMenuListTokens: TokenSettings<MenuListTokens, Theme> = (t: Theme): MenuListTokens => ({
+  paddingVertical: globalTokens.spacing.xs,
+  minWidth: 128,
+  maxWidth: 300,
+  backgroundColor: t.colors.neutralBackground1,
+});

package/src/MenuPopover/MenuPopover.tsx

@@ -1,14 +1,19 @@
 import React from 'react';
-import { stagedComponent } from '@fluentui-react-native/framework';
+import { stagedComponent, useFluentTheme } from '@fluentui-react-native/framework';
 import { Callout } from '@fluentui-react-native/callout';
 import { menuPopoverName, MenuPopoverProps } from './MenuPopover.types';
 import { useMenuPopover } from './useMenuPopover';
 
 export const MenuPopover = stagedComponent((props: MenuPopoverProps) => {
   const state = useMenuPopover(props);
+  const theme = useFluentTheme();
 
   return (_rest: MenuPopoverProps, children: React.ReactNode) => {
-    return <Callout target={state.triggerRef}>{children}</Callout>;
+    return (
+      <Callout target={state.triggerRef} borderWidth={1} borderColor={theme.colors.neutralStrokeAccessible}>
+        {children}
+      </Callout>
+    );
   };
 });
 MenuPopover.displayName = menuPopoverName;

package/src/index.ts

@@ -2,3 +2,4 @@ export { Menu } from './Menu/Menu';
 export { MenuTrigger } from './MenuTrigger/MenuTrigger';
 export { MenuPopover } from './MenuPopover/MenuPopover';
 export { MenuItem } from './MenuItem/MenuItem';
+export { MenuList } from './MenuList/MenuList';