@fluentui-react-native/menu 0.5.0 → 0.6.0

package/src/Menu/useMenu.ts

@@ -1,21 +1,44 @@
+import { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
 import React from 'react';
 import { useMenuContext } from '../context/menuContext';
 import { MenuProps, MenuState } from './Menu.types';
 
 export const useMenu = (props: MenuProps): MenuState => {
-  const [open, setOpen] = useMenuOpenState(props);
   const triggerRef = React.useRef(null);
   const context = useMenuContext();
   const isSubmenu = context.triggerRef !== null;
+  const isControlled = typeof props.open !== 'undefined';
+  const [open, setOpen] = useMenuOpenState(isControlled, props);
 
   return {
+    ...props,
     open,
     setOpen,
     triggerRef,
     isSubmenu,
+    isControlled,
   };
 };
 
-const useMenuOpenState = (props: MenuProps) => {
-  return React.useState<boolean>(props.open);
+const useMenuOpenState = (isControlled: boolean, props: MenuProps): [boolean, (e: InteractionEvent, isOpen: boolean) => void] => {
+  const { defaultOpen, onOpenChange, open } = props;
+  const initialState = typeof defaultOpen !== 'undefined' ? defaultOpen : !!open;
+  const [openInternal, setOpenInternal] = React.useState<boolean>(initialState);
+
+  const state = isControlled ? open : openInternal;
+
+  const setOpen = React.useCallback(
+    (e: InteractionEvent, isOpen: boolean) => {
+      const openPrev = state;
+      if (!isControlled) {
+        setOpenInternal(isOpen);
+      }
+      if (onOpenChange && openPrev !== isOpen) {
+        onOpenChange(e, isOpen);
+      }
+    },
+    [isControlled, state, onOpenChange, setOpenInternal],
+  );
+
+  return [state, setOpen];
 };

package/src/Menu/useMenuContextValue.ts

@@ -2,5 +2,5 @@ import { MenuContextValue } from '../context/menuContext';
 import { MenuState } from './Menu.types';
 
 export const useMenuContextValue = (state: MenuState): MenuContextValue => {
-  return { open: state.open, setOpen: state.setOpen, triggerRef: state.triggerRef, isSubmenu: state.isSubmenu };
+  return { ...state };
 };

package/src/MenuItemCheckbox/MenuItemCheckbox.styling.ts

@@ -0,0 +1,37 @@
+import { Theme, UseStylingOptions, buildProps } from '@fluentui-react-native/framework';
+import { fontStyles, layoutStyles } from '@fluentui-react-native/tokens';
+import { defaultMenuItemCheckboxTokens } from './MenuItemCheckboxTokens';
+import { menuItemCheckboxName, MenuItemCheckboxProps, MenuItemCheckboxTokens, MenuItemCheckboxSlotProps } from './MenuItemCheckbox.types';
+
+export const menuItemCheckboxStates: (keyof MenuItemCheckboxTokens)[] = ['hovered', 'focused', 'pressed', 'disabled'];
+
+export const stylingSettings: UseStylingOptions<MenuItemCheckboxProps, MenuItemCheckboxSlotProps, MenuItemCheckboxTokens> = {
+  tokens: [defaultMenuItemCheckboxTokens, menuItemCheckboxName],
+  states: menuItemCheckboxStates,
+  slotProps: {
+    root: buildProps(
+      (tokens: MenuItemCheckboxTokens, theme: Theme) => ({
+        style: {
+          alignItems: 'center',
+          backgroundColor: tokens.backgroundColor,
+          display: 'flex',
+          flexDirection: 'row',
+          ...layoutStyles.from(tokens, theme),
+        },
+      }),
+      ['backgroundColor', ...layoutStyles.keys],
+    ),
+    content: buildProps(
+      (tokens: MenuItemCheckboxTokens, theme: Theme) => {
+        return {
+          style: {
+            flexGrow: 1,
+            color: tokens.color,
+            ...fontStyles.from(tokens, theme),
+          },
+        };
+      },
+      ['color', ...fontStyles.keys],
+    ),
+  },
+};

package/src/MenuItemCheckbox/MenuItemCheckbox.tsx

@@ -0,0 +1,26 @@
+/** @jsx withSlots */
+import { View } from 'react-native';
+import { compose, mergeProps, UseSlots, withSlots } from '@fluentui-react-native/framework';
+import { Text } from '@fluentui-react-native/experimental-text';
+import { menuItemCheckboxName, MenuItemCheckboxProps, MenuItemCheckboxType } from './MenuItemCheckbox.types';
+import { useMenuItemCheckbox } from './useMenuItemCheckbox';
+import { stylingSettings } from './MenuItemCheckbox.styling';
+
+export const MenuItemCheckbox = compose<MenuItemCheckboxType>({
+  displayName: menuItemCheckboxName,
+  ...stylingSettings,
+  slots: {
+    root: View,
+    content: Text,
+  },
+  useRender: (userProps: MenuItemCheckboxProps, useSlots: UseSlots<MenuItemCheckboxType>) => {
+    const menuItem = useMenuItemCheckbox(userProps);
+    const Slots = useSlots(userProps, (layer): boolean => menuItem.state[layer]);
+
+    return (final: MenuItemCheckboxProps) => {
+      const mergedProps = mergeProps(menuItem.props, final);
+
+      return <Slots.root {...mergedProps}>{mergedProps.content && <Slots.content>{mergedProps.content}</Slots.content>}</Slots.root>;
+    };
+  },
+});

package/src/MenuItemCheckbox/MenuItemCheckbox.types.ts

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { ViewProps } from 'react-native';
+import type { IViewProps } from '@fluentui-react-native/adapters';
+import { TextProps } from '@fluentui-react-native/experimental-text';
+import { IFocusable, InteractionEvent, IPressableHooks, IWithPressableOptions } from '@fluentui-react-native/interactive-hooks';
+import { FontTokens, IBorderTokens, IColorTokens, LayoutTokens } from '@fluentui-react-native/tokens';
+
+export const menuItemCheckboxName = 'MenuItemCheckbox';
+
+export interface MenuItemCheckboxTokens extends LayoutTokens, FontTokens, IBorderTokens, IColorTokens {
+  disabled?: MenuItemCheckboxTokens;
+  focused?: MenuItemCheckboxTokens;
+  hovered?: MenuItemCheckboxTokens;
+  pressed?: MenuItemCheckboxTokens;
+}
+
+export interface MenuItemCheckboxProps extends Omit<IWithPressableOptions<ViewProps>, 'onPress'> {
+  content: string;
+
+  /**
+   * Applies disabled styles to menu item but remains focusable
+   */
+  disabled?: boolean;
+
+  /**
+   * A RefObject to access the IButton interface. Use this to access the public methods and properties of the component.
+   */
+  componentRef?: React.RefObject<IFocusable>;
+
+  /**
+   * If the menu item is a trigger for a submenu
+   */
+  hasSubmenu?: boolean;
+
+  /**
+   * A callback to call on button click event
+   */
+  onClick?: (e: InteractionEvent) => void;
+}
+
+export type MenuItemCheckboxState = IPressableHooks<MenuItemCheckboxProps & React.ComponentPropsWithRef<any>>;
+
+export interface MenuItemCheckboxSlotProps {
+  root: React.PropsWithRef<IViewProps>;
+  content?: TextProps;
+}
+
+export interface MenuItemCheckboxType {
+  props: MenuItemCheckboxProps;
+  tokens: MenuItemCheckboxTokens;
+  slotProps: MenuItemCheckboxSlotProps;
+}

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/MenuPopover/MenuPopover.tsx

@@ -10,7 +10,13 @@ export const MenuPopover = stagedComponent((props: MenuPopoverProps) => {
 
   return (_rest: MenuPopoverProps, children: React.ReactNode) => {
     return (
-      <Callout target={state.triggerRef} borderWidth={1} borderColor={theme.colors.neutralStrokeAccessible}>
+      <Callout
+        borderWidth={1}
+        borderColor={theme.colors.neutralStrokeAccessible}
+        target={state.triggerRef}
+        onDismiss={state.onDismiss}
+        dismissBehaviors={state.dismissBehaviors}
+      >
         {children}
       </Callout>
     );

package/src/MenuPopover/MenuPopover.types.ts

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

package/src/MenuPopover/useMenuPopover.ts

@@ -1,10 +1,17 @@
+import React from 'react';
+import { DismissBehaviors } from '@fluentui-react-native/callout';
 import { useMenuContext } from '../context/menuContext';
 import { MenuPopoverProps, MenuPopoverState } from './MenuPopover.types';
 
 export const useMenuPopover = (_props: MenuPopoverProps): MenuPopoverState => {
   const context = useMenuContext();
+  const setOpen = context.setOpen;
 
   const triggerRef = context.triggerRef;
+  const onDismiss = React.useCallback(() => setOpen(undefined, false /* isOpen */), [setOpen]);
+  const dismissBehaviors = context.isControlled
+    ? (['preventDismissOnKeyDown', 'preventDismissOnClickOutside'] as DismissBehaviors[])
+    : undefined;
 
-  return { triggerRef };
+  return { triggerRef, onDismiss, dismissBehaviors };
 };

package/src/MenuTrigger/useMenuTrigger.ts

@@ -7,11 +7,18 @@ export const useMenuTrigger = (_props: MenuTriggerProps) => {
 
   const setOpen = context.setOpen;
   const open = context.open;
+  const openOnHover = context.openOnHover;
   const triggerRef = context.triggerRef;
 
-  const onClick = (_e: InteractionEvent) => {
-    setOpen(!open);
+  const onHoverIn = (e: InteractionEvent) => {
+    if (openOnHover) {
+      setOpen(e, true /* isOpen */);
+    }
   };
 
-  return { onClick, componentRef: triggerRef };
+  const onClick = (e: InteractionEvent) => {
+    setOpen(e, !open);
+  };
+
+  return { onClick, onHoverIn, componentRef: triggerRef };
 };

package/src/context/menuContext.ts

@@ -7,6 +7,7 @@ import type { MenuState } from '../Menu/Menu.types';
 export type MenuContextValue = MenuState;
 
 export const MenuContext = React.createContext<MenuContextValue>({
+  isControlled: false,
   isSubmenu: false,
   open: false,
   setOpen: () => false,