@fluentui-react-native/menu 0.15.1 → 0.15.4

package/CHANGELOG.json

@@ -2,7 +2,52 @@
   "name": "@fluentui-react-native/menu",
   "entries": [
     {
-      "date": "Fri, 17 Jun 2022 00:26:55 GMT",
+      "date": "Tue, 21 Jun 2022 21:43:33 GMT",
+      "tag": "@fluentui-react-native/menu_v0.15.4",
+      "version": "0.15.4",
+      "comments": {
+        "patch": [
+          {
+            "author": "ruaraki@microsoft.com",
+            "package": "@fluentui-react-native/menu",
+            "commit": "c606f6deb5e1be500fc4183e6537dbf523c84194",
+            "comment": "Some refactoring"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 21 Jun 2022 18:57:19 GMT",
+      "tag": "@fluentui-react-native/menu_v0.15.3",
+      "version": "0.15.3",
+      "comments": {
+        "patch": [
+          {
+            "author": "ruaraki@microsoft.com",
+            "package": "@fluentui-react-native/menu",
+            "commit": "842bfbf392c70c12da4774d2c4295d442fe8fd02",
+            "comment": "Add tokens to MenuPopover"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 17 Jun 2022 20:00:18 GMT",
+      "tag": "@fluentui-react-native/menu_v0.15.2",
+      "version": "0.15.2",
+      "comments": {
+        "patch": [
+          {
+            "author": "ruaraki@microsoft.com",
+            "package": "@fluentui-react-native/menu",
+            "commit": "0521256cec60beb1ed3418be7aa593b6ec6eef85",
+            "comment": "Add hoverDelay prop"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 17 Jun 2022 00:27:10 GMT",
       "tag": "@fluentui-react-native/menu_v0.15.1",
       "version": "0.15.1",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,36 @@
 # Change Log - @fluentui-react-native/menu
 
-This log was last generated on Fri, 17 Jun 2022 00:26:55 GMT and should not be manually modified.
+This log was last generated on Tue, 21 Jun 2022 21:43:33 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 0.15.4
+
+Tue, 21 Jun 2022 21:43:33 GMT
+
+### Patches
+
+- Some refactoring (ruaraki@microsoft.com)
+
+## 0.15.3
+
+Tue, 21 Jun 2022 18:57:19 GMT
+
+### Patches
+
+- Add tokens to MenuPopover (ruaraki@microsoft.com)
+
+## 0.15.2
+
+Fri, 17 Jun 2022 20:00:18 GMT
+
+### Patches
+
+- Add hoverDelay prop (ruaraki@microsoft.com)
+
 ## 0.15.1
 
-Fri, 17 Jun 2022 00:26:55 GMT
+Fri, 17 Jun 2022 00:27:10 GMT
 
 ### Patches
 

package/lib/Menu/Menu.types.d.ts

@@ -8,6 +8,10 @@ export interface MenuProps extends MenuListProps {
      * Whether the popup is open on mount
      */
     defaultOpen?: boolean;
+    /**
+     * How much delay to have between hover in and showing the menu, in ms.
+     */
+    hoverDelay?: number;
     /**
      * Whether the popup is open
      */

package/lib/Menu/Menu.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.types.d.ts","sourceRoot":"","sources":["../../src/Menu/Menu.types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAC5E,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAEhE,eAAO,MAAM,QAAQ,SAAS,CAAC;AAE/B,MAAM,WAAW,SAAU,SAAQ,aAAa;IAC9C;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,gBAAgB,EAAE,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAK9D,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,SAAU,SAAQ,SAAS;IAC1C,YAAY,EAAE,OAAO,CAAC;IACtB,SAAS,EAAE,OAAO,CAAC;IACnB,0BAA0B,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC;IAC5C,OAAO,EAAE,CAAC,CAAC,EAAE,gBAAgB,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1E,sBAAsB,EAAE,OAAO,CAAC;IAChC,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;CAC9C"}
+{"version":3,"file":"Menu.types.d.ts","sourceRoot":"","sources":["../../src/Menu/Menu.types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAC5E,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAEhE,eAAO,MAAM,QAAQ,SAAS,CAAC;AAE/B,MAAM,WAAW,SAAU,SAAQ,aAAa;IAC9C;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,gBAAgB,EAAE,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAK9D,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,SAAU,SAAQ,SAAS;IAC1C,YAAY,EAAE,OAAO,CAAC;IACtB,SAAS,EAAE,OAAO,CAAC;IACnB,0BAA0B,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC;IAC5C,OAAO,EAAE,CAAC,CAAC,EAAE,gBAAgB,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1E,sBAAsB,EAAE,OAAO,CAAC;IAChC,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;CAC9C"}

package/lib/MenuItemCheckbox/MenuItemCheckbox.types.d.ts

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { ColorValue, ViewProps } from 'react-native';
+import { ColorValue } from 'react-native';
 import { XmlProps } from 'react-native-svg';
 import type { IViewProps } from '@fluentui-react-native/adapters';
 import { TextProps } from '@fluentui-react-native/experimental-text';
-import { IFocusable, IPressableHooks, IWithPressableOptions } from '@fluentui-react-native/interactive-hooks';
-import { FontTokens, IBorderTokens, IColorTokens, LayoutTokens } from '@fluentui-react-native/tokens';
+import { IPressableHooks } from '@fluentui-react-native/interactive-hooks';
+import { MenuItemProps, MenuItemTokens } from '../MenuItem/MenuItem.types';
 export declare const menuItemCheckboxName = "MenuItemCheckbox";
-export interface MenuItemCheckboxTokens extends LayoutTokens, FontTokens, IBorderTokens, IColorTokens {
+export interface MenuItemCheckboxTokens extends Omit<MenuItemTokens, 'submenuIndicatorPadding' | 'submenuIndicatorSize' | 'disabled' | 'focused' | 'hovered' | 'pressed'> {
     /**
      * Color of the checkmark icon
      */
@@ -15,18 +15,10 @@ export interface MenuItemCheckboxTokens extends LayoutTokens, FontTokens, IBorde
      * Amount of space in pixels around the checkmark icon
      */
     checkmarkPadding?: number;
-    /**
-     * Height and width in pixels of the checkmark icon
-     */
-    checkmarkSize?: number;
     /**
      * Visibility of the checkmark icon from 0 to 1
      */
     checkmarkVisibility?: number;
-    /**
-     * Space between parts of the item control in pixels
-     */
-    gap?: number;
     /**
      * States of the item control
      */
@@ -36,11 +28,7 @@ export interface MenuItemCheckboxTokens extends LayoutTokens, FontTokens, IBorde
     hovered?: MenuItemCheckboxTokens;
     pressed?: MenuItemCheckboxTokens;
 }
-export interface MenuItemCheckboxProps extends Omit<IWithPressableOptions<ViewProps>, 'onPress'> {
-    /**
-     * A RefObject to access the IButton interface. Use this to access the public methods and properties of the component.
-     */
-    componentRef?: React.RefObject<IFocusable>;
+export interface MenuItemCheckboxProps extends MenuItemProps {
     /**
      * Identifier for the control
      */

package/lib/MenuItemCheckbox/MenuItemCheckbox.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItemCheckbox.types.d.ts","sourceRoot":"","sources":["../../src/MenuItemCheckbox/MenuItemCheckbox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,0CAA0C,CAAC;AAC9G,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAEtG,eAAO,MAAM,oBAAoB,qBAAqB,CAAC;AAEvD,MAAM,WAAW,sBAAuB,SAAQ,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,YAAY;IACnG;;OAEG;IACH,cAAc,CAAC,EAAE,UAAU,CAAC;IAE5B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,QAAQ,CAAC,EAAE,sBAAsB,CAAC;IAClC,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,OAAO,CAAC,EAAE,sBAAsB,CAAC;CAClC;AAED,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,qBAAqB,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC;IAC9F;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;IAE3C;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,qBAAsB,SAAQ,eAAe,CAAC,qBAAqB,GAAG,KAAK,CAAC,qBAAqB,CAAC,GAAG,CAAC,CAAC;CAAG;AAE3H,MAAM,WAAW,yBAAyB;IACxC,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;IACrC,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,qBAAqB,CAAC;IAC7B,MAAM,EAAE,sBAAsB,CAAC;IAC/B,SAAS,EAAE,yBAAyB,CAAC;CACtC"}
+{"version":3,"file":"MenuItemCheckbox.types.d.ts","sourceRoot":"","sources":["../../src/MenuItemCheckbox/MenuItemCheckbox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AACrE,OAAO,EAAE,eAAe,EAAE,MAAM,0CAA0C,CAAC;AAC3E,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAE3E,eAAO,MAAM,oBAAoB,qBAAqB,CAAC;AAEvD,MAAM,WAAW,sBACf,SAAQ,IAAI,CAAC,cAAc,EAAE,yBAAyB,GAAG,sBAAsB,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;IACjI;;OAEG;IACH,cAAc,CAAC,EAAE,UAAU,CAAC;IAE5B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B;;OAEG;IACH,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,QAAQ,CAAC,EAAE,sBAAsB,CAAC;IAClC,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,OAAO,CAAC,EAAE,sBAAsB,CAAC;CAClC;AAED,MAAM,WAAW,qBAAsB,SAAQ,aAAa;IAC1D;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,qBAAsB,SAAQ,eAAe,CAAC,qBAAqB,GAAG,KAAK,CAAC,qBAAqB,CAAC,GAAG,CAAC,CAAC;CAAG;AAE3H,MAAM,WAAW,yBAAyB;IACxC,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;IACrC,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,qBAAqB,CAAC;IAC7B,MAAM,EAAE,sBAAsB,CAAC;IAC/B,SAAS,EAAE,yBAAyB,CAAC;CACtC"}

package/lib/MenuPopover/MenuPopover.d.ts

@@ -1,3 +1,4 @@
-export declare const MenuPopover: import("@fluentui-react-native/framework").ComposableFunction<import("@fluentui-react-native/callout").ICalloutProps>;
+import { MenuPopoverTokens } from './MenuPopover.types';
+export declare const MenuPopover: import("@fluentui-react-native/use-tokens").CustomizableComponent<import("@fluentui-react-native/callout").ICalloutProps, MenuPopoverTokens, import("@fluentui-react-native/framework").Theme>;
 export default MenuPopover;
 //# sourceMappingURL=MenuPopover.d.ts.map

package/lib/MenuPopover/MenuPopover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuPopover.d.ts","sourceRoot":"","sources":["../../src/MenuPopover/MenuPopover.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,WAAW,uHAatB,CAAC;AAGH,eAAe,WAAW,CAAC"}
+{"version":3,"file":"MenuPopover.d.ts","sourceRoot":"","sources":["../../src/MenuPopover/MenuPopover.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAqC,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAK3F,eAAO,MAAM,WAAW,gMAyBvB,CAAC;AAGF,eAAe,WAAW,CAAC"}

package/lib/MenuPopover/MenuPopover.js

@@ -1,19 +1,33 @@
 import { __assign } from "tslib";
 import React from 'react';
-import { mergeProps, stagedComponent, useFluentTheme } from '@fluentui-react-native/framework';
+import { compressible, mergeProps, patchTokens, useFluentTheme } from '@fluentui-react-native/framework';
 import { Callout } from '@fluentui-react-native/callout';
 import { menuPopoverName } from './MenuPopover.types';
 import { useMenuPopover } from './useMenuPopover';
+import { useMenuPopoverTokens } from './MenuPopoverTokens';
 import { View } from 'react-native';
-export var MenuPopover = stagedComponent(function (props) {
+export var MenuPopover = compressible(function (props, useTokens) {
+    var _a;
+    var directionalHint = props.directionalHint, gapSpace = props.gapSpace, maxHeight = props.maxHeight, maxWidth = props.maxWidth, minPadding = props.minPadding, borderWidth = props.borderWidth, borderColor = props.borderColor, backgroundColor = props.backgroundColor;
     var state = useMenuPopover(props);
     var theme = useFluentTheme();
+    var _b = useTokens(theme), tokens = _b[0], cache = _b[1];
+    _a = patchTokens(tokens, cache, {
+        directionalHint: directionalHint,
+        gapSpace: gapSpace,
+        maxHeight: maxHeight,
+        maxWidth: maxWidth,
+        minPadding: minPadding,
+        borderWidth: borderWidth,
+        borderColor: borderColor,
+        backgroundColor: backgroundColor,
+    }), tokens = _a[0], cache = _a[1];
     return function (final, children) {
-        var mergedProps = mergeProps(state.props, final);
+        var mergedProps = mergeProps(tokens, state.props, final);
         var content = React.createElement(View, state.innerView, children);
-        return (React.createElement(Callout, __assign({ borderWidth: 1, borderColor: theme.colors.neutralStrokeAccessible }, mergedProps), content));
+        return React.createElement(Callout, __assign({}, mergedProps), content);
     };
-});
+}, useMenuPopoverTokens);
 MenuPopover.displayName = menuPopoverName;
 export default MenuPopover;
 //# sourceMappingURL=MenuPopover.js.map

package/lib/MenuPopover/MenuPopover.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuPopover.js","sourceRoot":"","sources":["../../src/MenuPopover/MenuPopover.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAC/F,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AACzD,OAAO,EAAE,eAAe,EAAoB,MAAM,qBAAqB,CAAC;AACxE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,MAAM,CAAC,IAAM,WAAW,GAAG,eAAe,CAAC,UAAC,KAAuB;IACjE,IAAM,KAAK,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;IACpC,IAAM,KAAK,GAAG,cAAc,EAAE,CAAC;IAE/B,OAAO,UAAC,KAAuB,EAAE,QAAyB;QACxD,IAAM,WAAW,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QACnD,IAAM,OAAO,GAAG,KAAK,CAAC,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;QACrE,OAAO,CACL,oBAAC,OAAO,aAAC,WAAW,EAAE,CAAC,EAAE,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,uBAAuB,IAAM,WAAW,GACxF,OAAO,CACA,CACX,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,WAAW,CAAC,WAAW,GAAG,eAAe,CAAC;AAE1C,eAAe,WAAW,CAAC"}
+{"version":3,"file":"MenuPopover.js","sourceRoot":"","sources":["../../src/MenuPopover/MenuPopover.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,cAAc,EAAa,MAAM,kCAAkC,CAAC;AACpH,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AACzD,OAAO,EAAE,eAAe,EAAuC,MAAM,qBAAqB,CAAC;AAC3F,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,MAAM,CAAC,IAAM,WAAW,GAAG,YAAY,CACrC,UAAC,KAAuB,EAAE,SAAuC;;IACvD,IAAA,eAAe,GAA2F,KAAK,gBAAhG,EAAE,QAAQ,GAAiF,KAAK,SAAtF,EAAE,SAAS,GAAsE,KAAK,UAA3E,EAAE,QAAQ,GAA4D,KAAK,SAAjE,EAAE,UAAU,GAAgD,KAAK,WAArD,EAAE,WAAW,GAAmC,KAAK,YAAxC,EAAE,WAAW,GAAsB,KAAK,YAA3B,EAAE,eAAe,GAAK,KAAK,gBAAV,CAAW;IACxH,IAAM,KAAK,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;IACpC,IAAM,KAAK,GAAG,cAAc,EAAE,CAAC;IAC3B,IAAA,KAAkB,SAAS,CAAC,KAAK,CAAC,EAAjC,MAAM,QAAA,EAAE,KAAK,QAAoB,CAAC;IAEvC,KAAkB,WAAW,CAAC,MAAM,EAAE,KAAK,EAAE;QAC3C,eAAe,iBAAA;QACf,QAAQ,UAAA;QACR,SAAS,WAAA;QACT,QAAQ,UAAA;QACR,UAAU,YAAA;QACV,WAAW,aAAA;QACX,WAAW,aAAA;QACX,eAAe,iBAAA;KAChB,CAAC,EATD,MAAM,QAAA,EAAE,KAAK,QAAA,CASX;IAEH,OAAO,UAAC,KAAuB,EAAE,QAAyB;QACxD,IAAM,WAAW,GAAG,UAAU,CAAC,MAAM,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QAC3D,IAAM,OAAO,GAAG,KAAK,CAAC,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;QACrE,OAAO,oBAAC,OAAO,eAAK,WAAW,GAAG,OAAO,CAAW,CAAC;IACvD,CAAC,CAAC;AACJ,CAAC,EACD,oBAAoB,CACrB,CAAC;AACF,WAAW,CAAC,WAAW,GAAG,eAAe,CAAC;AAE1C,eAAe,WAAW,CAAC"}

package/lib/MenuPopover/MenuPopover.types.d.ts

@@ -1,6 +1,7 @@
 import { IViewProps } from '@fluentui-react-native/adapters';
-import { ICalloutProps } from '@fluentui-react-native/callout';
+import { ICalloutProps, ICalloutTokens } from '@fluentui-react-native/callout';
 export declare const menuPopoverName = "MenuPopover";
+export declare type MenuPopoverTokens = Omit<ICalloutTokens, 'anchorRect' | 'beakWidth' | 'dismissBehaviors'>;
 export declare type MenuPopoverProps = ICalloutProps;
 export interface MenuPopoverState {
     props: ICalloutProps;

package/lib/MenuPopover/MenuPopover.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuPopover.types.d.ts","sourceRoot":"","sources":["../../src/MenuPopover/MenuPopover.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAE/D,eAAO,MAAM,eAAe,gBAAgB,CAAC;AAE7C,oBAAY,gBAAgB,GAAG,aAAa,CAAC;AAE7C,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,aAAa,CAAC;IACrB,SAAS,EAAE,UAAU,CAAC;CACvB"}
+{"version":3,"file":"MenuPopover.types.d.ts","sourceRoot":"","sources":["../../src/MenuPopover/MenuPopover.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAE/E,eAAO,MAAM,eAAe,gBAAgB,CAAC;AAI7C,oBAAY,iBAAiB,GAAG,IAAI,CAAC,cAAc,EAAE,YAAY,GAAG,WAAW,GAAG,kBAAkB,CAAC,CAAC;AAEtG,oBAAY,gBAAgB,GAAG,aAAa,CAAC;AAE7C,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,aAAa,CAAC;IACrB,SAAS,EAAE,UAAU,CAAC;CACvB"}

package/lib/MenuPopover/MenuPopoverTokens.d.ts

@@ -0,0 +1,3 @@
+import { MenuPopoverTokens } from './MenuPopover.types';
+export declare const useMenuPopoverTokens: import("@fluentui-react-native/framework").UseTokens<MenuPopoverTokens>;
+//# sourceMappingURL=MenuPopoverTokens.d.ts.map

package/lib/MenuPopover/MenuPopoverTokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuPopoverTokens.d.ts","sourceRoot":"","sources":["../../src/MenuPopover/MenuPopoverTokens.ts"],"names":[],"mappings":"AACA,OAAO,EAAmB,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAEzE,eAAO,MAAM,oBAAoB,yEAGhC,CAAC"}

package/lib/MenuPopover/MenuPopoverTokens.js

@@ -0,0 +1,4 @@
+import { buildUseTokens } from '@fluentui-react-native/framework';
+import { menuPopoverName } from './MenuPopover.types';
+export var useMenuPopoverTokens = buildUseTokens(function (t) { return ({ borderWidth: 1, borderColor: t.colors.neutralStrokeAccessible }); }, menuPopoverName);
+//# sourceMappingURL=MenuPopoverTokens.js.map

package/lib/MenuPopover/MenuPopoverTokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuPopoverTokens.js","sourceRoot":"","sources":["../../src/MenuPopover/MenuPopoverTokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAS,MAAM,kCAAkC,CAAC;AACzE,OAAO,EAAE,eAAe,EAAqB,MAAM,qBAAqB,CAAC;AAEzE,MAAM,CAAC,IAAM,oBAAoB,GAAG,cAAc,CAChD,UAAC,CAAQ,IAAK,OAAA,CAAC,EAAE,WAAW,EAAE,CAAC,EAAE,WAAW,EAAE,CAAC,CAAC,MAAM,CAAC,uBAAuB,EAAE,CAAC,EAAnE,CAAmE,EACjF,eAAe,CAChB,CAAC"}

package/lib/MenuTrigger/useMenuTrigger.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMenuTrigger.d.ts","sourceRoot":"","sources":["../../src/MenuTrigger/useMenuTrigger.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAUvD,eAAO,MAAM,cAAc,QAAO,gBAqEjC,CAAC"}
+{"version":3,"file":"useMenuTrigger.d.ts","sourceRoot":"","sources":["../../src/MenuTrigger/useMenuTrigger.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAUvD,eAAO,MAAM,cAAc,QAAO,gBA8EjC,CAAC"}

package/lib/MenuTrigger/useMenuTrigger.js

@@ -1,13 +1,13 @@
 import { useMenuContext } from '../context/menuContext';
 import { Platform } from 'react-native';
 import React from 'react';
-import { delayHover, isCloseOnHoverOutEnabled } from '../consts';
+import { hoverDelayDefault, isCloseOnHoverOutEnabled } from '../consts';
 var accessibilityActions = Platform.OS === 'win32' ? [{ name: 'Expand' }, { name: 'Collapse' }] : [];
 var expandedState = { expanded: true };
 var collapsedState = { expanded: false };
 export var useMenuTrigger = function () {
     var context = useMenuContext();
-    var open = context.open, openOnHover = context.openOnHover, popoverHoverOutTimer = context.popoverHoverOutTimer, setOpen = context.setOpen, setTriggerHoverOutTimer = context.setTriggerHoverOutTimer, triggerHoverOutTimer = context.triggerHoverOutTimer, triggerRef = context.triggerRef;
+    var _a = context.hoverDelay, hoverDelay = _a === void 0 ? hoverDelayDefault : _a, open = context.open, openOnHover = context.openOnHover, popoverHoverOutTimer = context.popoverHoverOutTimer, setOpen = context.setOpen, setTriggerHoverOutTimer = context.setTriggerHoverOutTimer, triggerHoverOutTimer = context.triggerHoverOutTimer, triggerRef = context.triggerRef;
     var accessibilityState = open ? expandedState : collapsedState;
     var onAccessibilityAction = React.useCallback(function (e) {
         if (Platform.OS === 'win32') {
@@ -28,18 +28,18 @@ export var useMenuTrigger = function () {
             e.persist();
             setTimeout(function () {
                 setOpen(e, true /* isOpen */);
-            }, delayHover);
+            }, hoverDelay);
         }
-    }, [openOnHover, setOpen, triggerHoverOutTimer, popoverHoverOutTimer]);
+    }, [hoverDelay, openOnHover, setOpen, triggerHoverOutTimer, popoverHoverOutTimer]);
     var onHoverOut = React.useCallback(function (e) {
         if (openOnHover) {
             e.persist();
             var timer = setTimeout(function () {
                 setOpen(e, false /* isOpen */);
-            }, delayHover);
+            }, hoverDelay);
             setTriggerHoverOutTimer(timer);
         }
-    }, [openOnHover, setOpen, setTriggerHoverOutTimer]);
+    }, [hoverDelay, openOnHover, setOpen, setTriggerHoverOutTimer]);
     var onClick = React.useCallback(function (e) {
         setOpen(e, !open);
     }, [open, setOpen]);

package/lib/MenuTrigger/useMenuTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMenuTrigger.js","sourceRoot":"","sources":["../../src/MenuTrigger/useMenuTrigger.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useMenuTrigger.js","sourceRoot":"","sources":["../../src/MenuTrigger/useMenuTrigger.ts"],"names":[],"mappings":"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"}

package/lib/consts.d.ts

@@ -1,3 +1,3 @@
-export declare const delayHover: number;
+export declare const hoverDelayDefault: number;
 export declare const isCloseOnHoverOutEnabled: boolean;
 //# sourceMappingURL=consts.d.ts.map

package/lib/consts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"consts.d.ts","sourceRoot":"","sources":["../src/consts.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,QAGrB,CAAC;AAEH,eAAO,MAAM,wBAAwB,SAAmC,CAAC"}
+{"version":3,"file":"consts.d.ts","sourceRoot":"","sources":["../src/consts.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,QAG5B,CAAC;AAEH,eAAO,MAAM,wBAAwB,SAAmC,CAAC"}

package/lib/consts.js

@@ -1,5 +1,5 @@
 import { Platform } from 'react-native';
-export var delayHover = Platform.select({
+export var hoverDelayDefault = Platform.select({
     macos: 100,
     default: 500, // win32
 });

package/lib/consts.js.map

@@ -1 +1 @@
-{"version":3,"file":"consts.js","sourceRoot":"","sources":["../src/consts.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,MAAM,CAAC,IAAM,UAAU,GAAG,QAAQ,CAAC,MAAM,CAAC;IACxC,KAAK,EAAE,GAAG;IACV,OAAO,EAAE,GAAG,EAAE,QAAQ;CACvB,CAAC,CAAC;AAEH,MAAM,CAAC,IAAM,wBAAwB,GAAG,QAAQ,CAAC,EAAE,KAAM,OAAe,CAAC"}
+{"version":3,"file":"consts.js","sourceRoot":"","sources":["../src/consts.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,MAAM,CAAC,IAAM,iBAAiB,GAAG,QAAQ,CAAC,MAAM,CAAC;IAC/C,KAAK,EAAE,GAAG;IACV,OAAO,EAAE,GAAG,EAAE,QAAQ;CACvB,CAAC,CAAC;AAEH,MAAM,CAAC,IAAM,wBAAwB,GAAG,QAAQ,CAAC,EAAE,KAAM,OAAe,CAAC"}

package/lib-commonjs/Menu/Menu.types.d.ts

@@ -8,6 +8,10 @@ export interface MenuProps extends MenuListProps {
      * Whether the popup is open on mount
      */
     defaultOpen?: boolean;
+    /**
+     * How much delay to have between hover in and showing the menu, in ms.
+     */
+    hoverDelay?: number;
     /**
      * Whether the popup is open
      */

package/lib-commonjs/Menu/Menu.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.types.d.ts","sourceRoot":"","sources":["../../src/Menu/Menu.types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAC5E,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAEhE,eAAO,MAAM,QAAQ,SAAS,CAAC;AAE/B,MAAM,WAAW,SAAU,SAAQ,aAAa;IAC9C;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,gBAAgB,EAAE,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAK9D,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,SAAU,SAAQ,SAAS;IAC1C,YAAY,EAAE,OAAO,CAAC;IACtB,SAAS,EAAE,OAAO,CAAC;IACnB,0BAA0B,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC;IAC5C,OAAO,EAAE,CAAC,CAAC,EAAE,gBAAgB,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1E,sBAAsB,EAAE,OAAO,CAAC;IAChC,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;CAC9C"}
+{"version":3,"file":"Menu.types.d.ts","sourceRoot":"","sources":["../../src/Menu/Menu.types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAC5E,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAEhE,eAAO,MAAM,QAAQ,SAAS,CAAC;AAE/B,MAAM,WAAW,SAAU,SAAQ,aAAa;IAC9C;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,gBAAgB,EAAE,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAK9D,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,SAAU,SAAQ,SAAS;IAC1C,YAAY,EAAE,OAAO,CAAC;IACtB,SAAS,EAAE,OAAO,CAAC;IACnB,0BAA0B,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC;IAC5C,OAAO,EAAE,CAAC,CAAC,EAAE,gBAAgB,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1E,sBAAsB,EAAE,OAAO,CAAC;IAChC,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;CAC9C"}

package/lib-commonjs/MenuItemCheckbox/MenuItemCheckbox.types.d.ts

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { ColorValue, ViewProps } from 'react-native';
+import { ColorValue } from 'react-native';
 import { XmlProps } from 'react-native-svg';
 import type { IViewProps } from '@fluentui-react-native/adapters';
 import { TextProps } from '@fluentui-react-native/experimental-text';
-import { IFocusable, IPressableHooks, IWithPressableOptions } from '@fluentui-react-native/interactive-hooks';
-import { FontTokens, IBorderTokens, IColorTokens, LayoutTokens } from '@fluentui-react-native/tokens';
+import { IPressableHooks } from '@fluentui-react-native/interactive-hooks';
+import { MenuItemProps, MenuItemTokens } from '../MenuItem/MenuItem.types';
 export declare const menuItemCheckboxName = "MenuItemCheckbox";
-export interface MenuItemCheckboxTokens extends LayoutTokens, FontTokens, IBorderTokens, IColorTokens {
+export interface MenuItemCheckboxTokens extends Omit<MenuItemTokens, 'submenuIndicatorPadding' | 'submenuIndicatorSize' | 'disabled' | 'focused' | 'hovered' | 'pressed'> {
     /**
      * Color of the checkmark icon
      */
@@ -15,18 +15,10 @@ export interface MenuItemCheckboxTokens extends LayoutTokens, FontTokens, IBorde
      * Amount of space in pixels around the checkmark icon
      */
     checkmarkPadding?: number;
-    /**
-     * Height and width in pixels of the checkmark icon
-     */
-    checkmarkSize?: number;
     /**
      * Visibility of the checkmark icon from 0 to 1
      */
     checkmarkVisibility?: number;
-    /**
-     * Space between parts of the item control in pixels
-     */
-    gap?: number;
     /**
      * States of the item control
      */
@@ -36,11 +28,7 @@ export interface MenuItemCheckboxTokens extends LayoutTokens, FontTokens, IBorde
     hovered?: MenuItemCheckboxTokens;
     pressed?: MenuItemCheckboxTokens;
 }
-export interface MenuItemCheckboxProps extends Omit<IWithPressableOptions<ViewProps>, 'onPress'> {
-    /**
-     * A RefObject to access the IButton interface. Use this to access the public methods and properties of the component.
-     */
-    componentRef?: React.RefObject<IFocusable>;
+export interface MenuItemCheckboxProps extends MenuItemProps {
     /**
      * Identifier for the control
      */

package/lib-commonjs/MenuItemCheckbox/MenuItemCheckbox.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItemCheckbox.types.d.ts","sourceRoot":"","sources":["../../src/MenuItemCheckbox/MenuItemCheckbox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,0CAA0C,CAAC;AAC9G,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAEtG,eAAO,MAAM,oBAAoB,qBAAqB,CAAC;AAEvD,MAAM,WAAW,sBAAuB,SAAQ,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,YAAY;IACnG;;OAEG;IACH,cAAc,CAAC,EAAE,UAAU,CAAC;IAE5B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,QAAQ,CAAC,EAAE,sBAAsB,CAAC;IAClC,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,OAAO,CAAC,EAAE,sBAAsB,CAAC;CAClC;AAED,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,qBAAqB,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC;IAC9F;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;IAE3C;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,qBAAsB,SAAQ,eAAe,CAAC,qBAAqB,GAAG,KAAK,CAAC,qBAAqB,CAAC,GAAG,CAAC,CAAC;CAAG;AAE3H,MAAM,WAAW,yBAAyB;IACxC,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;IACrC,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,qBAAqB,CAAC;IAC7B,MAAM,EAAE,sBAAsB,CAAC;IAC/B,SAAS,EAAE,yBAAyB,CAAC;CACtC"}
+{"version":3,"file":"MenuItemCheckbox.types.d.ts","sourceRoot":"","sources":["../../src/MenuItemCheckbox/MenuItemCheckbox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AACrE,OAAO,EAAE,eAAe,EAAE,MAAM,0CAA0C,CAAC;AAC3E,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAE3E,eAAO,MAAM,oBAAoB,qBAAqB,CAAC;AAEvD,MAAM,WAAW,sBACf,SAAQ,IAAI,CAAC,cAAc,EAAE,yBAAyB,GAAG,sBAAsB,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;IACjI;;OAEG;IACH,cAAc,CAAC,EAAE,UAAU,CAAC;IAE5B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B;;OAEG;IACH,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,QAAQ,CAAC,EAAE,sBAAsB,CAAC;IAClC,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,OAAO,CAAC,EAAE,sBAAsB,CAAC;CAClC;AAED,MAAM,WAAW,qBAAsB,SAAQ,aAAa;IAC1D;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,qBAAsB,SAAQ,eAAe,CAAC,qBAAqB,GAAG,KAAK,CAAC,qBAAqB,CAAC,GAAG,CAAC,CAAC;CAAG;AAE3H,MAAM,WAAW,yBAAyB;IACxC,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;IACrC,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,qBAAqB,CAAC;IAC7B,MAAM,EAAE,sBAAsB,CAAC;IAC/B,SAAS,EAAE,yBAAyB,CAAC;CACtC"}

package/lib-commonjs/MenuPopover/MenuPopover.d.ts

@@ -1,3 +1,4 @@
-export declare const MenuPopover: import("@fluentui-react-native/framework").ComposableFunction<import("@fluentui-react-native/callout").ICalloutProps>;
+import { MenuPopoverTokens } from './MenuPopover.types';
+export declare const MenuPopover: import("@fluentui-react-native/use-tokens").CustomizableComponent<import("@fluentui-react-native/callout").ICalloutProps, MenuPopoverTokens, import("@fluentui-react-native/framework").Theme>;
 export default MenuPopover;
 //# sourceMappingURL=MenuPopover.d.ts.map

package/lib-commonjs/MenuPopover/MenuPopover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuPopover.d.ts","sourceRoot":"","sources":["../../src/MenuPopover/MenuPopover.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,WAAW,uHAatB,CAAC;AAGH,eAAe,WAAW,CAAC"}
+{"version":3,"file":"MenuPopover.d.ts","sourceRoot":"","sources":["../../src/MenuPopover/MenuPopover.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAqC,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAK3F,eAAO,MAAM,WAAW,gMAyBvB,CAAC;AAGF,eAAe,WAAW,CAAC"}

package/lib-commonjs/MenuPopover/MenuPopover.js

@@ -7,16 +7,30 @@ var framework_1 = require("@fluentui-react-native/framework");
 var callout_1 = require("@fluentui-react-native/callout");
 var MenuPopover_types_1 = require("./MenuPopover.types");
 var useMenuPopover_1 = require("./useMenuPopover");
+var MenuPopoverTokens_1 = require("./MenuPopoverTokens");
 var react_native_1 = require("react-native");
-exports.MenuPopover = (0, framework_1.stagedComponent)(function (props) {
+exports.MenuPopover = (0, framework_1.compressible)(function (props, useTokens) {
+    var _a;
+    var directionalHint = props.directionalHint, gapSpace = props.gapSpace, maxHeight = props.maxHeight, maxWidth = props.maxWidth, minPadding = props.minPadding, borderWidth = props.borderWidth, borderColor = props.borderColor, backgroundColor = props.backgroundColor;
     var state = (0, useMenuPopover_1.useMenuPopover)(props);
     var theme = (0, framework_1.useFluentTheme)();
+    var _b = useTokens(theme), tokens = _b[0], cache = _b[1];
+    _a = (0, framework_1.patchTokens)(tokens, cache, {
+        directionalHint: directionalHint,
+        gapSpace: gapSpace,
+        maxHeight: maxHeight,
+        maxWidth: maxWidth,
+        minPadding: minPadding,
+        borderWidth: borderWidth,
+        borderColor: borderColor,
+        backgroundColor: backgroundColor,
+    }), tokens = _a[0], cache = _a[1];
     return function (final, children) {
-        var mergedProps = (0, framework_1.mergeProps)(state.props, final);
+        var mergedProps = (0, framework_1.mergeProps)(tokens, state.props, final);
         var content = react_1.default.createElement(react_native_1.View, state.innerView, children);
-        return (react_1.default.createElement(callout_1.Callout, (0, tslib_1.__assign)({ borderWidth: 1, borderColor: theme.colors.neutralStrokeAccessible }, mergedProps), content));
+        return react_1.default.createElement(callout_1.Callout, (0, tslib_1.__assign)({}, mergedProps), content);
     };
-});
+}, MenuPopoverTokens_1.useMenuPopoverTokens);
 exports.MenuPopover.displayName = MenuPopover_types_1.menuPopoverName;
 exports.default = exports.MenuPopover;
 //# sourceMappingURL=MenuPopover.js.map

package/lib-commonjs/MenuPopover/MenuPopover.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuPopover.js","sourceRoot":"","sources":["../../src/MenuPopover/MenuPopover.tsx"],"names":[],"mappings":";;;;AAAA,6DAA0B;AAC1B,8DAA+F;AAC/F,0DAAyD;AACzD,yDAAwE;AACxE,mDAAkD;AAClD,6CAAoC;AAEvB,QAAA,WAAW,GAAG,IAAA,2BAAe,EAAC,UAAC,KAAuB;IACjE,IAAM,KAAK,GAAG,IAAA,+BAAc,EAAC,KAAK,CAAC,CAAC;IACpC,IAAM,KAAK,GAAG,IAAA,0BAAc,GAAE,CAAC;IAE/B,OAAO,UAAC,KAAuB,EAAE,QAAyB;QACxD,IAAM,WAAW,GAAG,IAAA,sBAAU,EAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QACnD,IAAM,OAAO,GAAG,eAAK,CAAC,aAAa,CAAC,mBAAI,EAAE,KAAK,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;QACrE,OAAO,CACL,8BAAC,iBAAO,0BAAC,WAAW,EAAE,CAAC,EAAE,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,uBAAuB,IAAM,WAAW,GACxF,OAAO,CACA,CACX,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,mBAAW,CAAC,WAAW,GAAG,mCAAe,CAAC;AAE1C,kBAAe,mBAAW,CAAC"}
+{"version":3,"file":"MenuPopover.js","sourceRoot":"","sources":["../../src/MenuPopover/MenuPopover.tsx"],"names":[],"mappings":";;;;AAAA,6DAA0B;AAC1B,8DAAoH;AACpH,0DAAyD;AACzD,yDAA2F;AAC3F,mDAAkD;AAClD,yDAA2D;AAC3D,6CAAoC;AAEvB,QAAA,WAAW,GAAG,IAAA,wBAAY,EACrC,UAAC,KAAuB,EAAE,SAAuC;;IACvD,IAAA,eAAe,GAA2F,KAAK,gBAAhG,EAAE,QAAQ,GAAiF,KAAK,SAAtF,EAAE,SAAS,GAAsE,KAAK,UAA3E,EAAE,QAAQ,GAA4D,KAAK,SAAjE,EAAE,UAAU,GAAgD,KAAK,WAArD,EAAE,WAAW,GAAmC,KAAK,YAAxC,EAAE,WAAW,GAAsB,KAAK,YAA3B,EAAE,eAAe,GAAK,KAAK,gBAAV,CAAW;IACxH,IAAM,KAAK,GAAG,IAAA,+BAAc,EAAC,KAAK,CAAC,CAAC;IACpC,IAAM,KAAK,GAAG,IAAA,0BAAc,GAAE,CAAC;IAC3B,IAAA,KAAkB,SAAS,CAAC,KAAK,CAAC,EAAjC,MAAM,QAAA,EAAE,KAAK,QAAoB,CAAC;IAEvC,KAAkB,IAAA,uBAAW,EAAC,MAAM,EAAE,KAAK,EAAE;QAC3C,eAAe,iBAAA;QACf,QAAQ,UAAA;QACR,SAAS,WAAA;QACT,QAAQ,UAAA;QACR,UAAU,YAAA;QACV,WAAW,aAAA;QACX,WAAW,aAAA;QACX,eAAe,iBAAA;KAChB,CAAC,EATD,MAAM,QAAA,EAAE,KAAK,QAAA,CASX;IAEH,OAAO,UAAC,KAAuB,EAAE,QAAyB;QACxD,IAAM,WAAW,GAAG,IAAA,sBAAU,EAAC,MAAM,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QAC3D,IAAM,OAAO,GAAG,eAAK,CAAC,aAAa,CAAC,mBAAI,EAAE,KAAK,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;QACrE,OAAO,8BAAC,iBAAO,4BAAK,WAAW,GAAG,OAAO,CAAW,CAAC;IACvD,CAAC,CAAC;AACJ,CAAC,EACD,wCAAoB,CACrB,CAAC;AACF,mBAAW,CAAC,WAAW,GAAG,mCAAe,CAAC;AAE1C,kBAAe,mBAAW,CAAC"}

package/lib-commonjs/MenuPopover/MenuPopover.types.d.ts

@@ -1,6 +1,7 @@
 import { IViewProps } from '@fluentui-react-native/adapters';
-import { ICalloutProps } from '@fluentui-react-native/callout';
+import { ICalloutProps, ICalloutTokens } from '@fluentui-react-native/callout';
 export declare const menuPopoverName = "MenuPopover";
+export declare type MenuPopoverTokens = Omit<ICalloutTokens, 'anchorRect' | 'beakWidth' | 'dismissBehaviors'>;
 export declare type MenuPopoverProps = ICalloutProps;
 export interface MenuPopoverState {
     props: ICalloutProps;

package/lib-commonjs/MenuPopover/MenuPopover.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuPopover.types.d.ts","sourceRoot":"","sources":["../../src/MenuPopover/MenuPopover.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAE/D,eAAO,MAAM,eAAe,gBAAgB,CAAC;AAE7C,oBAAY,gBAAgB,GAAG,aAAa,CAAC;AAE7C,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,aAAa,CAAC;IACrB,SAAS,EAAE,UAAU,CAAC;CACvB"}
+{"version":3,"file":"MenuPopover.types.d.ts","sourceRoot":"","sources":["../../src/MenuPopover/MenuPopover.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAE/E,eAAO,MAAM,eAAe,gBAAgB,CAAC;AAI7C,oBAAY,iBAAiB,GAAG,IAAI,CAAC,cAAc,EAAE,YAAY,GAAG,WAAW,GAAG,kBAAkB,CAAC,CAAC;AAEtG,oBAAY,gBAAgB,GAAG,aAAa,CAAC;AAE7C,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,aAAa,CAAC;IACrB,SAAS,EAAE,UAAU,CAAC;CACvB"}

package/lib-commonjs/MenuPopover/MenuPopoverTokens.d.ts

@@ -0,0 +1,3 @@
+import { MenuPopoverTokens } from './MenuPopover.types';
+export declare const useMenuPopoverTokens: import("@fluentui-react-native/framework").UseTokens<MenuPopoverTokens>;
+//# sourceMappingURL=MenuPopoverTokens.d.ts.map

package/lib-commonjs/MenuPopover/MenuPopoverTokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuPopoverTokens.d.ts","sourceRoot":"","sources":["../../src/MenuPopover/MenuPopoverTokens.ts"],"names":[],"mappings":"AACA,OAAO,EAAmB,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAEzE,eAAO,MAAM,oBAAoB,yEAGhC,CAAC"}

package/lib-commonjs/MenuPopover/MenuPopoverTokens.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMenuPopoverTokens = void 0;
+var framework_1 = require("@fluentui-react-native/framework");
+var MenuPopover_types_1 = require("./MenuPopover.types");
+exports.useMenuPopoverTokens = (0, framework_1.buildUseTokens)(function (t) { return ({ borderWidth: 1, borderColor: t.colors.neutralStrokeAccessible }); }, MenuPopover_types_1.menuPopoverName);
+//# sourceMappingURL=MenuPopoverTokens.js.map

package/lib-commonjs/MenuPopover/MenuPopoverTokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuPopoverTokens.js","sourceRoot":"","sources":["../../src/MenuPopover/MenuPopoverTokens.ts"],"names":[],"mappings":";;;AAAA,8DAAyE;AACzE,yDAAyE;AAE5D,QAAA,oBAAoB,GAAG,IAAA,0BAAc,EAChD,UAAC,CAAQ,IAAK,OAAA,CAAC,EAAE,WAAW,EAAE,CAAC,EAAE,WAAW,EAAE,CAAC,CAAC,MAAM,CAAC,uBAAuB,EAAE,CAAC,EAAnE,CAAmE,EACjF,mCAAe,CAChB,CAAC"}

package/lib-commonjs/MenuTrigger/useMenuTrigger.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMenuTrigger.d.ts","sourceRoot":"","sources":["../../src/MenuTrigger/useMenuTrigger.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAUvD,eAAO,MAAM,cAAc,QAAO,gBAqEjC,CAAC"}
+{"version":3,"file":"useMenuTrigger.d.ts","sourceRoot":"","sources":["../../src/MenuTrigger/useMenuTrigger.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAUvD,eAAO,MAAM,cAAc,QAAO,gBA8EjC,CAAC"}

package/lib-commonjs/MenuTrigger/useMenuTrigger.js

@@ -11,7 +11,7 @@ var expandedState = { expanded: true };
 var collapsedState = { expanded: false };
 var useMenuTrigger = function () {
     var context = (0, menuContext_1.useMenuContext)();
-    var open = context.open, openOnHover = context.openOnHover, popoverHoverOutTimer = context.popoverHoverOutTimer, setOpen = context.setOpen, setTriggerHoverOutTimer = context.setTriggerHoverOutTimer, triggerHoverOutTimer = context.triggerHoverOutTimer, triggerRef = context.triggerRef;
+    var _a = context.hoverDelay, hoverDelay = _a === void 0 ? consts_1.hoverDelayDefault : _a, open = context.open, openOnHover = context.openOnHover, popoverHoverOutTimer = context.popoverHoverOutTimer, setOpen = context.setOpen, setTriggerHoverOutTimer = context.setTriggerHoverOutTimer, triggerHoverOutTimer = context.triggerHoverOutTimer, triggerRef = context.triggerRef;
     var accessibilityState = open ? expandedState : collapsedState;
     var onAccessibilityAction = react_1.default.useCallback(function (e) {
         if (react_native_1.Platform.OS === 'win32') {
@@ -32,18 +32,18 @@ var useMenuTrigger = function () {
             e.persist();
             setTimeout(function () {
                 setOpen(e, true /* isOpen */);
-            }, consts_1.delayHover);
+            }, hoverDelay);
         }
-    }, [openOnHover, setOpen, triggerHoverOutTimer, popoverHoverOutTimer]);
+    }, [hoverDelay, openOnHover, setOpen, triggerHoverOutTimer, popoverHoverOutTimer]);
     var onHoverOut = react_1.default.useCallback(function (e) {
         if (openOnHover) {
             e.persist();
             var timer = setTimeout(function () {
                 setOpen(e, false /* isOpen */);
-            }, consts_1.delayHover);
+            }, hoverDelay);
             setTriggerHoverOutTimer(timer);
         }
-    }, [openOnHover, setOpen, setTriggerHoverOutTimer]);
+    }, [hoverDelay, openOnHover, setOpen, setTriggerHoverOutTimer]);
     var onClick = react_1.default.useCallback(function (e) {
         setOpen(e, !open);
     }, [open, setOpen]);

package/lib-commonjs/MenuTrigger/useMenuTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMenuTrigger.js","sourceRoot":"","sources":["../../src/MenuTrigger/useMenuTrigger.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useMenuTrigger.js","sourceRoot":"","sources":["../../src/MenuTrigger/useMenuTrigger.ts"],"names":[],"mappings":"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"}

package/lib-commonjs/consts.d.ts

@@ -1,3 +1,3 @@
-export declare const delayHover: number;
+export declare const hoverDelayDefault: number;
 export declare const isCloseOnHoverOutEnabled: boolean;
 //# sourceMappingURL=consts.d.ts.map

package/lib-commonjs/consts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"consts.d.ts","sourceRoot":"","sources":["../src/consts.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,QAGrB,CAAC;AAEH,eAAO,MAAM,wBAAwB,SAAmC,CAAC"}
+{"version":3,"file":"consts.d.ts","sourceRoot":"","sources":["../src/consts.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,QAG5B,CAAC;AAEH,eAAO,MAAM,wBAAwB,SAAmC,CAAC"}

package/lib-commonjs/consts.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isCloseOnHoverOutEnabled = exports.delayHover = void 0;
+exports.isCloseOnHoverOutEnabled = exports.hoverDelayDefault = void 0;
 var react_native_1 = require("react-native");
-exports.delayHover = react_native_1.Platform.select({
+exports.hoverDelayDefault = react_native_1.Platform.select({
     macos: 100,
     default: 500, // win32
 });

package/lib-commonjs/consts.js.map

@@ -1 +1 @@
-{"version":3,"file":"consts.js","sourceRoot":"","sources":["../src/consts.ts"],"names":[],"mappings":";;;AAAA,6CAAwC;AAE3B,QAAA,UAAU,GAAG,uBAAQ,CAAC,MAAM,CAAC;IACxC,KAAK,EAAE,GAAG;IACV,OAAO,EAAE,GAAG,EAAE,QAAQ;CACvB,CAAC,CAAC;AAEU,QAAA,wBAAwB,GAAG,uBAAQ,CAAC,EAAE,KAAM,OAAe,CAAC"}
+{"version":3,"file":"consts.js","sourceRoot":"","sources":["../src/consts.ts"],"names":[],"mappings":";;;AAAA,6CAAwC;AAE3B,QAAA,iBAAiB,GAAG,uBAAQ,CAAC,MAAM,CAAC;IAC/C,KAAK,EAAE,GAAG;IACV,OAAO,EAAE,GAAG,EAAE,QAAQ;CACvB,CAAC,CAAC;AAEU,QAAA,wBAAwB,GAAG,uBAAQ,CAAC,EAAE,KAAM,OAAe,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/menu",
-  "version": "0.15.1",
+  "version": "0.15.4",
   "description": "A cross-platform Menu component using the Fluent Design System",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",

package/src/Menu/Menu.types.ts

@@ -10,6 +10,11 @@ export interface MenuProps extends MenuListProps {
    */
   defaultOpen?: boolean;
 
+  /**
+   * How much delay to have between hover in and showing the menu, in ms.
+   */
+  hoverDelay?: number;
+
   /**
    * Whether the popup is open
    */

package/src/MenuItemCheckbox/MenuItemCheckbox.types.ts

@@ -1,14 +1,15 @@
 import * as React from 'react';
-import { ColorValue, ViewProps } from 'react-native';
+import { ColorValue } from 'react-native';
 import { XmlProps } from 'react-native-svg';
 import type { IViewProps } from '@fluentui-react-native/adapters';
 import { TextProps } from '@fluentui-react-native/experimental-text';
-import { IFocusable, IPressableHooks, IWithPressableOptions } from '@fluentui-react-native/interactive-hooks';
-import { FontTokens, IBorderTokens, IColorTokens, LayoutTokens } from '@fluentui-react-native/tokens';
+import { IPressableHooks } from '@fluentui-react-native/interactive-hooks';
+import { MenuItemProps, MenuItemTokens } from '../MenuItem/MenuItem.types';
 
 export const menuItemCheckboxName = 'MenuItemCheckbox';
 
-export interface MenuItemCheckboxTokens extends LayoutTokens, FontTokens, IBorderTokens, IColorTokens {
+export interface MenuItemCheckboxTokens
+  extends Omit<MenuItemTokens, 'submenuIndicatorPadding' | 'submenuIndicatorSize' | 'disabled' | 'focused' | 'hovered' | 'pressed'> {
   /**
    * Color of the checkmark icon
    */
@@ -19,21 +20,11 @@ export interface MenuItemCheckboxTokens extends LayoutTokens, FontTokens, IBorde
    */
   checkmarkPadding?: number;
 
-  /**
-   * Height and width in pixels of the checkmark icon
-   */
-  checkmarkSize?: number;
-
   /**
    * Visibility of the checkmark icon from 0 to 1
    */
   checkmarkVisibility?: number;
 
-  /**
-   * Space between parts of the item control in pixels
-   */
-  gap?: number;
-
   /**
    * States of the item control
    */
@@ -44,12 +35,7 @@ export interface MenuItemCheckboxTokens extends LayoutTokens, FontTokens, IBorde
   pressed?: MenuItemCheckboxTokens;
 }
 
-export interface MenuItemCheckboxProps extends Omit<IWithPressableOptions<ViewProps>, 'onPress'> {
-  /**
-   * A RefObject to access the IButton interface. Use this to access the public methods and properties of the component.
-   */
-  componentRef?: React.RefObject<IFocusable>;
-
+export interface MenuItemCheckboxProps extends MenuItemProps {
   /**
    * Identifier for the control
    */

package/src/MenuPopover/MenuPopover.tsx

@@ -1,24 +1,37 @@
 import React from 'react';
-import { mergeProps, stagedComponent, useFluentTheme } from '@fluentui-react-native/framework';
+import { compressible, mergeProps, patchTokens, useFluentTheme, UseTokens } from '@fluentui-react-native/framework';
 import { Callout } from '@fluentui-react-native/callout';
-import { menuPopoverName, MenuPopoverProps } from './MenuPopover.types';
+import { menuPopoverName, MenuPopoverProps, MenuPopoverTokens } from './MenuPopover.types';
 import { useMenuPopover } from './useMenuPopover';
+import { useMenuPopoverTokens } from './MenuPopoverTokens';
 import { View } from 'react-native';
 
-export const MenuPopover = stagedComponent((props: MenuPopoverProps) => {
-  const state = useMenuPopover(props);
-  const theme = useFluentTheme();
+export const MenuPopover = compressible<MenuPopoverProps, MenuPopoverTokens>(
+  (props: MenuPopoverProps, useTokens: UseTokens<MenuPopoverTokens>) => {
+    const { directionalHint, gapSpace, maxHeight, maxWidth, minPadding, borderWidth, borderColor, backgroundColor } = props;
+    const state = useMenuPopover(props);
+    const theme = useFluentTheme();
+    let [tokens, cache] = useTokens(theme);
 
-  return (final: MenuPopoverProps, children: React.ReactNode) => {
-    const mergedProps = mergeProps(state.props, final);
-    const content = React.createElement(View, state.innerView, children);
-    return (
-      <Callout borderWidth={1} borderColor={theme.colors.neutralStrokeAccessible} {...mergedProps}>
-        {content}
-      </Callout>
-    );
-  };
-});
+    [tokens, cache] = patchTokens(tokens, cache, {
+      directionalHint,
+      gapSpace,
+      maxHeight,
+      maxWidth,
+      minPadding,
+      borderWidth,
+      borderColor,
+      backgroundColor,
+    });
+
+    return (final: MenuPopoverProps, children: React.ReactNode) => {
+      const mergedProps = mergeProps(tokens, state.props, final);
+      const content = React.createElement(View, state.innerView, children);
+      return <Callout {...mergedProps}>{content}</Callout>;
+    };
+  },
+  useMenuPopoverTokens,
+);
 MenuPopover.displayName = menuPopoverName;
 
 export default MenuPopover;

package/src/MenuPopover/MenuPopover.types.ts

@@ -1,8 +1,12 @@
 import { IViewProps } from '@fluentui-react-native/adapters';
-import { ICalloutProps } from '@fluentui-react-native/callout';
+import { ICalloutProps, ICalloutTokens } from '@fluentui-react-native/callout';
 
 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 MenuPopoverProps = ICalloutProps;
 
 export interface MenuPopoverState {

package/src/MenuPopover/MenuPopoverTokens.ts

@@ -0,0 +1,7 @@
+import { buildUseTokens, Theme } from '@fluentui-react-native/framework';
+import { menuPopoverName, MenuPopoverTokens } from './MenuPopover.types';
+
+export const useMenuPopoverTokens = buildUseTokens<MenuPopoverTokens>(
+  (t: Theme) => ({ borderWidth: 1, borderColor: t.colors.neutralStrokeAccessible }),
+  menuPopoverName,
+);

package/src/MenuTrigger/useMenuTrigger.ts

@@ -3,7 +3,7 @@ import { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
 import { MenuTriggerState } from './MenuTrigger.types';
 import { AccessibilityActionEvent, AccessibilityActionName, Platform } from 'react-native';
 import React from 'react';
-import { delayHover, isCloseOnHoverOutEnabled } from '../consts';
+import { hoverDelayDefault, isCloseOnHoverOutEnabled } from '../consts';
 
 const accessibilityActions =
   Platform.OS === ('win32' as any) ? [{ name: 'Expand' as AccessibilityActionName }, { name: 'Collapse' as AccessibilityActionName }] : [];
@@ -12,7 +12,16 @@ const collapsedState = { expanded: false };
 
 export const useMenuTrigger = (): MenuTriggerState => {
   const context = useMenuContext();
-  const { open, openOnHover, popoverHoverOutTimer, setOpen, setTriggerHoverOutTimer, triggerHoverOutTimer, triggerRef } = context;
+  const {
+    hoverDelay = hoverDelayDefault,
+    open,
+    openOnHover,
+    popoverHoverOutTimer,
+    setOpen,
+    setTriggerHoverOutTimer,
+    triggerHoverOutTimer,
+    triggerRef,
+  } = context;
 
   const accessibilityState = open ? expandedState : collapsedState;
 
@@ -41,10 +50,10 @@ export const useMenuTrigger = (): MenuTriggerState => {
         e.persist();
         setTimeout(() => {
           setOpen(e, true /* isOpen */);
-        }, delayHover);
+        }, hoverDelay);
       }
     },
-    [openOnHover, setOpen, triggerHoverOutTimer, popoverHoverOutTimer],
+    [hoverDelay, openOnHover, setOpen, triggerHoverOutTimer, popoverHoverOutTimer],
   );
 
   const onHoverOut = React.useCallback(
@@ -53,11 +62,11 @@ export const useMenuTrigger = (): MenuTriggerState => {
         e.persist();
         const timer = setTimeout(() => {
           setOpen(e, false /* isOpen */);
-        }, delayHover);
+        }, hoverDelay);
         setTriggerHoverOutTimer(timer);
       }
     },
-    [openOnHover, setOpen, setTriggerHoverOutTimer],
+    [hoverDelay, openOnHover, setOpen, setTriggerHoverOutTimer],
   );
 
   const onClick = React.useCallback(

package/src/consts.ts

@@ -1,6 +1,6 @@
 import { Platform } from 'react-native';
 
-export const delayHover = Platform.select({
+export const hoverDelayDefault = Platform.select({
   macos: 100,
   default: 500, // win32
 });