@fluentui-react-native/menu 1.15.0 → 1.15.1

package/lib/MenuList/MenuList.d.ts

@@ -1,9 +1,4 @@
 import type { MenuListProps, MenuListState } from './MenuList.types';
 export declare const menuListLookup: (layer: string, state: MenuListState, userProps: MenuListProps) => boolean;
-export declare const MenuList: import('@fluentui-react-native/framework').ComposableComponent<
-  MenuListProps,
-  import('./MenuList.types').MenuListSlotProps,
-  import('./MenuList.types').MenuListTokens,
-  import('@fluentui-react-native/framework-base').ObjectBase
->;
-//# sourceMappingURL=MenuList.d.ts.map
+export declare const MenuList: import("@fluentui-react-native/framework").ComposableComponent<MenuListProps, import("./MenuList.types").MenuListSlotProps, import("./MenuList.types").MenuListTokens, import("@fluentui-react-native/framework-base").ObjectBase>;
+//# sourceMappingURL=MenuList.d.ts.map

package/lib/MenuList/MenuList.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from '@fluentui-react-native/framework-base/jsx-runtime';
+import { jsx as _jsx } from "@fluentui-react-native/framework-base/jsx-runtime";
 /** @jsxImportSource @fluentui-react-native/framework-base */
 import React from 'react';
 import { Platform, ScrollView, View } from 'react-native';
@@ -14,75 +14,59 @@ const shouldHaveFocusZone = ['macos', 'win32'].includes(Platform.OS);
 const focusLandsOnContainer = Platform.OS === 'macos';
 const hasCircularNavigation = Platform.OS === 'win32';
 export const menuListLookup = (layer, state, userProps) => {
-  return state[layer] || userProps[layer] || layer === 'hasMaxHeight';
+    return state[layer] || userProps[layer] || layer === 'hasMaxHeight';
 };
 export const MenuList = compose({
-  displayName: menuListName,
-  ...stylingSettings,
-  slots: {
-    root: View,
-    scrollView: ScrollView,
-    focusZone: shouldHaveFocusZone ? FocusZone : View,
-  },
-  useRender: (userProps, useSlots) => {
-    const menuList = useMenuList(userProps);
-    const menuListContextValue = useMenuListContextValue(menuList);
-    const Slots = useSlots(menuList.props, (layer) => menuListLookup(layer, menuList, userProps));
-    return (_final, children) => {
-      const itemCount = React.Children.toArray(children).filter(
-        (child) => React.isValidElement(child) && child.type.displayName !== 'MenuDivider',
-      ).length;
-      let itemPosition = 0;
-      const childrenWithSet = React.Children.toArray(children).map((child) => {
-        if (React.isValidElement(child)) {
-          if (child.type.displayName !== 'MenuDivider') {
-            itemPosition++;
-          }
-          const childProps = extractProps(child);
-          return React.cloneElement(child, {
-            accessibilityPosInSet: childProps?.accessibilityPosInSet ?? itemPosition, // win32
-            accessibilitySetSize: childProps?.accessibilitySetSize ?? itemCount, //win32
-            ...(childProps?.tooltip && { alwaysShowToolTip: true }),
-          });
-        }
-        return child;
-      });
-      const shouldHaveScrollView = Platform.OS === 'macos' || menuList.hasMaxHeight || menuList.hasMaxWidth;
-      const ScrollViewWrapper = shouldHaveScrollView ? Slots.scrollView : React.Fragment;
-      const hasMenuGroupChild = React.Children.toArray(children).some(
-        (child) => child && child.type && child.type.displayName === 'MenuGroup',
-      );
-      // On win32, tab navigation should only be enabled when we have menu groups.
-      const hasTabNavigation = Platform.OS === 'win32' && hasMenuGroupChild;
-      const content = _jsx(Slots.root, {
-        children: _jsx(
-          ScrollViewWrapper,
-          // avoid error that fires when props are passed into React.fragment
-          {
-            ...(shouldHaveScrollView && {
-              showsVerticalScrollIndicator: menuList.hasMaxHeight,
-              showsHorizontalScrollIndicator: menuList.hasMaxWidth,
-            }),
-            children: _jsx(
-              Slots.focusZone,
-              // avoid error that fires when props are passed into React.fragment
-              {
-                ...(shouldHaveFocusZone && {
-                  componentRef: focusLandsOnContainer && menuList.focusZoneRef,
-                  focusZoneDirection: 'vertical',
-                  defaultTabbableElement: focusLandsOnContainer && menuList.focusZoneRef,
-                  enableFocusRing: false,
-                  isCircularNavigation: hasCircularNavigation,
-                  tabKeyNavigation: hasTabNavigation ? 'Normal' : 'None',
-                }),
-                children: childrenWithSet,
-              },
-            ),
-          },
-        ),
-      });
-      return _jsx(MenuListProvider, { value: menuListContextValue, children: content });
-    };
-  },
+    displayName: menuListName,
+    ...stylingSettings,
+    slots: {
+        root: View,
+        scrollView: ScrollView,
+        focusZone: shouldHaveFocusZone ? FocusZone : View,
+    },
+    useRender: (userProps, useSlots) => {
+        const menuList = useMenuList(userProps);
+        const menuListContextValue = useMenuListContextValue(menuList);
+        const Slots = useSlots(menuList.props, (layer) => menuListLookup(layer, menuList, userProps));
+        return (_final, children) => {
+            const itemCount = React.Children.toArray(children).filter((child) => React.isValidElement(child) && child.type.displayName !== 'MenuDivider').length;
+            let itemPosition = 0;
+            const childrenWithSet = React.Children.toArray(children).map((child) => {
+                if (React.isValidElement(child)) {
+                    if (child.type.displayName !== 'MenuDivider') {
+                        itemPosition++;
+                    }
+                    const childProps = extractProps(child);
+                    return React.cloneElement(child, {
+                        accessibilityPosInSet: childProps?.accessibilityPosInSet ?? itemPosition, // win32
+                        accessibilitySetSize: childProps?.accessibilitySetSize ?? itemCount, //win32
+                        ...(childProps?.tooltip && { alwaysShowToolTip: true }),
+                    });
+                }
+                return child;
+            });
+            const shouldHaveScrollView = Platform.OS === 'macos' || menuList.hasMaxHeight || menuList.hasMaxWidth;
+            const ScrollViewWrapper = shouldHaveScrollView ? Slots.scrollView : React.Fragment;
+            const hasMenuGroupChild = React.Children.toArray(children).some((child) => child && child.type && child.type.displayName === 'MenuGroup');
+            // On win32, tab navigation should only be enabled when we have menu groups.
+            const hasTabNavigation = Platform.OS === 'win32' && hasMenuGroupChild;
+            const content = (_jsx(Slots.root, { children: _jsx(ScrollViewWrapper
+                // avoid error that fires when props are passed into React.fragment
+                , { ...(shouldHaveScrollView && {
+                        showsVerticalScrollIndicator: menuList.hasMaxHeight,
+                        showsHorizontalScrollIndicator: menuList.hasMaxWidth,
+                    }), children: _jsx(Slots.focusZone
+                    // avoid error that fires when props are passed into React.fragment
+                    , { ...(shouldHaveFocusZone && {
+                            componentRef: focusLandsOnContainer && menuList.focusZoneRef,
+                            focusZoneDirection: 'vertical',
+                            defaultTabbableElement: focusLandsOnContainer && menuList.focusZoneRef,
+                            enableFocusRing: false,
+                            isCircularNavigation: hasCircularNavigation,
+                            tabKeyNavigation: hasTabNavigation ? 'Normal' : 'None',
+                        }), children: childrenWithSet }) }) }));
+            return _jsx(MenuListProvider, { value: menuListContextValue, children: content });
+        };
+    },
 });
-//# sourceMappingURL=MenuList.js.map
+//# sourceMappingURL=MenuList.js.map

package/lib/MenuList/MenuList.styling.d.ts

@@ -2,4 +2,4 @@ import type { UseStylingOptions } from '@fluentui-react-native/framework';
 import type { MenuListProps, MenuListTokens, MenuListSlotProps } from './MenuList.types';
 export declare const menuListStates: (keyof MenuListTokens)[];
 export declare const stylingSettings: UseStylingOptions<MenuListProps, MenuListSlotProps, MenuListTokens>;
-//# sourceMappingURL=MenuList.styling.d.ts.map
+//# sourceMappingURL=MenuList.styling.d.ts.map

package/lib/MenuList/MenuList.styling.js

@@ -5,31 +5,25 @@ import { menuListName } from './MenuList.types';
 import { defaultMenuListTokens } from './MenuListTokens';
 export const menuListStates = ['hasMaxHeight'];
 export const stylingSettings = {
-  tokens: [defaultMenuListTokens, menuListName],
-  states: menuListStates,
-  slotProps: {
-    root: buildProps(
-      (tokens, theme) => ({
-        style: {
-          backgroundColor: tokens.backgroundColor,
-          display: 'flex',
-          gap: tokens.gap,
-          ...layoutStyles.from(tokens, theme),
-          ...(Platform.OS === 'android' && { borderRadius: tokens.borderRadius }),
-        },
-      }),
-      ['backgroundColor', 'borderRadius', 'gap', ...layoutStyles.keys],
-    ),
-    focusZone: buildProps(
-      (tokens) => ({
-        style: {
-          display: 'flex',
-          flexDirection: 'column',
-          gap: tokens.gap,
-        },
-      }),
-      ['gap'],
-    ),
-  },
+    tokens: [defaultMenuListTokens, menuListName],
+    states: menuListStates,
+    slotProps: {
+        root: buildProps((tokens, theme) => ({
+            style: {
+                backgroundColor: tokens.backgroundColor,
+                display: 'flex',
+                gap: tokens.gap,
+                ...layoutStyles.from(tokens, theme),
+                ...(Platform.OS === 'android' && { borderRadius: tokens.borderRadius }),
+            },
+        }), ['backgroundColor', 'borderRadius', 'gap', ...layoutStyles.keys]),
+        focusZone: buildProps((tokens) => ({
+            style: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: tokens.gap,
+            },
+        }), ['gap']),
+    },
 };
-//# sourceMappingURL=MenuList.styling.js.map
+//# sourceMappingURL=MenuList.styling.js.map

package/lib/MenuList/MenuList.types.d.ts

@@ -4,87 +4,87 @@ import type { IViewProps } from '@fluentui-react-native/adapters';
 import type { FocusZoneProps } from '@fluentui-react-native/focus-zone';
 import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
 import type { IBackgroundColorTokens, LayoutTokens } from '@fluentui-react-native/tokens';
-export declare const menuListName = 'MenuList';
+export declare const menuListName = "MenuList";
 export interface MenuListTokens extends LayoutTokens, IBackgroundColorTokens {
-  /**
-   * Space between items in pixels
-   */
-  gap?: number;
-  /**
-   * States of the list control
-   */
-  hasMaxHeight?: MenuListTokens;
-  /**
-   * Border radius of the menu list
-   * @platform android macos
-   */
-  borderRadius?: AnimatableNumericValue | string;
+    /**
+     * Space between items in pixels
+     */
+    gap?: number;
+    /**
+     * States of the list control
+     */
+    hasMaxHeight?: MenuListTokens;
+    /**
+     * Border radius of the menu list
+     * @platform android macos
+     */
+    borderRadius?: AnimatableNumericValue | string;
 }
 export interface MenuListProps extends Omit<IViewProps, 'onPress'> {
-  /**
-   * Array of all checked items
-   */
-  checked?: string[];
-  /**
-   * Default items to be checked on mount
-   */
-  defaultChecked?: string[];
-  /**
-   * States that menu items can contain selectable items and reserves space for item alignment
-   */
-  hasCheckmarks?: boolean;
-  /**
-   * States that menu items can contain icons and reserves space for item alignment
-   */
-  hasIcons?: boolean;
-  /**
-   * States that menu items all have tooltips with its text by default.
-   *
-   * This option is useful for programmatically generated items to provide
-   * text for options that end up having tuncated text.
-   * @platform win32, macOS
-   */
-  hasTooltips?: boolean;
-  /**
-   * Callback when checked items change
-   *
-   * @param checked Array of all currently checked values
-   */
-  onCheckedChange?: (e: InteractionEvent, checked: string[]) => void;
-  /**
-   * Defines a minumum width for the Menu.
-   */
-  minWidth?: number | string;
+    /**
+     * Array of all checked items
+     */
+    checked?: string[];
+    /**
+     * Default items to be checked on mount
+     */
+    defaultChecked?: string[];
+    /**
+     * States that menu items can contain selectable items and reserves space for item alignment
+     */
+    hasCheckmarks?: boolean;
+    /**
+     * States that menu items can contain icons and reserves space for item alignment
+     */
+    hasIcons?: boolean;
+    /**
+     * States that menu items all have tooltips with its text by default.
+     *
+     * This option is useful for programmatically generated items to provide
+     * text for options that end up having tuncated text.
+     * @platform win32, macOS
+     */
+    hasTooltips?: boolean;
+    /**
+     * Callback when checked items change
+     *
+     * @param checked Array of all currently checked values
+     */
+    onCheckedChange?: (e: InteractionEvent, checked: string[]) => void;
+    /**
+     * Defines a minumum width for the Menu.
+     */
+    minWidth?: number | string;
 }
 export interface MenuListState extends Omit<MenuListProps, 'checked' | 'onCheckedChange'> {
-  props: MenuListProps;
-  checked?: Record<string, boolean>;
-  isCheckedControlled: boolean;
-  onArrowClose?: (e: InteractionEvent) => void;
-  onCheckedChange?: (e: InteractionEvent, name: string, isChecked: boolean) => void;
-  selectRadio?: (e: InteractionEvent, name: string) => void;
-  addRadioItem: (name: string) => void;
-  removeRadioItem: (name: string) => void;
-  trackMenuItem: (item: TrackedMenuItem) => void;
-  untrackMenuItem: (item: TrackedMenuItem) => void;
-  hasMaxHeight: boolean;
-  hasMaxWidth: boolean;
-  focusZoneRef?: React.RefObject<View>;
+    props: MenuListProps;
+    checked?: Record<string, boolean>;
+    isCheckedControlled: boolean;
+    onArrowClose?: (e: InteractionEvent) => void;
+    onCheckedChange?: (e: InteractionEvent, name: string, isChecked: boolean) => void;
+    selectRadio?: (e: InteractionEvent, name: string) => void;
+    addRadioItem: (name: string) => void;
+    removeRadioItem: (name: string) => void;
+    trackMenuItem: (item: TrackedMenuItem) => void;
+    untrackMenuItem: (item: TrackedMenuItem) => void;
+    hasMaxHeight: boolean;
+    hasMaxWidth: boolean;
+    focusZoneRef?: React.RefObject<View>;
 }
 export interface MenuListSlotProps {
-  root: React.PropsWithRef<IViewProps> & {
-    gap?: number;
-  };
-  focusZone?: FocusZoneProps;
-  scrollView?: ScrollViewProps;
+    root: React.PropsWithRef<IViewProps> & {
+        gap?: number;
+    };
+    focusZone?: FocusZoneProps;
+    scrollView?: ScrollViewProps;
 }
 export interface MenuListType {
-  props: MenuListProps;
-  tokens: MenuListTokens;
-  slotProps: MenuListSlotProps;
+    props: MenuListProps;
+    tokens: MenuListTokens;
+    slotProps: MenuListSlotProps;
 }
 export interface TrackedMenuItem {
-  ref: React.RefObject<View>;
-  disabled: boolean;
+    ref: React.RefObject<View>;
+    disabled: boolean;
 }
-//# sourceMappingURL=MenuList.types.d.ts.map
+//# sourceMappingURL=MenuList.types.d.ts.map

package/lib/MenuList/MenuList.types.js

@@ -1,2 +1,2 @@
 export const menuListName = 'MenuList';
-//# sourceMappingURL=MenuList.types.js.map
+//# sourceMappingURL=MenuList.types.js.map

package/lib/MenuList/MenuListTokens.android.d.ts

@@ -2,4 +2,4 @@ import type { Theme } from '@fluentui-react-native/framework';
 import type { TokenSettings } from '@fluentui-react-native/use-styling';
 import type { MenuListTokens } from './MenuList.types';
 export declare const defaultMenuListTokens: TokenSettings<MenuListTokens, Theme>;
-//# sourceMappingURL=MenuListTokens.android.d.ts.map
+//# sourceMappingURL=MenuListTokens.android.d.ts.map

package/lib/MenuList/MenuListTokens.android.js

@@ -1,7 +1,7 @@
 import { globalTokens } from '@fluentui-react-native/theme-tokens';
 export const defaultMenuListTokens = (t) => ({
-  backgroundColor: t.colors.neutralBackground1,
-  borderRadius: globalTokens.corner.radius80,
-  paddingVertical: globalTokens.size80,
+    backgroundColor: t.colors.neutralBackground1,
+    borderRadius: globalTokens.corner.radius80,
+    paddingVertical: globalTokens.size80,
 });
-//# sourceMappingURL=MenuListTokens.android.js.map
+//# sourceMappingURL=MenuListTokens.android.js.map

package/lib/MenuList/MenuListTokens.d.ts

@@ -2,4 +2,4 @@ import type { Theme } from '@fluentui-react-native/framework';
 import type { TokenSettings } from '@fluentui-react-native/use-styling';
 import type { MenuListTokens } from './MenuList.types';
 export declare const defaultMenuListTokens: TokenSettings<MenuListTokens, Theme>;
-//# sourceMappingURL=MenuListTokens.d.ts.map
+//# sourceMappingURL=MenuListTokens.d.ts.map

package/lib/MenuList/MenuListTokens.js

@@ -1,9 +1,9 @@
 import { globalTokens } from '@fluentui-react-native/theme-tokens';
 export const defaultMenuListTokens = (t) => ({
-  padding: globalTokens.size40,
-  minWidth: 128,
-  maxWidth: 300,
-  backgroundColor: t.colors.neutralBackground1,
-  gap: globalTokens.size20,
+    padding: globalTokens.size40,
+    minWidth: 128,
+    maxWidth: 300,
+    backgroundColor: t.colors.neutralBackground1,
+    gap: globalTokens.size20,
 });
-//# sourceMappingURL=MenuListTokens.js.map
+//# sourceMappingURL=MenuListTokens.js.map

package/lib/MenuList/MenuListTokens.macos.d.ts

@@ -2,4 +2,4 @@ import type { Theme } from '@fluentui-react-native/framework';
 import type { TokenSettings } from '@fluentui-react-native/use-styling';
 import type { MenuListTokens } from './MenuList.types';
 export declare const defaultMenuListTokens: TokenSettings<MenuListTokens, Theme>;
-//# sourceMappingURL=MenuListTokens.macos.d.ts.map
+//# sourceMappingURL=MenuListTokens.macos.d.ts.map

package/lib/MenuList/MenuListTokens.macos.js

@@ -1,7 +1,7 @@
 import { globalTokens } from '@fluentui-react-native/theme-tokens';
 export const defaultMenuListTokens = (t) => ({
-  padding: 5, // hardcoded for now to match NSMenu
-  backgroundColor: t.colors.transparentBackground,
-  gap: globalTokens.size20,
+    padding: 5, // hardcoded for now to match NSMenu
+    backgroundColor: t.colors.transparentBackground,
+    gap: globalTokens.size20,
 });
-//# sourceMappingURL=MenuListTokens.macos.js.map
+//# sourceMappingURL=MenuListTokens.macos.js.map

package/lib/MenuList/MenuListTokens.win32.d.ts

@@ -2,4 +2,4 @@ import type { Theme } from '@fluentui-react-native/framework';
 import type { TokenSettings } from '@fluentui-react-native/use-styling';
 import type { MenuListTokens } from './MenuList.types';
 export declare const defaultMenuListTokens: TokenSettings<MenuListTokens, Theme>;
-//# sourceMappingURL=MenuListTokens.win32.d.ts.map
+//# sourceMappingURL=MenuListTokens.win32.d.ts.map

package/lib/MenuList/MenuListTokens.win32.js

@@ -1,12 +1,12 @@
 import { globalTokens } from '@fluentui-react-native/theme-tokens';
 export const defaultMenuListTokens = (t) => ({
-  paddingVertical: globalTokens.size40,
-  minWidth: 128,
-  maxWidth: 300,
-  backgroundColor: t.colors.neutralBackground1,
-  /* To account for the width of the vertical scrollView. With the default minWidth, some content may be cut off */
-  hasMaxHeight: {
-    minWidth: 140,
-  },
+    paddingVertical: globalTokens.size40,
+    minWidth: 128,
+    maxWidth: 300,
+    backgroundColor: t.colors.neutralBackground1,
+    /* To account for the width of the vertical scrollView. With the default minWidth, some content may be cut off */
+    hasMaxHeight: {
+        minWidth: 140,
+    },
 });
-//# sourceMappingURL=MenuListTokens.win32.js.map
+//# sourceMappingURL=MenuListTokens.win32.js.map

package/lib/MenuList/index.d.ts

@@ -3,4 +3,4 @@ export { menuListName } from './MenuList.types';
 export type { MenuListProps, MenuListState, MenuListTokens, MenuListSlotProps, MenuListType } from './MenuList.types';
 export { useMenuList } from './useMenuList';
 export { useMenuListContextValue } from './useMenuListContextValue';
-//# sourceMappingURL=index.d.ts.map
+//# sourceMappingURL=index.d.ts.map

package/lib/MenuList/index.js

@@ -2,4 +2,4 @@ export { MenuList } from './MenuList';
 export { menuListName } from './MenuList.types';
 export { useMenuList } from './useMenuList';
 export { useMenuListContextValue } from './useMenuListContextValue';
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/lib/MenuList/useMenuList.d.ts

@@ -3,4 +3,4 @@ import type { View } from 'react-native';
 import type { MenuListProps, MenuListState } from './MenuList.types';
 export declare const useMenuList: (_props: MenuListProps) => MenuListState;
 export declare const useMenuItemTracking: (ref: React.RefObject<View>, disabled: boolean) => void;
-//# sourceMappingURL=useMenuList.d.ts.map
+//# sourceMappingURL=useMenuList.d.ts.map