@fluentui-react-native/menu 1.4.34 → 1.6.0

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

@@ -1 +1 @@
-{"version":3,"file":"MenuPopover.js","sourceRoot":"","sources":["../../src/MenuPopover/MenuPopover.tsx"],"names":[],"mappings":";;;;AAAA,wDAA0B;AAC1B,6CAA8C;AAE9C,0DAAyD;AAEzD,8DAAyG;AAGzG,yDAAsD;AACtD,yDAA2D;AAC3D,mDAAkD;AAClD,sCAA4C;AAE/B,QAAA,WAAW,GAAG,IAAA,wBAAY,EACrC,UAAC,KAAuB,EAAE,SAAuC;;IACvD,IAAA,eAAe,GAAqG,KAAK,gBAA1G,EAAE,QAAQ,GAA2F,KAAK,SAAhG,EAAE,SAAS,GAAgF,KAAK,UAArF,EAAE,QAAQ,GAAsE,KAAK,SAA3E,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;IAClI,IAAM,KAAK,GAAG,IAAA,+BAAc,EAAC,KAAK,CAAC,CAAC;IACpC,IAAM,KAAK,GAAG,IAAA,0BAAc,GAAE,CAAC;IAC/B,IAAM,OAAO,GAAG,IAAA,wBAAc,GAAE,CAAC;IAC7B,IAAA,KAAkB,SAAS,CAAC,KAAK,CAAC,EAAjC,MAAM,QAAA,EAAE,KAAK,QAAoB,CAAC;IAEvC,OAAO,CAAC,YAAY,GAAG,SAAS,IAAI,SAAS,CAAC;IAC9C,OAAO,CAAC,QAAQ,GAAG,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,OAAO,CAAC,QAAQ,CAAC;IAEhD,KAAkB,IAAA,uBAAW,EAAC,MAAM,EAAE,KAAK,EAAE;QAC3C,eAAe,iBAAA;QACf,QAAQ,UAAA;QACR,SAAS,WAAA;QACT,QAAQ,UAAA;QACR,QAAQ,UAAA;QACR,UAAU,YAAA;QACV,WAAW,aAAA;QACX,WAAW,aAAA;QACX,eAAe,iBAAA;KAChB,CAAC,EAVD,MAAM,QAAA,EAAE,KAAK,QAAA,CAUX;IAEH,OAAO,UAAC,KAAuB,EAAE,QAAyB;QACxD,IAAM,WAAW,GAAG,IAAA,sBAAU,EAAC,MAAM,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QAC3D,IAAM,cAAc;QAClB,uJAAuJ;QACvJ,uBAAQ,CAAC,EAAE,KAAK,SAAS,IAAI,uBAAQ,CAAC,EAAE,KAAM,OAAe;YAC3D,CAAC,uCACM,KAAK,CAAC,SAAS,KAClB,KAAK,EAAE;oBACL,SAAS,EAAE,WAAW,CAAC,SAAS;iBACjC,IAEL,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC;QACtB,IAAM,OAAO,GAAG,eAAK,CAAC,aAAa,CAAC,mBAAI,EAAE,cAAc,EAAE,QAAQ,CAAC,CAAC;QACpE,OAAO,8BAAC,iBAAO,uBAAK,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"}
+{"version":3,"file":"MenuPopover.js","sourceRoot":"","sources":["../../src/MenuPopover/MenuPopover.tsx"],"names":[],"mappings":";;;;AAAA,wDAA0B;AAC1B,6CAA8C;AAG9C,8DAAyG;AAGzG,yDAAsD;AACtD,yDAA2D;AAC3D,mDAAkD;AAClD,sCAA4C;AAC5C,8CAA6C;AAEhC,QAAA,WAAW,GAAG,IAAA,wBAAY,EACrC,UAAC,KAAuB,EAAE,SAAuC;;IACvD,IAAA,eAAe,GAAqG,KAAK,gBAA1G,EAAE,QAAQ,GAA2F,KAAK,SAAhG,EAAE,SAAS,GAAgF,KAAK,UAArF,EAAE,QAAQ,GAAsE,KAAK,SAA3E,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;IAClI,IAAM,KAAK,GAAG,IAAA,+BAAc,EAAC,KAAK,CAAC,CAAC;IACpC,IAAM,KAAK,GAAG,IAAA,0BAAc,GAAE,CAAC;IAC/B,IAAM,OAAO,GAAG,IAAA,wBAAc,GAAE,CAAC;IAC7B,IAAA,KAAkB,SAAS,CAAC,KAAK,CAAC,EAAjC,MAAM,QAAA,EAAE,KAAK,QAAoB,CAAC;IAEvC,OAAO,CAAC,YAAY,GAAG,SAAS,IAAI,SAAS,CAAC;IAC9C,OAAO,CAAC,QAAQ,GAAG,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,OAAO,CAAC,QAAQ,CAAC;IAEhD,KAAkB,IAAA,uBAAW,EAAC,MAAM,EAAE,KAAK,EAAE;QAC3C,eAAe,iBAAA;QACf,QAAQ,UAAA;QACR,SAAS,WAAA;QACT,QAAQ,UAAA;QACR,QAAQ,UAAA;QACR,UAAU,YAAA;QACV,WAAW,aAAA;QACX,WAAW,aAAA;QACX,eAAe,iBAAA;KAChB,CAAC,EAVD,MAAM,QAAA,EAAE,KAAK,QAAA,CAUX;IAEH,OAAO,UAAC,KAAuB,EAAE,QAAyB;QACxD,IAAM,WAAW,GAAG,IAAA,sBAAU,EAAC,MAAM,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QAC3D,IAAM,cAAc;QAClB,uJAAuJ;QACvJ,uBAAQ,CAAC,EAAE,KAAK,SAAS,IAAI,uBAAQ,CAAC,EAAE,KAAM,OAAe;YAC3D,CAAC,uCACM,KAAK,CAAC,SAAS,KAClB,KAAK,EAAE;oBACL,SAAS,EAAE,WAAW,CAAC,SAAS;iBACjC,IAEL,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC;QACtB,IAAM,OAAO,GAAG,eAAK,CAAC,aAAa,CAAC,mBAAI,EAAE,cAAc,EAAE,QAAQ,CAAC,CAAC;QACpE,OAAO,CACL,8BAAC,yBAAW,qBAAC,MAAM,EAAE,MAAM,IAAM,WAAW,GACzC,OAAO,CACI,CACf,CAAC;IACJ,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,7 +1,18 @@
 import type { IViewProps } from '@fluentui-react-native/adapters';
 import type { ICalloutProps, ICalloutTokens } from '@fluentui-react-native/callout';
 export declare const menuPopoverName = "MenuPopover";
-export type MenuPopoverTokens = Omit<ICalloutTokens, 'anchorRect' | 'beakWidth' | 'dismissBehaviors'>;
+export type MenuPopoverTokens = Omit<ICalloutTokens, 'anchorRect' | 'beakWidth' | 'dismissBehaviors'> & {
+    /**
+     * The props for the corner radius for the Modal MenuPopover
+     * @platform android
+     */
+    cornerRadius?: number;
+    /**
+     * Shadown elevation for the Modal MenuPopover
+     * @platform android
+     */
+    elevation?: number;
+};
 export type MenuPopoverProps = ICalloutProps;
 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,KAAK,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEpF,eAAO,MAAM,eAAe,gBAAgB,CAAC;AAI7C,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,cAAc,EAAE,YAAY,GAAG,WAAW,GAAG,kBAAkB,CAAC,CAAC;AAEtG,MAAM,MAAM,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,KAAK,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEpF,eAAO,MAAM,eAAe,gBAAgB,CAAC;AAI7C,MAAM,MAAM,iBAAiB,GACzB,IAAI,CAAC,cAAc,EAAE,YAAY,GAAG,WAAW,GAAG,kBAAkB,CAAC,GAAG;IACtE;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEN,MAAM,MAAM,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.android.d.ts

@@ -0,0 +1,5 @@
+export declare const useMenuPopoverTokens: import("@fluentui-react-native/framework").UseTokens<Omit<import("@fluentui-react-native/callout").ICalloutTokens, "anchorRect" | "beakWidth" | "dismissBehaviors"> & {
+    cornerRadius?: number;
+    elevation?: number;
+}>;
+//# sourceMappingURL=MenuPopoverTokens.android.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuPopoverTokens.android.d.ts","sourceRoot":"","sources":["../../src/MenuPopover/MenuPopoverTokens.android.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,oBAAoB;;;EAWhC,CAAC"}

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMenuPopoverTokens = void 0;
+var react_native_1 = require("react-native");
+var framework_1 = require("@fluentui-react-native/framework");
+var theme_tokens_1 = require("@fluentui-react-native/theme-tokens");
+var MenuPopover_types_1 = require("./MenuPopover.types");
+exports.useMenuPopoverTokens = (0, framework_1.buildUseTokens)(function (t) { return ({
+    borderWidth: 1,
+    borderColor: t.colors.neutralStrokeAccessible,
+    maxHeight: react_native_1.Dimensions.get('window').height / 2 - theme_tokens_1.globalTokens.size320,
+    maxWidth: react_native_1.Dimensions.get('window').width - theme_tokens_1.globalTokens.size160,
+    cornerRadius: theme_tokens_1.globalTokens.corner.radius80,
+    elevation: theme_tokens_1.globalTokens.size160,
+    minPadding: theme_tokens_1.globalTokens.size160,
+}); }, MenuPopover_types_1.menuPopoverName);
+//# sourceMappingURL=MenuPopoverTokens.android.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuPopoverTokens.android.js","sourceRoot":"","sources":["../../src/MenuPopover/MenuPopoverTokens.android.ts"],"names":[],"mappings":";;;AAAA,6CAA0C;AAG1C,8DAAkE;AAClE,oEAAmE;AAGnE,yDAAsD;AAEzC,QAAA,oBAAoB,GAAG,IAAA,0BAAc,EAChD,UAAC,CAAQ,IAAK,OAAA,CAAC;IACb,WAAW,EAAE,CAAC;IACd,WAAW,EAAE,CAAC,CAAC,MAAM,CAAC,uBAAuB;IAC7C,SAAS,EAAE,yBAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,MAAM,GAAG,CAAC,GAAG,2BAAY,CAAC,OAAO;IACrE,QAAQ,EAAE,yBAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,KAAK,GAAG,2BAAY,CAAC,OAAO;IAC/D,YAAY,EAAE,2BAAY,CAAC,MAAM,CAAC,QAAQ;IAC1C,SAAS,EAAE,2BAAY,CAAC,OAAO;IAC/B,UAAU,EAAE,2BAAY,CAAC,OAAO;CACjC,CAAC,EARY,CAQZ,EACF,mCAAe,CAChB,CAAC"}

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

@@ -1,3 +1,5 @@
-import type { MenuPopoverTokens } from './MenuPopover.types';
-export declare const useMenuPopoverTokens: import("@fluentui-react-native/framework").UseTokens<MenuPopoverTokens>;
+export declare const useMenuPopoverTokens: import("@fluentui-react-native/framework").UseTokens<Omit<import("@fluentui-react-native/callout").ICalloutTokens, "anchorRect" | "beakWidth" | "dismissBehaviors"> & {
+    cornerRadius?: number;
+    elevation?: number;
+}>;
 //# sourceMappingURL=MenuPopoverTokens.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"MenuPopoverTokens.d.ts","sourceRoot":"","sources":["../../src/MenuPopover/MenuPopoverTokens.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAG7D,eAAO,MAAM,oBAAoB,yEAGhC,CAAC"}
+{"version":3,"file":"MenuPopoverTokens.d.ts","sourceRoot":"","sources":["../../src/MenuPopover/MenuPopoverTokens.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,oBAAoB;;;EAGhC,CAAC"}

package/lib-commonjs/index.d.ts

@@ -4,7 +4,7 @@ export { MenuTrigger, menuTriggerName, MenuTriggerChildProps, MenuTriggerState,
 export { MenuPopover, menuPopoverName, MenuPopoverProps, MenuPopoverState, MenuPopoverTokens, useMenuPopover } from './MenuPopover';
 export { MenuItem, menuItemName, MenuItemProps, MenuItemState, MenuItemInfo, MenuItemSlotProps, MenuItemTokens, MenuItemType, useMenuItem, } from './MenuItem';
 export { MenuItemCheckbox, menuItemCheckboxName, MenuItemCheckboxProps, MenuItemCheckboxInfo, MenuItemCheckboxSlotProps, MenuItemCheckboxTokens, MenuItemCheckboxType, useMenuCheckboxInteraction, useMenuItemCheckbox, } from './MenuItemCheckbox';
-export { MenuItemRadio, menuItemRadioName, useMenuItemRadio } from './MenuItemRadio';
+export { MenuItemRadio, menuItemRadioName, useMenuItemRadio, MenuItemRadioInfo, MenuItemRadioProps, MenuItemRadioSlotProps, MenuItemRadioTokens, MenuItemRadioType, } from './MenuItemRadio';
 export { MenuList, menuListName, MenuListProps, MenuListSlotProps, MenuListState, MenuListTokens, MenuListType, useMenuList, useMenuListContextValue, } from './MenuList';
 export { MenuDivider, menuDividerName, MenuDividerProps, MenuDividerSlotProps, MenuDividerTokens, MenuDividerType } from './MenuDivider';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,WAAW,EACX,gBAAgB,EAChB,YAAY,EACZ,kBAAkB,EAClB,eAAe,EACf,oBAAoB,EACpB,gBAAgB,EAChB,qBAAqB,EACrB,kBAAkB,EAClB,mBAAmB,GACpB,MAAM,WAAW,CAAC;AACnB,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAC5F,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AACtH,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AACpI,OAAO,EACL,QAAQ,EACR,YAAY,EACZ,aAAa,EACb,aAAa,EACb,YAAY,EACZ,iBAAiB,EACjB,cAAc,EACd,YAAY,EACZ,WAAW,GACZ,MAAM,YAAY,CAAC;AACpB,OAAO,EACL,gBAAgB,EAChB,oBAAoB,EACpB,qBAAqB,EACrB,oBAAoB,EACpB,yBAAyB,EACzB,sBAAsB,EACtB,oBAAoB,EACpB,0BAA0B,EAC1B,mBAAmB,GACpB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACrF,OAAO,EACL,QAAQ,EACR,YAAY,EACZ,aAAa,EACb,iBAAiB,EACjB,aAAa,EACb,cAAc,EACd,YAAY,EACZ,WAAW,EACX,uBAAuB,GACxB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,WAAW,EACX,gBAAgB,EAChB,YAAY,EACZ,kBAAkB,EAClB,eAAe,EACf,oBAAoB,EACpB,gBAAgB,EAChB,qBAAqB,EACrB,kBAAkB,EAClB,mBAAmB,GACpB,MAAM,WAAW,CAAC;AACnB,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAC5F,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AACtH,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AACpI,OAAO,EACL,QAAQ,EACR,YAAY,EACZ,aAAa,EACb,aAAa,EACb,YAAY,EACZ,iBAAiB,EACjB,cAAc,EACd,YAAY,EACZ,WAAW,GACZ,MAAM,YAAY,CAAC;AACpB,OAAO,EACL,gBAAgB,EAChB,oBAAoB,EACpB,qBAAqB,EACrB,oBAAoB,EACpB,yBAAyB,EACzB,sBAAsB,EACtB,oBAAoB,EACpB,0BAA0B,EAC1B,mBAAmB,GACpB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EACL,aAAa,EACb,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,EAClB,sBAAsB,EACtB,mBAAmB,EACnB,iBAAiB,GAClB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACL,QAAQ,EACR,YAAY,EACZ,aAAa,EACb,iBAAiB,EACjB,aAAa,EACb,cAAc,EACd,YAAY,EACZ,WAAW,EACX,uBAAuB,GACxB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC"}

package/lib-commonjs/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.menuDividerName = exports.MenuDivider = exports.useMenuListContextValue = exports.useMenuList = exports.menuListName = exports.MenuList = exports.useMenuItemRadio = exports.menuItemRadioName = exports.MenuItemRadio = exports.useMenuItemCheckbox = exports.useMenuCheckboxInteraction = exports.menuItemCheckboxName = exports.MenuItemCheckbox = exports.useMenuItem = exports.menuItemName = exports.MenuItem = exports.useMenuPopover = exports.menuPopoverName = exports.MenuPopover = exports.useMenuTrigger = exports.menuTriggerName = exports.MenuTrigger = exports.useMenuContextValue = exports.useMenu = exports.menuName = exports.Menu = exports.MenuTriggerProvider = exports.MenuTriggerContext = exports.useMenuTriggerContext = exports.MenuListProvider = exports.MenuListContext = exports.useMenuListContext = exports.MenuProvider = exports.MenuContext = exports.useMenuContext = void 0;
+exports.menuDividerName = exports.MenuDivider = exports.useMenuListContextValue = exports.useMenuList = exports.menuListName = exports.MenuList = exports.useMenuItemRadio = exports.MenuItemRadio = exports.useMenuItemCheckbox = exports.useMenuCheckboxInteraction = exports.menuItemCheckboxName = exports.MenuItemCheckbox = exports.useMenuItem = exports.menuItemName = exports.MenuItem = exports.useMenuPopover = exports.menuPopoverName = exports.MenuPopover = exports.useMenuTrigger = exports.menuTriggerName = exports.MenuTrigger = exports.useMenuContextValue = exports.useMenu = exports.menuName = exports.Menu = exports.MenuTriggerProvider = exports.MenuTriggerContext = exports.useMenuTriggerContext = exports.MenuListProvider = exports.MenuListContext = exports.useMenuListContext = exports.MenuProvider = exports.MenuContext = exports.useMenuContext = void 0;
 var context_1 = require("./context");
 Object.defineProperty(exports, "useMenuContext", { enumerable: true, get: function () { return context_1.useMenuContext; } });
 Object.defineProperty(exports, "MenuContext", { enumerable: true, get: function () { return context_1.MenuContext; } });
@@ -35,7 +35,6 @@ Object.defineProperty(exports, "useMenuCheckboxInteraction", { enumerable: true,
 Object.defineProperty(exports, "useMenuItemCheckbox", { enumerable: true, get: function () { return MenuItemCheckbox_1.useMenuItemCheckbox; } });
 var MenuItemRadio_1 = require("./MenuItemRadio");
 Object.defineProperty(exports, "MenuItemRadio", { enumerable: true, get: function () { return MenuItemRadio_1.MenuItemRadio; } });
-Object.defineProperty(exports, "menuItemRadioName", { enumerable: true, get: function () { return MenuItemRadio_1.menuItemRadioName; } });
 Object.defineProperty(exports, "useMenuItemRadio", { enumerable: true, get: function () { return MenuItemRadio_1.useMenuItemRadio; } });
 var MenuList_1 = require("./MenuList");
 Object.defineProperty(exports, "MenuList", { enumerable: true, get: function () { return MenuList_1.MenuList; } });

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,qCAYmB;AAXjB,yGAAA,cAAc,OAAA;AACd,sGAAA,WAAW,OAAA;AAEX,uGAAA,YAAY,OAAA;AACZ,6GAAA,kBAAkB,OAAA;AAClB,0GAAA,eAAe,OAAA;AAEf,2GAAA,gBAAgB,OAAA;AAChB,gHAAA,qBAAqB,OAAA;AACrB,6GAAA,kBAAkB,OAAA;AAClB,8GAAA,mBAAmB,OAAA;AAErB,+BAA4F;AAAnF,4FAAA,IAAI,OAAA;AAAE,gGAAA,QAAQ,OAAA;AAAwB,+FAAA,OAAO,OAAA;AAAE,2GAAA,mBAAmB,OAAA;AAC3E,6CAAsH;AAA7G,0GAAA,WAAW,OAAA;AAAE,8GAAA,eAAe,OAAA;AAA2C,6GAAA,cAAc,OAAA;AAC9F,6CAAoI;AAA3H,0GAAA,WAAW,OAAA;AAAE,8GAAA,eAAe,OAAA;AAAyD,6GAAA,cAAc,OAAA;AAC5G,uCAUoB;AATlB,oGAAA,QAAQ,OAAA;AACR,wGAAA,YAAY,OAAA;AAOZ,uGAAA,WAAW,OAAA;AAEb,uDAU4B;AAT1B,oHAAA,gBAAgB,OAAA;AAChB,wHAAA,oBAAoB,OAAA;AAMpB,8HAAA,0BAA0B,OAAA;AAC1B,uHAAA,mBAAmB,OAAA;AAErB,iDAAqF;AAA5E,8GAAA,aAAa,OAAA;AAAE,kHAAA,iBAAiB,OAAA;AAAE,iHAAA,gBAAgB,OAAA;AAC3D,uCAUoB;AATlB,oGAAA,QAAQ,OAAA;AACR,wGAAA,YAAY,OAAA;AAMZ,uGAAA,WAAW,OAAA;AACX,mHAAA,uBAAuB,OAAA;AAEzB,6CAAyI;AAAhI,0GAAA,WAAW,OAAA;AAAE,8GAAA,eAAe,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,qCAYmB;AAXjB,yGAAA,cAAc,OAAA;AACd,sGAAA,WAAW,OAAA;AAEX,uGAAA,YAAY,OAAA;AACZ,6GAAA,kBAAkB,OAAA;AAClB,0GAAA,eAAe,OAAA;AAEf,2GAAA,gBAAgB,OAAA;AAChB,gHAAA,qBAAqB,OAAA;AACrB,6GAAA,kBAAkB,OAAA;AAClB,8GAAA,mBAAmB,OAAA;AAErB,+BAA4F;AAAnF,4FAAA,IAAI,OAAA;AAAE,gGAAA,QAAQ,OAAA;AAAwB,+FAAA,OAAO,OAAA;AAAE,2GAAA,mBAAmB,OAAA;AAC3E,6CAAsH;AAA7G,0GAAA,WAAW,OAAA;AAAE,8GAAA,eAAe,OAAA;AAA2C,6GAAA,cAAc,OAAA;AAC9F,6CAAoI;AAA3H,0GAAA,WAAW,OAAA;AAAE,8GAAA,eAAe,OAAA;AAAyD,6GAAA,cAAc,OAAA;AAC5G,uCAUoB;AATlB,oGAAA,QAAQ,OAAA;AACR,wGAAA,YAAY,OAAA;AAOZ,uGAAA,WAAW,OAAA;AAEb,uDAU4B;AAT1B,oHAAA,gBAAgB,OAAA;AAChB,wHAAA,oBAAoB,OAAA;AAMpB,8HAAA,0BAA0B,OAAA;AAC1B,uHAAA,mBAAmB,OAAA;AAErB,iDASyB;AARvB,8GAAA,aAAa,OAAA;AAEb,iHAAA,gBAAgB,OAAA;AAOlB,uCAUoB;AATlB,oGAAA,QAAQ,OAAA;AACR,wGAAA,YAAY,OAAA;AAMZ,uGAAA,WAAW,OAAA;AACX,mHAAA,uBAAuB,OAAA;AAEzB,6CAAyI;AAAhI,0GAAA,WAAW,OAAA;AAAE,8GAAA,eAAe,OAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/menu",
-  "version": "1.4.34",
+  "version": "1.6.0",
   "description": "A cross-platform Menu component using the Fluent Design System",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -35,7 +35,7 @@
     "tslib": "^2.3.1"
   },
   "devDependencies": {
-    "@fluentui-react-native/button": ">=0.32.49 <1.0.0",
+    "@fluentui-react-native/button": ">=0.32.50 <1.0.0",
     "@fluentui-react-native/eslint-config-rules": "^0.1.1",
     "@fluentui-react-native/scripts": "^0.1.1",
     "@fluentui-react-native/test-tools": ">=0.1.1 <1.0.0",

package/src/Menu/Menu.tsx

@@ -4,9 +4,9 @@ import { stagedComponent } from '@fluentui-react-native/framework';
 
 import type { MenuProps } from './Menu.types';
 import { menuName } from './Menu.types';
+import { renderFinalMenu } from './renderMenu';
 import { useMenu } from './useMenu';
 import { useMenuContextValue } from './useMenuContextValue';
-import { MenuProvider } from '../context/menuContext';
 
 export const Menu = stagedComponent((props: MenuProps) => {
   const state = useMenu(props);
@@ -21,20 +21,10 @@ export const Menu = stagedComponent((props: MenuProps) => {
         console.warn('Menu must contain two children');
       }
     }
-
-    const menuTrigger = childrenArray[0];
-    const menuPopover = childrenArray[1];
-
-    return (
-      <MenuProvider value={contextValue}>
-        {menuTrigger}
-        {/* GH#2661: Make sure that shouldFocusOnContainer is defined before initializing
-            the popover so that focus is put in the correct place */}
-        {state.open && state.shouldFocusOnContainer !== undefined && menuPopover}
-      </MenuProvider>
-    );
+    return renderFinalMenu(childrenArray, contextValue, state);
   };
 });
+
 Menu.displayName = menuName;
 
 export default Menu;

package/src/Menu/Menu.types.ts

@@ -1,5 +1,5 @@
 import type React from 'react';
-import type { View } from 'react-native';
+import type { Animated, LayoutChangeEvent, View } from 'react-native';
 
 import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
 
@@ -15,6 +15,7 @@ export interface MenuProps extends MenuListProps {
 
   /**
    * How much delay to have between hover in and showing the menu, in ms.
+   * @platform win32, macOS
    */
   hoverDelay?: number;
 
@@ -30,6 +31,7 @@ export interface MenuProps extends MenuListProps {
 
   /*
    * Opens the menu on hovering over the trigger
+   * @platform win32, macOS
    */
   openOnHover?: boolean;
 
@@ -39,6 +41,11 @@ export interface MenuProps extends MenuListProps {
   persistOnItemClick?: boolean;
 }
 
+export type MenuSizeType = {
+  width: Animated.Value;
+  height: Animated.Value;
+};
+
 export interface MenuState extends MenuProps {
   isControlled: boolean;
   isSubmenu: boolean;
@@ -48,4 +55,20 @@ export interface MenuState extends MenuProps {
   triggerRef: React.RefObject<View>;
   hasMaxHeight?: boolean;
   hasMaxWidth?: boolean;
+  setAnchorWidth?: (value: null | number | ((prevState: null | number) => null | number)) => void;
+  shadowMenuContainerStyle?: object;
+  _container?: React.MutableRefObject<View>;
+  onRequestClose?: (e: InteractionEvent) => void;
+  onMenuLayout?: (e: LayoutChangeEvent) => void;
+  menuHeight?: number;
+  maxMenuHeight?: number;
+  animationStarted?: boolean;
+  menuSize?: MenuSizeType;
+  testID?: string;
+}
+
+export enum AndroidMenuStates {
+  Hidden,
+  Animating,
+  Shown,
 }

package/src/Menu/renderMenu.android.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import type { MenuState } from './Menu.types';
+import type { MenuContextValue } from '../context';
+import { MenuProvider } from '../context';
+
+export const renderFinalMenu = (childrenArray: React.ReactElement[], contextValue: MenuContextValue, state: MenuState) => {
+  const menuTrigger = childrenArray[0];
+  const menuPopover = childrenArray[1];
+  return (
+    <MenuProvider value={contextValue}>
+      <View
+        onLayout={(event) => {
+          const { width } = event.nativeEvent.layout;
+          state.setAnchorWidth(width);
+        }}
+      >
+        {menuTrigger}
+      </View>
+      <View ref={state._container} collapsable={false} testID={state.testID}>
+        {state.open && menuPopover}
+      </View>
+    </MenuProvider>
+  );
+};

package/src/Menu/renderMenu.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import type { MenuState } from './Menu.types';
+import type { MenuContextValue } from '../context';
+import { MenuProvider } from '../context';
+
+export const renderFinalMenu = (childrenArray: React.ReactElement[], contextValue: MenuContextValue, state: MenuState) => {
+  const menuTrigger = childrenArray[0];
+  const menuPopover = childrenArray[1];
+  return (
+    <MenuProvider value={contextValue}>
+      {menuTrigger}
+      {/* GH#2661: Make sure that shouldFocusOnContainer is defined before initializing
+            the popover so that focus is put in the correct place */}
+      {state.open && state.shouldFocusOnContainer !== undefined && menuPopover}
+    </MenuProvider>
+  );
+};

package/src/Menu/useMenu.android.ts

@@ -0,0 +1,325 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import type { LayoutChangeEvent, View } from 'react-native';
+import { Animated, Dimensions, Easing, I18nManager, StatusBar } from 'react-native';
+
+import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
+
+import type { MenuProps, MenuState } from './Menu.types';
+import { AndroidMenuStates } from './Menu.types';
+import { useMenuContext } from '../context/menuContext';
+
+// Due to how events get fired we get double notifications
+// for the same event causing us to immediately reopen
+// a menu when we close it. Adding in a delay to prevent
+// this behavior.
+// This are use when show() function is called to show the Menu
+const delayOpen = 150;
+let lastCloseTimestamp = -1;
+
+/**
+ * Values related to Screen Width and Animation Easing
+ */
+
+//  Animated easing value for Menu transitions(close and open)
+const EASING = Easing.bezier(0.4, 0, 0.2, 1);
+
+// Screen indent is the fixed value according to Android guidelines which depicts the minimum distance from screen edge Menu should have
+const SCREEN_INDENT = 16;
+
+export const useMenu = (props: MenuProps): MenuState => {
+  /**
+   * State , Ref and Context Values for Menu Container and Anchor
+   */
+
+  const triggerRef = React.useRef();
+  const context = useMenuContext();
+  const isSubmenu = context.triggerRef !== null;
+  const isOpenControlled = typeof props.open !== 'undefined';
+  const _container = useRef<View>(null);
+  const [menuState, setMenuState] = React.useState<AndroidMenuStates>(AndroidMenuStates.Hidden);
+
+  /**
+   * Call for useMenuCheckedState for identifying if any MenuItemCheckbox is checked or not
+   */
+  const [checked, onCheckedChange] = useMenuCheckedState(props);
+
+  /**
+   *  State Variables related to Height,Width and Position of the Menu Popover
+   */
+  const [maxMenuHeight] = useState(250);
+  const [anchorWidth, setAnchorWidth] = React.useState<number>(0);
+  const [left, setLeft] = React.useState<number>(0);
+  const [menuHeight, setMenuHeight] = React.useState<number>(0);
+  const [menuWidth, setMenuWidth] = React.useState<number>(0);
+  const [top, setTop] = React.useState<number>(0);
+
+  /**
+   *  Animation value for the Menu popover show,hide and opacity values
+   */
+  const [menuSizeAnimation, setMenuSizeAnimation] = React.useState<Animated.ValueXY>(new Animated.ValueXY({ x: 0, y: 0 }));
+  const [opacityAnimation, setOpacityAnimation] = React.useState<Animated.Value>(new Animated.Value(0));
+
+  /**
+   * RTL for the MenuItem needs to taken care as well.
+   */
+  const { isRTL } = I18nManager;
+
+  /**
+   * Calcualations related to Menu Popver position and dimensions
+   */
+  const dimensions = Dimensions.get('screen');
+  const { width: windowWidth } = dimensions;
+  const windowHeight = dimensions.height - (StatusBar.currentHeight || 0);
+  const menuSize = {
+    width: menuSizeAnimation.x,
+    height: menuSizeAnimation.y,
+  };
+
+  /**
+   * show function handles the opening of the Menu , it calcuates the position of the Anchor in the screen.
+   * It also sets the Anchor width and change the state of the Popover
+   */ /**
+   * show function handles the opening of the Menu , it calcuates the position of the Anchor in the screen.
+   * It also sets the Anchor width and change the state of the Popover
+   */
+
+  const show = React.useCallback(() => {
+    _container.current?.measureInWindow((left, top, buttonWidth, buttonHeight) => {
+      setAnchorWidth(buttonWidth);
+      setLeft(left);
+      setMenuState(AndroidMenuStates.Shown);
+      setTop(top + buttonHeight);
+    });
+  }, []);
+
+  /**
+   * hide function handles the hiding of the Menu when user clicks on the scrim outside Menu or MenuItems such as (MenuItemRadio, MenuItem)
+   */
+  const hide = React.useCallback(() => {
+    Animated.timing(opacityAnimation, {
+      toValue: 0,
+      duration: 250,
+      easing: EASING,
+      useNativeDriver: false,
+    }).start(() => {
+      // Reset state
+      setMenuState(AndroidMenuStates.Hidden);
+      setMenuSizeAnimation(new Animated.ValueXY({ x: 0, y: 0 }));
+      setOpacityAnimation(new Animated.Value(0));
+    });
+  }, [opacityAnimation]);
+
+  // Hook to maintain the state of the Menu for non controlled and controlled components.
+  const [open, shouldFocusOnContainer, setOpen] = useMenuOpenState(isOpenControlled, props, context.setOpen, hide, show);
+
+  /**
+   * Checks the value of the open props and show the menu accordingly
+   */
+  useEffect(() => {
+    if (props.open) {
+      show();
+    }
+  }, [props.open]);
+
+  /**
+   * onMenuLayout handles the start of the Animation when anchor is clicked
+   */
+  const onMenuLayout = React.useCallback(
+    (e: LayoutChangeEvent) => {
+      if (menuState === AndroidMenuStates.Animating) {
+        return;
+      }
+      const { width, height } = e.nativeEvent.layout;
+      setMenuHeight(height);
+      setMenuWidth(width);
+      setMenuState(AndroidMenuStates.Animating);
+      Animated.parallel([
+        Animated.timing(menuSizeAnimation, {
+          toValue: { x: width, y: height },
+          duration: 100,
+          easing: EASING,
+          useNativeDriver: false,
+        }),
+        Animated.timing(opacityAnimation, {
+          toValue: 1,
+          duration: 100,
+          easing: EASING,
+          useNativeDriver: false,
+        }),
+      ]).start();
+    },
+    [menuSizeAnimation, menuState, opacityAnimation],
+  );
+
+  /**
+   * onRequestClose handles the closing of the Menu when the MenuItem or scrim or outside is clicked
+   */
+  const onRequestClose = (e: InteractionEvent) => {
+    setOpen(e, false, false);
+  };
+
+  // Adjust position of menu
+  const transforms = [];
+
+  useMemo(() => {
+    /**
+     * If the Menu width and SCREEN_INDENT cross the screen width then the Menu will be adjusted to the oppostion left side of the screen
+     */
+    if ((isRTL && left + anchorWidth - menuWidth > SCREEN_INDENT) || (!isRTL && left + menuWidth > windowWidth - SCREEN_INDENT)) {
+      transforms.push({
+        translateX: Animated.multiply(menuSizeAnimation.x, -1),
+      });
+    } else if (left < SCREEN_INDENT) {
+      // Setting the left podition of the Menu if the left positon is less than screen indent
+      setLeft(SCREEN_INDENT);
+    }
+
+    // Flip by Y axis if menu hits bottom screen border
+    if (top + menuHeight + SCREEN_INDENT > windowHeight) {
+      if (menuHeight > maxMenuHeight) {
+        transforms.push({
+          translateY: Animated.multiply(menuSizeAnimation.y, -1),
+        });
+      } else {
+        transforms.push({
+          translateY: Animated.multiply(menuSizeAnimation.y, -1),
+        });
+      }
+    } else if (top < SCREEN_INDENT) {
+      setTop(SCREEN_INDENT);
+    }
+  }, [
+    anchorWidth,
+    isRTL,
+    left,
+    maxMenuHeight,
+    menuHeight,
+    menuSizeAnimation.x,
+    menuSizeAnimation.y,
+    menuWidth,
+    top,
+    transforms,
+    windowHeight,
+    windowWidth,
+  ]);
+
+  /**
+   * Styles to be applied on the Modal Popover Animated.View
+   */
+  const shadowMenuContainerStyle = useMemo(() => {
+    return {
+      opacity: opacityAnimation,
+      transform: transforms,
+      top,
+      // Switch left to right for rtl devices
+      ...(isRTL ? { right: left } : { left }),
+    };
+  }, [isRTL, left, opacityAnimation, top, transforms]);
+
+  /**
+   * handles the state when menu is opening or closing with Animation
+   */
+  const animationStarted = menuState === AndroidMenuStates.Animating;
+  const { testID } = props;
+
+  // Default behavior for submenu is to open on hover
+  // the ...props line below will override this behavior for a submenu
+  // or apply openOnHover if passed into a root Menu.
+  const openOnHover = isSubmenu;
+  // We need to be able to cancel the timer that gets set on
+  // hover out of the parent popover if the parent popover
+  // is also set to open/close on hover out. Otherwise
+  // the parent menu will close when the timeout passes.
+  const parentPopoverHoverOutTimer = isSubmenu ? context.popoverHoverOutTimer : undefined;
+  return {
+    openOnHover,
+    ...props,
+    open,
+    setOpen,
+    shouldFocusOnContainer,
+    triggerRef,
+    isSubmenu,
+    isControlled: isOpenControlled,
+    parentPopoverHoverOutTimer,
+    setAnchorWidth,
+    shadowMenuContainerStyle,
+    _container,
+    onRequestClose,
+    onMenuLayout,
+    checked,
+    onCheckedChange,
+    menuHeight,
+    maxMenuHeight,
+    animationStarted,
+    menuSize,
+    testID,
+  };
+};
+
+/**
+ * useMenuOpenState handles the open and closing of the Menu based on the click
+ * It also takes care of Controlled Menu component by checking open variable
+ *
+ */
+const useMenuOpenState = (
+  isControlled: boolean,
+  props: MenuProps,
+  parentSetOpen: (e: InteractionEvent, isOpen: boolean, bubble?: boolean) => void,
+  hide: () => void,
+  show: () => void,
+): [boolean, boolean, (e: InteractionEvent, isOpen: boolean, bubble?: boolean) => void] => {
+  const { defaultOpen, onOpenChange, open } = props;
+  const initialState = typeof defaultOpen !== 'undefined' ? defaultOpen : !!open;
+  const [openInternal, setOpenInternal] = React.useState<boolean>(initialState);
+  const [shouldFocusOnContainer, setShouldFocusOnContainer] = React.useState<boolean | undefined>(undefined);
+  const state = isControlled ? open : openInternal;
+
+  /**
+   * setOpen handles the open of the Menu and setting focus on the Popover container
+   */
+  const setOpen = React.useCallback(
+    (e: InteractionEvent, isOpen: boolean, bubble?: boolean) => {
+      const openPrev = state;
+      if (!isControlled && (!isOpen || lastCloseTimestamp + delayOpen <= Date.now())) {
+        setOpenInternal(isOpen);
+      }
+      if (isOpen) {
+        show();
+        setShouldFocusOnContainer(true);
+      }
+      if (!isOpen) {
+        setShouldFocusOnContainer(undefined);
+        lastCloseTimestamp = Date.now();
+        hide();
+      }
+      if (onOpenChange && openPrev !== isOpen) {
+        onOpenChange(e, isOpen);
+      }
+      if (bubble && parentSetOpen && !isControlled) {
+        parentSetOpen(e, isOpen, bubble);
+      }
+    },
+    [state, onOpenChange, parentSetOpen, show, hide],
+  );
+  return [state, shouldFocusOnContainer, setOpen];
+};
+
+/**
+ * Call for useMenuCheckedState for identifying if any MenuItemCheckbox is checked or not
+ */
+const useMenuCheckedState = (props: MenuProps): [string[], (e: InteractionEvent, checked: string[]) => void] => {
+  const { checked, defaultChecked, onCheckedChange: onCheckedChangeOriginal } = props;
+  const [checkedInternal, setCheckedInternal] = React.useState(defaultChecked ?? checked ?? []);
+  const isControlled = typeof checked !== 'undefined';
+  const state = isControlled ? checked : checkedInternal;
+  const onCheckedChange = React.useCallback(
+    (e: InteractionEvent, checked: string[]) => {
+      if (!isControlled) {
+        setCheckedInternal(checked);
+      }
+      onCheckedChangeOriginal?.(e, checked);
+    },
+    [isControlled, setCheckedInternal, onCheckedChangeOriginal],
+  );
+  return [state, onCheckedChange];
+};