@fluentui/react-menu 9.0.0-alpha.8 → 9.0.0-alpha.80

package/lib-commonjs/contexts/menuGroupContext.js

@@ -1,7 +1,20 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var React = require("react");
-var MenuGroupContext = React.createContext({ headerId: '' });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMenuGroupContext = exports.MenuGroupContextProvider = void 0;
+
+var React = /*#__PURE__*/require("react");
+
+var MenuGroupContext = /*#__PURE__*/React.createContext({
+  headerId: ''
+});
 exports.MenuGroupContextProvider = MenuGroupContext.Provider;
-exports.useMenuGroupContext = function () { return React.useContext(MenuGroupContext); };
+
+var useMenuGroupContext = function () {
+  return React.useContext(MenuGroupContext);
+};
+
+exports.useMenuGroupContext = useMenuGroupContext;
 //# sourceMappingURL=menuGroupContext.js.map

package/lib-commonjs/contexts/menuGroupContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"menuGroupContext.js","sourceRoot":"../src/","sources":["contexts/menuGroupContext.ts"],"names":[],"mappings":";;AAAA,6BAA+B;AAE/B,IAAM,gBAAgB,GAAG,KAAK,CAAC,aAAa,CAAwB,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;AAazE,QAAA,wBAAwB,GAAG,gBAAgB,CAAC,QAAQ,CAAC;AACrD,QAAA,mBAAmB,GAAG,cAAM,OAAA,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,EAAlC,CAAkC,CAAC","sourcesContent":["import * as React from 'react';\n\nconst MenuGroupContext = React.createContext<MenuGroupContextValue>({ headerId: '' });\n\n/**\n * Context used to guarantee correct aria-relationship between header\n * and group information\n */\nexport interface MenuGroupContextValue {\n  /**\n   * Element id applied to the `MenuGroupHeader` component\n   */\n  headerId: string;\n}\n\nexport const MenuGroupContextProvider = MenuGroupContext.Provider;\nexport const useMenuGroupContext = () => React.useContext(MenuGroupContext);\n"]}
+{"version":3,"sources":["contexts/menuGroupContext.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,IAAM,gBAAgB,gBAAG,KAAK,CAAC,aAAN,CAA2C;AAAE,EAAA,QAAQ,EAAE;AAAZ,CAA3C,CAAzB;AAaa,OAAA,CAAA,wBAAA,GAA2B,gBAAgB,CAAC,QAA5C;;AACN,IAAM,mBAAmB,GAAG,YAAA;AAAM,SAAA,KAAK,CAAC,UAAN,CAAA,gBAAA,CAAA;AAAkC,CAApE;;AAAM,OAAA,CAAA,mBAAA,GAAmB,mBAAnB","sourcesContent":["import * as React from 'react';\n\nconst MenuGroupContext = React.createContext<MenuGroupContextValue>({ headerId: '' });\n\n/**\n * Context used to guarantee correct aria-relationship between header\n * and group information\n */\nexport type MenuGroupContextValue = {\n  /**\n   * Element id applied to the `MenuGroupHeader` component\n   */\n  headerId: string;\n};\n\nexport const MenuGroupContextProvider = MenuGroupContext.Provider;\nexport const useMenuGroupContext = () => React.useContext(MenuGroupContext);\n"],"sourceRoot":"../src/"}

package/lib-commonjs/contexts/menuListContext.d.ts

@@ -1,14 +1,15 @@
 import * as React from 'react';
-import { ContextSelector } from '@fluentui/react-context-selector';
-import { SelectableHandler } from '../selectable/index';
-import { MenuListProps } from '../components/index';
+import type { ContextSelector, Context } from '@fluentui/react-context-selector';
+import type { SelectableHandler } from '../selectable/index';
+import type { MenuListProps } from '../components/index';
+export declare const MenuListContext: Context<MenuListContextValue>;
 /**
  * Context shared between MenuList and its children components
  */
-export interface MenuListContextValue extends Pick<MenuListProps, 'checkedValues' | 'onCheckedValueChange' | 'hasIcons' | 'hasCheckmarks'> {
+export declare type MenuListContextValue = Pick<MenuListProps, 'checkedValues' | 'onCheckedValueChange' | 'hasIcons' | 'hasCheckmarks'> & {
     setFocusByFirstCharacter?: (e: React.KeyboardEvent<HTMLElement>, itemEl: HTMLElement) => void;
     toggleCheckbox?: SelectableHandler;
     selectRadio?: SelectableHandler;
-}
+};
 export declare const MenuListProvider: React.Provider<MenuListContextValue> & React.FC<React.ProviderProps<MenuListContextValue>>;
 export declare const useMenuListContext: <T>(selector: ContextSelector<MenuListContextValue, T>) => T;

package/lib-commonjs/contexts/menuListContext.js

@@ -1,17 +1,34 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_context_selector_1 = require("@fluentui/react-context-selector");
-var MenuListContext = react_context_selector_1.createContext({
-    checkedValues: {},
-    onCheckedValueChange: function () { return null; },
-    setFocusByFirstCharacter: function () { return null; },
-    toggleCheckbox: function () { return null; },
-    selectRadio: function () { return null; },
-    hasIcons: false,
-    hasCheckmarks: false,
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-exports.MenuListProvider = MenuListContext.Provider;
-exports.useMenuListContext = function (selector) {
-    return react_context_selector_1.useContextSelector(MenuListContext, selector);
+exports.useMenuListContext = exports.MenuListProvider = exports.MenuListContext = void 0;
+
+var react_context_selector_1 = /*#__PURE__*/require("@fluentui/react-context-selector");
+
+exports.MenuListContext = /*#__PURE__*/react_context_selector_1.createContext({
+  checkedValues: {},
+  onCheckedValueChange: function () {
+    return null;
+  },
+  setFocusByFirstCharacter: function () {
+    return null;
+  },
+  toggleCheckbox: function () {
+    return null;
+  },
+  selectRadio: function () {
+    return null;
+  },
+  hasIcons: false,
+  hasCheckmarks: false
+});
+exports.MenuListProvider = exports.MenuListContext.Provider;
+
+var useMenuListContext = function (selector) {
+  return react_context_selector_1.useContextSelector(exports.MenuListContext, selector);
 };
+
+exports.useMenuListContext = useMenuListContext;
 //# sourceMappingURL=menuListContext.js.map

package/lib-commonjs/contexts/menuListContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"menuListContext.js","sourceRoot":"../src/","sources":["contexts/menuListContext.tsx"],"names":[],"mappings":";;AACA,2EAAsG;AAItG,IAAM,eAAe,GAAG,sCAAa,CAAuB;IAC1D,aAAa,EAAE,EAAE;IACjB,oBAAoB,EAAE,cAAM,OAAA,IAAI,EAAJ,CAAI;IAChC,wBAAwB,EAAE,cAAM,OAAA,IAAI,EAAJ,CAAI;IACpC,cAAc,EAAE,cAAM,OAAA,IAAI,EAAJ,CAAI;IAC1B,WAAW,EAAE,cAAM,OAAA,IAAI,EAAJ,CAAI;IACvB,QAAQ,EAAE,KAAK;IACf,aAAa,EAAE,KAAK;CACrB,CAAC,CAAC;AAYU,QAAA,gBAAgB,GAAG,eAAe,CAAC,QAAQ,CAAC;AAE5C,QAAA,kBAAkB,GAAG,UAAK,QAAkD;IACvF,OAAA,2CAAkB,CAAC,eAAe,EAAE,QAAQ,CAAC;AAA7C,CAA6C,CAAC","sourcesContent":["import * as React from 'react';\nimport { createContext, useContextSelector, ContextSelector } from '@fluentui/react-context-selector';\nimport { SelectableHandler } from '../selectable/index';\nimport { MenuListProps } from '../components/index';\n\nconst MenuListContext = createContext<MenuListContextValue>({\n  checkedValues: {},\n  onCheckedValueChange: () => null,\n  setFocusByFirstCharacter: () => null,\n  toggleCheckbox: () => null,\n  selectRadio: () => null,\n  hasIcons: false,\n  hasCheckmarks: false,\n});\n\n/**\n * Context shared between MenuList and its children components\n */\nexport interface MenuListContextValue\n  extends Pick<MenuListProps, 'checkedValues' | 'onCheckedValueChange' | 'hasIcons' | 'hasCheckmarks'> {\n  setFocusByFirstCharacter?: (e: React.KeyboardEvent<HTMLElement>, itemEl: HTMLElement) => void;\n  toggleCheckbox?: SelectableHandler;\n  selectRadio?: SelectableHandler;\n}\n\nexport const MenuListProvider = MenuListContext.Provider;\n\nexport const useMenuListContext = <T,>(selector: ContextSelector<MenuListContextValue, T>) =>\n  useContextSelector(MenuListContext, selector);\n"]}
+{"version":3,"sources":["contexts/menuListContext.tsx"],"names":[],"mappings":";;;;;;;AACA,IAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AAKa,OAAA,CAAA,eAAA,gBAAiD,wBAAA,CAAA,aAAA,CAAoC;AAChG,EAAA,aAAa,EAAE,EADiF;AAEhG,EAAA,oBAAoB,EAAE,YAAA;AAAM,WAAA,IAAA;AAAI,GAFgE;AAGhG,EAAA,wBAAwB,EAAE,YAAA;AAAM,WAAA,IAAA;AAAI,GAH4D;AAIhG,EAAA,cAAc,EAAE,YAAA;AAAM,WAAA,IAAA;AAAI,GAJsE;AAKhG,EAAA,WAAW,EAAE,YAAA;AAAM,WAAA,IAAA;AAAI,GALyE;AAMhG,EAAA,QAAQ,EAAE,KANsF;AAOhG,EAAA,aAAa,EAAE;AAPiF,CAApC,CAAjD;AAsBA,OAAA,CAAA,gBAAA,GAAmB,OAAA,CAAA,eAAA,CAAgB,QAAnC;;AAEN,IAAM,kBAAkB,GAAG,UAAK,QAAL,EAAuD;AACvF,SAAA,wBAAA,CAAA,kBAAA,CAAmB,OAAA,CAAA,eAAnB,EAAoC,QAApC,CAAA;AAA6C,CADxC;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","sourcesContent":["import * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { SelectableHandler } from '../selectable/index';\nimport type { MenuListProps } from '../components/index';\n\nexport const MenuListContext: Context<MenuListContextValue> = createContext<MenuListContextValue>({\n  checkedValues: {},\n  onCheckedValueChange: () => null,\n  setFocusByFirstCharacter: () => null,\n  toggleCheckbox: () => null,\n  selectRadio: () => null,\n  hasIcons: false,\n  hasCheckmarks: false,\n});\n\n/**\n * Context shared between MenuList and its children components\n */\nexport type MenuListContextValue = Pick<\n  MenuListProps,\n  'checkedValues' | 'onCheckedValueChange' | 'hasIcons' | 'hasCheckmarks'\n> & {\n  setFocusByFirstCharacter?: (e: React.KeyboardEvent<HTMLElement>, itemEl: HTMLElement) => void;\n  toggleCheckbox?: SelectableHandler;\n  selectRadio?: SelectableHandler;\n};\n\nexport const MenuListProvider = MenuListContext.Provider;\n\nexport const useMenuListContext = <T,>(selector: ContextSelector<MenuListContextValue, T>) =>\n  useContextSelector(MenuListContext, selector);\n"],"sourceRoot":"../src/"}

package/lib-commonjs/contexts/menuTriggerContext.js

@@ -1,10 +1,22 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var React = require("react");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMenuTriggerContext = exports.MenuTriggerContextProvider = void 0;
+
+var React = /*#__PURE__*/require("react");
 /**
  * Context used communicate with child that it is a trigger for a menu
  */
-var MenuTriggerContext = React.createContext(false);
+
+
+var MenuTriggerContext = /*#__PURE__*/React.createContext(false);
 exports.MenuTriggerContextProvider = MenuTriggerContext.Provider;
-exports.useMenuTriggerContext = function () { return React.useContext(MenuTriggerContext); };
+
+var useMenuTriggerContext = function () {
+  return React.useContext(MenuTriggerContext);
+};
+
+exports.useMenuTriggerContext = useMenuTriggerContext;
 //# sourceMappingURL=menuTriggerContext.js.map

package/lib-commonjs/contexts/menuTriggerContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"menuTriggerContext.js","sourceRoot":"../src/","sources":["contexts/menuTriggerContext.ts"],"names":[],"mappings":";;AAAA,6BAA+B;AAE/B;;GAEG;AACH,IAAM,kBAAkB,GAAG,KAAK,CAAC,aAAa,CAAU,KAAK,CAAC,CAAC;AAElD,QAAA,0BAA0B,GAAG,kBAAkB,CAAC,QAAQ,CAAC;AACzD,QAAA,qBAAqB,GAAG,cAAM,OAAA,KAAK,CAAC,UAAU,CAAC,kBAAkB,CAAC,EAApC,CAAoC,CAAC","sourcesContent":["import * as React from 'react';\n\n/**\n * Context used communicate with child that it is a trigger for a menu\n */\nconst MenuTriggerContext = React.createContext<boolean>(false);\n\nexport const MenuTriggerContextProvider = MenuTriggerContext.Provider;\nexport const useMenuTriggerContext = () => React.useContext(MenuTriggerContext);\n"]}
+{"version":3,"sources":["contexts/menuTriggerContext.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;AAEA;;AAEG;;;AACH,IAAM,kBAAkB,gBAAG,KAAK,CAAC,aAAN,CAA6B,KAA7B,CAA3B;AAEa,OAAA,CAAA,0BAAA,GAA6B,kBAAkB,CAAC,QAAhD;;AACN,IAAM,qBAAqB,GAAG,YAAA;AAAM,SAAA,KAAK,CAAC,UAAN,CAAA,kBAAA,CAAA;AAAoC,CAAxE;;AAAM,OAAA,CAAA,qBAAA,GAAqB,qBAArB","sourcesContent":["import * as React from 'react';\n\n/**\n * Context used communicate with child that it is a trigger for a menu\n */\nconst MenuTriggerContext = React.createContext<boolean>(false);\n\nexport const MenuTriggerContextProvider = MenuTriggerContext.Provider;\nexport const useMenuTriggerContext = () => React.useContext(MenuTriggerContext);\n"],"sourceRoot":"../src/"}

package/lib-commonjs/index.d.ts

@@ -12,3 +12,4 @@ export * from './contexts/menuContext';
 export * from './contexts/menuTriggerContext';
 export * from './contexts/menuGroupContext';
 export * from './contexts/menuListContext';
+export * from './MenuPopover';

package/lib-commonjs/index.js

@@ -1,18 +1,38 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var tslib_1 = /*#__PURE__*/require("tslib");
+
 tslib_1.__exportStar(require("./MenuItem"), exports);
+
 tslib_1.__exportStar(require("./MenuList"), exports);
+
 tslib_1.__exportStar(require("./MenuItemCheckbox"), exports);
+
 tslib_1.__exportStar(require("./MenuItemRadio"), exports);
+
 tslib_1.__exportStar(require("./MenuDivider"), exports);
+
 tslib_1.__exportStar(require("./MenuGroupHeader"), exports);
+
 tslib_1.__exportStar(require("./MenuGroup"), exports);
+
 tslib_1.__exportStar(require("./selectable/index"), exports);
+
 tslib_1.__exportStar(require("./MenuTrigger"), exports);
+
 tslib_1.__exportStar(require("./Menu"), exports);
+
 tslib_1.__exportStar(require("./contexts/menuContext"), exports);
+
 tslib_1.__exportStar(require("./contexts/menuTriggerContext"), exports);
+
 tslib_1.__exportStar(require("./contexts/menuGroupContext"), exports);
+
 tslib_1.__exportStar(require("./contexts/menuListContext"), exports);
+
+tslib_1.__exportStar(require("./MenuPopover"), exports);
 //# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":";;;AAAA,qDAA2B;AAC3B,qDAA2B;AAC3B,6DAAmC;AACnC,0DAAgC;AAChC,wDAA8B;AAC9B,4DAAkC;AAClC,sDAA4B;AAC5B,6DAAmC;AACnC,wDAA8B;AAC9B,iDAAuB;AACvB,iEAAuC;AACvC,wEAA8C;AAC9C,sEAA4C;AAC5C,qEAA2C","sourcesContent":["export * from './MenuItem';\nexport * from './MenuList';\nexport * from './MenuItemCheckbox';\nexport * from './MenuItemRadio';\nexport * from './MenuDivider';\nexport * from './MenuGroupHeader';\nexport * from './MenuGroup';\nexport * from './selectable/index';\nexport * from './MenuTrigger';\nexport * from './Menu';\nexport * from './contexts/menuContext';\nexport * from './contexts/menuTriggerContext';\nexport * from './contexts/menuGroupContext';\nexport * from './contexts/menuListContext';\n"]}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,aAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,QAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,+BAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,6BAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,4BAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './MenuItem';\nexport * from './MenuList';\nexport * from './MenuItemCheckbox';\nexport * from './MenuItemRadio';\nexport * from './MenuDivider';\nexport * from './MenuGroupHeader';\nexport * from './MenuGroup';\nexport * from './selectable/index';\nexport * from './MenuTrigger';\nexport * from './Menu';\nexport * from './contexts/menuContext';\nexport * from './contexts/menuTriggerContext';\nexport * from './contexts/menuGroupContext';\nexport * from './contexts/menuListContext';\nexport * from './MenuPopover';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/selectable/index.js

@@ -1,5 +1,12 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var tslib_1 = /*#__PURE__*/require("tslib");
+
 tslib_1.__exportStar(require("./useCheckmarkStyles"), exports);
+
+tslib_1.__exportStar(require("./types"), exports);
 //# sourceMappingURL=index.js.map

package/lib-commonjs/selectable/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["selectable/index.ts"],"names":[],"mappings":";;;AAAA,+DAAqC","sourcesContent":["export * from './useCheckmarkStyles';\nexport * from './types';\n"]}
+{"version":3,"sources":["selectable/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,sBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,SAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './useCheckmarkStyles';\nexport * from './types';\n"],"sourceRoot":"../src/"}

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

@@ -3,7 +3,7 @@ export declare type SelectableHandler = (e: React.MouseEvent | React.KeyboardEve
 /**
  * Props for selecatble menu items
  */
-export interface MenuItemSelectableProps extends React.HTMLAttributes<HTMLElement> {
+export declare type MenuItemSelectableProps = {
     /**
      * Follows input convention
      * https://www.w3schools.com/jsref/prop_checkbox_name.asp
@@ -14,15 +14,11 @@ export interface MenuItemSelectableProps extends React.HTMLAttributes<HTMLElemen
      * https://www.w3schools.com/jsref/prop_checkbox_value.asp
      */
     value: string;
-    /**
-     * Whether the selectable item is disabled
-     */
-    disabled?: boolean;
-}
+};
 /**
  * State for selectable menu items
  */
-export interface MenuItemSelectableState extends MenuItemSelectableProps {
+export declare type MenuItemSelectableState = MenuItemSelectableProps & {
     /**
      * Checked items for a value with `name`
      */
@@ -35,4 +31,4 @@ export interface MenuItemSelectableState extends MenuItemSelectableProps {
      * Selectable is checked
      */
     checked: boolean;
-}
+};

package/lib-commonjs/selectable/types.js

@@ -1,3 +1,6 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 //# sourceMappingURL=types.js.map

package/lib-commonjs/selectable/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"../src/","sources":["selectable/types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\n\nexport type SelectableHandler = (\n  e: React.MouseEvent | React.KeyboardEvent,\n  name: string,\n  value: string,\n  checked: boolean,\n) => void;\n\n/**\n * Props for selecatble menu items\n */\nexport interface MenuItemSelectableProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Follows input convention\n   * https://www.w3schools.com/jsref/prop_checkbox_name.asp\n   */\n  name: string;\n\n  /**\n   * Follows input convention\n   * https://www.w3schools.com/jsref/prop_checkbox_value.asp\n   */\n  value: string;\n\n  /**\n   * Whether the selectable item is disabled\n   */\n  disabled?: boolean;\n}\n\n/**\n * State for selectable menu items\n */\nexport interface MenuItemSelectableState extends MenuItemSelectableProps {\n  /**\n   * Checked items for a value with `name`\n   */\n  checkedItems: string[];\n\n  /**\n   * Callback when checked items changes for a given value with `name`\n   */\n  onCheckedValueChange: (e: React.MouseEvent | React.KeyboardEvent, name: string, checkedItems: string[]) => void;\n\n  /**\n   * Selectable is checked\n   */\n  checked: boolean;\n}\n"]}
+{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}

package/lib-commonjs/selectable/useCheckmarkStyles.d.ts

@@ -1,11 +1,8 @@
-import * as React from 'react';
-import { ObjectShorthandProps } from '@fluentui/react-utilities';
-import { MenuItemSelectableState } from './types';
+import type { MenuItemSelectableState } from './types';
+import type { MenuItemSlots } from '../components/MenuItem/MenuItem.types';
 /**
  * Applies styles to a checkmark slot for selectable menu items
  *
  * @param state - should contain a `checkmark` slot
  */
-export declare const useCheckmarkStyles: (state: MenuItemSelectableState & {
-    checkmark: ObjectShorthandProps<React.HTMLAttributes<HTMLElement>>;
-}) => void;
+export declare const useCheckmarkStyles: (state: MenuItemSelectableState & Pick<MenuItemSlots, 'checkmark'>) => void;

package/lib-commonjs/selectable/useCheckmarkStyles.js

@@ -1,26 +1,38 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_make_styles_1 = require("@fluentui/react-make-styles");
-var useStyles = react_make_styles_1.makeStyles({
-    root: {
-        width: '16px',
-        height: '16px',
-        marginRight: '8px',
-        visibility: 'hidden',
-    },
-    rootChecked: {
-        visibility: 'visible',
-    },
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCheckmarkStyles = void 0;
+
+var react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
+
+var useStyles = /*#__PURE__*/react_make_styles_1.__styles({
+  "root": {
+    "a9b677": "fjw5fx7",
+    "Bqenvij": "fd461yt",
+    "Bcdw1i0": "fd7fpy0"
+  },
+  "rootChecked": {
+    "Bcdw1i0": "f1022m68"
+  }
+}, {
+  "d": [".fjw5fx7{width:16px;}", ".fd461yt{height:16px;}", ".fd7fpy0{visibility:hidden;}", ".f1022m68{visibility:visible;}"]
 });
 /**
  * Applies styles to a checkmark slot for selectable menu items
  *
  * @param state - should contain a `checkmark` slot
  */
-exports.useCheckmarkStyles = function (state) {
-    var styles = useStyles();
-    if (state.checkmark) {
-        state.checkmark.className = react_make_styles_1.ax(styles.root, state.checked && styles.rootChecked, state.checkmark.className);
-    }
+
+
+var useCheckmarkStyles = function (state) {
+  var styles = useStyles();
+
+  if (state.checkmark) {
+    state.checkmark.className = react_make_styles_1.mergeClasses(styles.root, state.checked && styles.rootChecked, state.checkmark.className);
+  }
 };
+
+exports.useCheckmarkStyles = useCheckmarkStyles;
 //# sourceMappingURL=useCheckmarkStyles.js.map

package/lib-commonjs/selectable/useCheckmarkStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCheckmarkStyles.js","sourceRoot":"../src/","sources":["selectable/useCheckmarkStyles.ts"],"names":[],"mappings":";;AACA,iEAA6D;AAI7D,IAAM,SAAS,GAAG,8BAAU,CAAC;IAC3B,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,WAAW,EAAE,KAAK;QAClB,UAAU,EAAE,QAAQ;KACrB;IACD,WAAW,EAAE;QACX,UAAU,EAAE,SAAS;KACtB;CACF,CAAC,CAAC;AAEH;;;;GAIG;AACU,QAAA,kBAAkB,GAAG,UAChC,KAAuG;IAEvG,IAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,IAAI,KAAK,CAAC,SAAS,EAAE;QACnB,KAAK,CAAC,SAAS,CAAC,SAAS,GAAG,sBAAE,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,OAAO,IAAI,MAAM,CAAC,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;KAC7G;AACH,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { ax, makeStyles } from '@fluentui/react-make-styles';\nimport { ObjectShorthandProps } from '@fluentui/react-utilities';\nimport { MenuItemSelectableState } from './types';\n\nconst useStyles = makeStyles({\n  root: {\n    width: '16px',\n    height: '16px',\n    marginRight: '8px',\n    visibility: 'hidden',\n  },\n  rootChecked: {\n    visibility: 'visible',\n  },\n});\n\n/**\n * Applies styles to a checkmark slot for selectable menu items\n *\n * @param state - should contain a `checkmark` slot\n */\nexport const useCheckmarkStyles = (\n  state: MenuItemSelectableState & { checkmark: ObjectShorthandProps<React.HTMLAttributes<HTMLElement>> },\n) => {\n  const styles = useStyles();\n  if (state.checkmark) {\n    state.checkmark.className = ax(styles.root, state.checked && styles.rootChecked, state.checkmark.className);\n  }\n};\n"]}
+{"version":3,"sources":["selectable/useCheckmarkStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AAIA,IAAM,SAAS,gBAAG,mBAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAWA;;;;AAIG;;;AACI,IAAM,kBAAkB,GAAG,UAAC,KAAD,EAAkE;AAClG,MAAM,MAAM,GAAG,SAAS,EAAxB;;AACA,MAAI,KAAK,CAAC,SAAV,EAAqB;AACnB,IAAA,KAAK,CAAC,SAAN,CAAgB,SAAhB,GAA4B,mBAAA,CAAA,YAAA,CAC1B,MAAM,CAAC,IADmB,EAE1B,KAAK,CAAC,OAAN,IAAiB,MAAM,CAAC,WAFE,EAG1B,KAAK,CAAC,SAAN,CAAgB,SAHU,CAA5B;AAKD;AACF,CATM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","sourcesContent":["import { mergeClasses, makeStyles } from '@fluentui/react-make-styles';\nimport type { MenuItemSelectableState } from './types';\nimport type { MenuItemSlots } from '../components/MenuItem/MenuItem.types';\n\nconst useStyles = makeStyles({\n  root: {\n    width: '16px',\n    height: '16px',\n    visibility: 'hidden',\n  },\n  rootChecked: {\n    visibility: 'visible',\n  },\n});\n\n/**\n * Applies styles to a checkmark slot for selectable menu items\n *\n * @param state - should contain a `checkmark` slot\n */\nexport const useCheckmarkStyles = (state: MenuItemSelectableState & Pick<MenuItemSlots, 'checkmark'>) => {\n  const styles = useStyles();\n  if (state.checkmark) {\n    state.checkmark.className = mergeClasses(\n      styles.root,\n      state.checked && styles.rootChecked,\n      state.checkmark.className,\n    );\n  }\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/utils/DefaultIcons.d.ts

@@ -3,4 +3,5 @@ export declare const renderIcon: (SVGElement: (props: {
     svgClasses: string;
 }) => JSX.Element) => React.FC<React.HTMLAttributes<HTMLSpanElement>>;
 export declare const ChevronRightIcon: React.FC<React.HTMLAttributes<HTMLSpanElement>>;
+export declare const ChevronLeftIcon: React.FC<React.HTMLAttributes<HTMLSpanElement>>;
 export declare const AcceptIcon: React.FC<React.HTMLAttributes<HTMLSpanElement>>;

package/lib-commonjs/utils/DefaultIcons.js

@@ -1,48 +1,100 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-var React = require("react");
-var react_make_styles_1 = require("@fluentui/react-make-styles");
-var react_utilities_1 = require("@fluentui/react-utilities");
-var useStyles = react_make_styles_1.makeStyles({
-    root: {
-        display: 'inline-block',
-        verticalAlign: 'middle',
-        speak: 'none',
-        width: '1em',
-        height: '1em',
-    },
-    svg: {
-        height: '100%',
-        fill: 'currentColor',
-        verticalAlign: 'top',
-    },
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-//
+exports.AcceptIcon = exports.ChevronLeftIcon = exports.ChevronRightIcon = exports.renderIcon = void 0;
+
+var tslib_1 = /*#__PURE__*/require("tslib");
+
+var React = /*#__PURE__*/require("react");
+
+var react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
+
+var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+
+var useStyles = /*#__PURE__*/react_make_styles_1.__styles({
+  "root": {
+    "mc9l5x": "f14t3ns0",
+    "ha4doy": "fmrv4ls",
+    "fb3t49": "fdgdznj",
+    "a9b677": "fhson10",
+    "Bqenvij": "f1un31zh"
+  },
+  "svg": {
+    "Bqenvij": "f1l02sjl",
+    "Bkfmm31": "f1w9h62z",
+    "ha4doy": "f12kltsn"
+  }
+}, {
+  "d": [".f14t3ns0{display:inline-block;}", ".fmrv4ls{vertical-align:middle;}", ".fdgdznj{speak:none;}", ".fhson10{width:1em;}", ".f1un31zh{height:1em;}", ".f1l02sjl{height:100%;}", ".f1w9h62z{fill:currentColor;}", ".f12kltsn{vertical-align:top;}"]
+}); //
 // !!!   A temporary workaround to avoid dependencies on any icon packages.
 // !!!   A usage of converged icon package should be considered.
 //
+
+
 var useIconProps = function (props) {
-    var _a;
-    var containerProps = props['aria-label']
-        ? {}
-        : (_a = {
-                role: 'presentation'
-            },
-            _a['aria-hidden'] = true,
-            _a);
-    var nativeProps = react_utilities_1.getNativeProps(props, react_utilities_1.htmlElementProperties);
-    var styles = useStyles();
-    var rootClasses = styles.root;
-    var svgClasses = styles.svg;
-    return { containerProps: containerProps, nativeProps: nativeProps, rootClasses: rootClasses, svgClasses: svgClasses };
+  var _a;
+
+  var containerProps = props['aria-label'] ? {} : (_a = {
+    role: 'presentation'
+  }, _a['aria-hidden'] = true, _a);
+  var nativeProps = react_utilities_1.getNativeProps(props, react_utilities_1.htmlElementProperties);
+  var styles = useStyles();
+  var rootClasses = styles.root;
+  var svgClasses = styles.svg;
+  return {
+    containerProps: containerProps,
+    nativeProps: nativeProps,
+    rootClasses: rootClasses,
+    svgClasses: svgClasses
+  };
+};
+
+var renderIcon = function (SVGElement) {
+  return function (props) {
+    var _a = useIconProps(props),
+        containerProps = _a.containerProps,
+        nativeProps = _a.nativeProps,
+        rootClasses = _a.rootClasses,
+        svgClasses = _a.svgClasses;
+
+    return React.createElement('span', tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, containerProps), nativeProps), {
+      className: react_make_styles_1.mergeClasses(rootClasses, props.className)
+    }), React.createElement(SVGElement, {
+      svgClasses: svgClasses
+    }));
+  };
 };
-exports.renderIcon = function (SVGElement) { return function (props) {
-    var _a = useIconProps(props), containerProps = _a.containerProps, nativeProps = _a.nativeProps, rootClasses = _a.rootClasses, svgClasses = _a.svgClasses;
-    return React.createElement('span', tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, containerProps), nativeProps), { className: react_make_styles_1.ax(rootClasses, props.className) }), React.createElement(SVGElement, { svgClasses: svgClasses }));
-}; };
-exports.ChevronRightIcon = exports.renderIcon(function (props) { return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 2048 2048", className: props.svgClasses },
-    React.createElement("path", { d: "M515 1955l930-931L515 93l90-90 1022 1021L605 2045l-90-90z" }))); });
-exports.AcceptIcon = exports.renderIcon(function (props) { return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 2048 2048", className: props.svgClasses },
-    React.createElement("path", { d: "M640 1755L19 1133l90-90 531 530L1939 275l90 90L640 1755z" }))); });
+
+exports.renderIcon = renderIcon;
+exports.ChevronRightIcon = /*#__PURE__*/exports.renderIcon(function (props) {
+  return React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 2048 2048",
+    className: props.svgClasses
+  }, React.createElement("path", {
+    d: "M515 1955l930-931L515 93l90-90 1022 1021L605 2045l-90-90z"
+  }));
+});
+exports.ChevronLeftIcon = /*#__PURE__*/exports.renderIcon(function (props) {
+  return React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 2048 2048",
+    className: props.svgClasses,
+    focusable: "false"
+  }, React.createElement("path", {
+    d: "M1443 2045L421 1024 1443 3l90 90-930 931 930 931-90 90z"
+  }));
+});
+exports.AcceptIcon = /*#__PURE__*/exports.renderIcon(function (props) {
+  return React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 2048 2048",
+    className: props.svgClasses
+  }, React.createElement("path", {
+    d: "M640 1755L19 1133l90-90 531 530L1939 275l90 90L640 1755z"
+  }));
+});
 //# sourceMappingURL=DefaultIcons.js.map

package/lib-commonjs/utils/DefaultIcons.js.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultIcons.js","sourceRoot":"../src/","sources":["utils/DefaultIcons.tsx"],"names":[],"mappings":";;;AAAA,6BAA+B;AAC/B,iEAA6D;AAC7D,6DAAkF;AAElF,IAAM,SAAS,GAAG,8BAAU,CAAC;IAC3B,IAAI,EAAE;QACJ,OAAO,EAAE,cAAc;QACvB,aAAa,EAAE,QAAQ;QACvB,KAAK,EAAE,MAAM;QACb,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,KAAK;KACd;IACD,GAAG,EAAE;QACH,MAAM,EAAE,MAAM;QACd,IAAI,EAAE,cAAc;QACpB,aAAa,EAAE,KAAK;KACrB;CACF,CAAC,CAAC;AAEH,EAAE;AACF,2EAA2E;AAC3E,gEAAgE;AAChE,EAAE;AAEF,IAAM,YAAY,GAAG,UAAC,KAA4C;;IAChE,IAAM,cAAc,GAAG,KAAK,CAAC,YAAY,CAAC;QACxC,CAAC,CAAC,EAAE;QACJ,CAAC;gBACG,IAAI,EAAE,cAAc;;YACpB,GAAC,aAAa,IAAG,IAAI;eACtB,CAAC;IACN,IAAM,WAAW,GAAG,gCAAc,CAAoC,KAAK,EAAE,uCAAqB,CAAC,CAAC;IACpG,IAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAE3B,IAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC;IAChC,IAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAC;IAE9B,OAAO,EAAE,cAAc,gBAAA,EAAE,WAAW,aAAA,EAAE,WAAW,aAAA,EAAE,UAAU,YAAA,EAAE,CAAC;AAClE,CAAC,CAAC;AAEW,QAAA,UAAU,GAAG,UACxB,UAA0D,IACN,OAAA,UAAA,KAAK;IACnD,IAAA,wBAA8E,EAA5E,kCAAc,EAAE,4BAAW,EAAE,4BAAW,EAAE,0BAAkC,CAAC;IAErF,OAAO,KAAK,CAAC,aAAa,CACxB,MAAM,yDAED,cAAc,GACd,WAAW,KACd,SAAS,EAAE,sBAAE,CAAC,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,KAE7C,oBAAC,UAAU,IAAC,UAAU,EAAE,UAAU,GAAI,CACvC,CAAC;AACJ,CAAC,EAZqD,CAYrD,CAAC;AAEW,QAAA,gBAAgB,GAAG,kBAAU,CAAC,UAAA,KAAK,IAAI,OAAA,CAClD,6BAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,eAAe,EAAC,SAAS,EAAE,KAAK,CAAC,UAAU;IACzF,8BAAM,CAAC,EAAC,2DAA2D,GAAG,CAClE,CACP,EAJmD,CAInD,CAAC,CAAC;AAEU,QAAA,UAAU,GAAG,kBAAU,CAAC,UAAA,KAAK,IAAI,OAAA,CAC5C,6BAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,eAAe,EAAC,SAAS,EAAE,KAAK,CAAC,UAAU;IACzF,8BAAM,CAAC,EAAC,0DAA0D,GAAG,CACjE,CACP,EAJ6C,CAI7C,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { ax, makeStyles } from '@fluentui/react-make-styles';\nimport { getNativeProps, htmlElementProperties } from '@fluentui/react-utilities';\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'inline-block',\n    verticalAlign: 'middle',\n    speak: 'none',\n    width: '1em',\n    height: '1em',\n  },\n  svg: {\n    height: '100%',\n    fill: 'currentColor',\n    verticalAlign: 'top',\n  },\n});\n\n//\n// !!!   A temporary workaround to avoid dependencies on any icon packages.\n// !!!   A usage of converged icon package should be considered.\n//\n\nconst useIconProps = (props: React.HTMLAttributes<HTMLSpanElement>) => {\n  const containerProps = props['aria-label']\n    ? {}\n    : {\n        role: 'presentation',\n        ['aria-hidden']: true,\n      };\n  const nativeProps = getNativeProps<React.HTMLAttributes<HTMLElement>>(props, htmlElementProperties);\n  const styles = useStyles();\n\n  const rootClasses = styles.root;\n  const svgClasses = styles.svg;\n\n  return { containerProps, nativeProps, rootClasses, svgClasses };\n};\n\nexport const renderIcon = (\n  SVGElement: (props: { svgClasses: string }) => JSX.Element,\n): React.FC<React.HTMLAttributes<HTMLSpanElement>> => props => {\n  const { containerProps, nativeProps, rootClasses, svgClasses } = useIconProps(props);\n\n  return React.createElement(\n    'span',\n    {\n      ...containerProps,\n      ...nativeProps,\n      className: ax(rootClasses, props.className),\n    },\n    <SVGElement svgClasses={svgClasses} />,\n  );\n};\n\nexport const ChevronRightIcon = renderIcon(props => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2048 2048\" className={props.svgClasses}>\n    <path d=\"M515 1955l930-931L515 93l90-90 1022 1021L605 2045l-90-90z\" />\n  </svg>\n));\n\nexport const AcceptIcon = renderIcon(props => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2048 2048\" className={props.svgClasses}>\n    <path d=\"M640 1755L19 1133l90-90 531 530L1939 275l90 90L640 1755z\" />\n  </svg>\n));\n"]}
+{"version":3,"sources":["utils/DefaultIcons.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { mergeClasses, makeStyles } from '@fluentui/react-make-styles';\nimport { getNativeProps, htmlElementProperties } from '@fluentui/react-utilities';\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'inline-block',\n    verticalAlign: 'middle',\n    speak: 'none',\n    width: '1em',\n    height: '1em',\n  },\n  svg: {\n    height: '100%',\n    fill: 'currentColor',\n    verticalAlign: 'top',\n  },\n});\n\n//\n// !!!   A temporary workaround to avoid dependencies on any icon packages.\n// !!!   A usage of converged icon package should be considered.\n//\n\nconst useIconProps = (props: React.HTMLAttributes<HTMLSpanElement>) => {\n  const containerProps = props['aria-label']\n    ? {}\n    : {\n        role: 'presentation',\n        ['aria-hidden']: true,\n      };\n  const nativeProps = getNativeProps<React.HTMLAttributes<HTMLElement>>(props, htmlElementProperties);\n  const styles = useStyles();\n\n  const rootClasses = styles.root;\n  const svgClasses = styles.svg;\n\n  return { containerProps, nativeProps, rootClasses, svgClasses };\n};\n\nexport const renderIcon = (\n  SVGElement: (props: { svgClasses: string }) => JSX.Element,\n): React.FC<React.HTMLAttributes<HTMLSpanElement>> => props => {\n  const { containerProps, nativeProps, rootClasses, svgClasses } = useIconProps(props);\n\n  return React.createElement(\n    'span',\n    {\n      ...containerProps,\n      ...nativeProps,\n      className: mergeClasses(rootClasses, props.className),\n    },\n    <SVGElement svgClasses={svgClasses} />,\n  );\n};\n\nexport const ChevronRightIcon = renderIcon(props => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2048 2048\" className={props.svgClasses}>\n    <path d=\"M515 1955l930-931L515 93l90-90 1022 1021L605 2045l-90-90z\" />\n  </svg>\n));\n\nexport const ChevronLeftIcon = renderIcon(props => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2048 2048\" className={props.svgClasses} focusable=\"false\">\n    <path d=\"M1443 2045L421 1024 1443 3l90 90-930 931 930 931-90 90z\" />\n  </svg>\n));\n\nexport const AcceptIcon = renderIcon(props => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2048 2048\" className={props.svgClasses}>\n    <path d=\"M640 1755L19 1133l90-90 531 530L1939 275l90 90L640 1755z\" />\n  </svg>\n));\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-export * from './isOutsideMenu';
+export * from './useOnMenuEnter';

package/lib-commonjs/utils/index.js

@@ -1,5 +1,10 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./isOutsideMenu"), exports);
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var tslib_1 = /*#__PURE__*/require("tslib");
+
+tslib_1.__exportStar(require("./useOnMenuEnter"), exports);
 //# sourceMappingURL=index.js.map

package/lib-commonjs/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["utils/index.ts"],"names":[],"mappings":";;;AAAA,0DAAgC","sourcesContent":["export * from './isOutsideMenu';\n"]}
+{"version":3,"sources":["utils/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './useOnMenuEnter';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/utils/useIsSubmenu.d.ts

@@ -0,0 +1,9 @@
+/**
+ * A component can be a part of a submenu whether its menu context `isSubmenu` flag is true
+ * or whether it is a part of a `MenuList`
+ *
+ * A simple hook to check box contexts easily
+ *
+ * @returns whether the component is part of a submenu
+ */
+export declare function useIsSubmenu(): boolean;

package/lib-commonjs/utils/useIsSubmenu.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useIsSubmenu = void 0;
+
+var react_context_selector_1 = /*#__PURE__*/require("@fluentui/react-context-selector");
+
+var menuContext_1 = /*#__PURE__*/require("../contexts/menuContext");
+
+var menuListContext_1 = /*#__PURE__*/require("../contexts/menuListContext");
+/**
+ * A component can be a part of a submenu whether its menu context `isSubmenu` flag is true
+ * or whether it is a part of a `MenuList`
+ *
+ * A simple hook to check box contexts easily
+ *
+ * @returns whether the component is part of a submenu
+ */
+
+
+function useIsSubmenu() {
+  var menuContextValue = menuContext_1.useMenuContext(function (context) {
+    return context.isSubmenu;
+  });
+  var hasMenuListContext = react_context_selector_1.useHasParentContext(menuListContext_1.MenuListContext);
+  return menuContextValue || hasMenuListContext;
+}
+
+exports.useIsSubmenu = useIsSubmenu;
+//# sourceMappingURL=useIsSubmenu.js.map