npm - @fluentui/react-menu - Versions diffs - 9.0.0-alpha.8 → 9.0.0-alpha.80 - Mend

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

Files changed (1314) hide show

package/lib-commonjs/components/MenuItem/MenuItem.types.d.ts CHANGED Viewed

@@ -1,28 +1,30 @@
-import * as React from 'react';
-import { ComponentProps, ShorthandProps, ObjectShorthandProps } from '@fluentui/react-utilities';
-export interface MenuItemProps extends ComponentProps, React.HTMLAttributes<HTMLElement> {
+import { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
+export declare type MenuItemSlots = {
+    root: IntrinsicShorthandProps<'div'>;
     /**
      * Icon slot rendered before children content
      */
-    icon?: ShorthandProps<React.HTMLAttributes<HTMLElement>>;
+    icon?: IntrinsicShorthandProps<'span'>;
     /**
      * A helper slot for alignment when a menu item is used with selectable menuitems
      * Avoid using this slot as a replacement for MenuItemCheckbox and MenuItemRadio components
      */
-    checkmark?: ShorthandProps<React.HTMLAttributes<HTMLElement>>;
+    checkmark?: IntrinsicShorthandProps<'span'>;
     /**
      * Icon slot that shows the indicator for a submenu
      */
-    submenuIndicator?: ShorthandProps<React.HTMLAttributes<HTMLElement>>;
+    submenuIndicator?: IntrinsicShorthandProps<'span'>;
     /**
      * Component children are placed in this slot
      * Avoid using the `children` property in this slot in favour of Component children whenever possible
      */
-    content?: ShorthandProps<React.HTMLAttributes<HTMLElement>>;
+    content: IntrinsicShorthandProps<'span'>;
     /**
      * Secondary content rendered opposite the primary content (e.g Shortcut text)
      */
-    secondaryContent?: ShorthandProps<React.HTMLAttributes<HTMLElement>>;
+    secondaryContent?: IntrinsicShorthandProps<'span'>;
+};
+declare type MenuItemCommons = {
     /**
      * If the menu item is a trigger for a submenu
      */
@@ -31,31 +33,11 @@ export interface MenuItemProps extends ComponentProps, React.HTMLAttributes<HTML
      * Applies disabled styles to menu item but remains focusable
      */
     disabled?: boolean;
-}
-export interface MenuItemState extends MenuItemProps {
     /**
-     * Ref to the root slot
+     * Clicking on the menu item will not dismiss an open menu
      */
-    ref: React.MutableRefObject<HTMLElement>;
-    /**
-     * Icon slot when processed by internal state
-     */
-    icon?: ObjectShorthandProps<React.HTMLAttributes<HTMLSpanElement>>;
-    /**
-     * A helper slot for alignment when a menu item is used with selectable menuitems
-     * Avoid using this slot as a replacement for MenuItemCheckbox and MenuItemRadio components
-     */
-    checkmark: ObjectShorthandProps<React.HTMLAttributes<HTMLElement>>;
-    /**
-     * Icon slot that shows the indicator for a submenu
-     */
-    submenuIndicator?: ObjectShorthandProps<React.HTMLAttributes<HTMLElement>>;
-    /**
-     * Slot for the component children, avoid in favour of children and classnames for customization
-     */
-    content: ObjectShorthandProps<React.HTMLAttributes<HTMLElement>>;
-    /**
-     * Secondary content rendered opposite the primary content (e.g Shortcut text)
-     */
-    secondaryContent: ObjectShorthandProps<React.HTMLAttributes<HTMLElement>>;
-}
+    persistOnClick?: boolean;
+};
+export declare type MenuItemProps = ComponentProps<Partial<MenuItemSlots>> & MenuItemCommons;
+export declare type MenuItemState = ComponentState<MenuItemSlots> & MenuItemCommons;
+export {};

package/lib-commonjs/components/MenuItem/MenuItem.types.js CHANGED Viewed

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

package/lib-commonjs/components/MenuItem/MenuItem.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"~~file":"MenuItem.types.js","sourceRoot":"../src/","~~sources":[~~"components/MenuItem/MenuItem.types.ts"~~],"names":[],"mappings":"","~~sourcesContent~~":["~~import * as React from 'react';\nimport { ComponentProps, ShorthandProps, ObjectShorthandProps } from '@fluentui~~/react-utilities';\n\nexport interface MenuItemProps extends ComponentProps, React.HTMLAttributes<HTMLElement> {\n /*\n Icon slot rendered before children content\n /\n icon?: ShorthandProps<React.HTMLAttributes<HTMLElement>>;\n\n /\n A helper slot for alignment when a menu item is used with selectable menuitems\n * Avoid using this slot as a replacement for MenuItemCheckbox and MenuItemRadio components\n /\n checkmark?: ShorthandProps<React.HTMLAttributes<HTMLElement>>;\n\n /\n Icon slot that shows the indicator for a submenu\n /\n submenuIndicator?: ShorthandProps<React.HTMLAttributes<HTMLElement>>;\n\n /\n Component children are placed in this slot\n * Avoid using the `children` property in this slot in favour of Component children whenever possible\n /\n content?: ShorthandProps<React.HTMLAttributes<HTMLElement>>;\n\n /\n Secondary content rendered opposite the primary content (e.g Shortcut text)\n /\n secondaryContent?: ShorthandProps<React.HTMLAttributes<HTMLElement>>;\n\n /\n If the menu item is a trigger for a submenu\n /\n hasSubmenu?: boolean;\n\n /\n Applies disabled styles to menu item but remains focusable\n /\n disabled?: boolean;\n}\n\nexport interface MenuItemState extends MenuItemProps {\n /\n Ref to the root slot\n /\n ref: React.MutableRefObject<HTMLElement>;\n\n /\n Icon slot when processed by internal state\n /\n icon?: ObjectShorthandProps<React.HTMLAttributes<HTMLSpanElement>>;\n\n /\n A helper slot for alignment when a menu item is used with selectable menuitems\n * Avoid using this slot as a replacement for MenuItemCheckbox and MenuItemRadio components\n /\n checkmark: ObjectShorthandProps<React.HTMLAttributes<HTMLElement>>;\n\n /\n Icon slot that shows the indicator for a submenu\n /\n submenuIndicator?: ObjectShorthandProps<React.HTMLAttributes<HTMLElement>>;\n\n /\n Slot for the component children, avoid in favour of children and classnames for customization\n /\n content: ObjectShorthandProps<React.HTMLAttributes<HTMLElement>>;\n\n /\n Secondary content rendered opposite the primary content (e.g Shortcut text)\n */\n secondaryContent: ObjectShorthandProps<React.HTMLAttributes<HTMLElement>>;\n}\n"]}
1	+ {"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}

package/lib-commonjs/components/MenuItem/index.js CHANGED Viewed

@@ -1,8 +1,18 @@
 "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("./MenuItem.types"), exports);
 tslib_1.__exportStar(require("./renderMenuItem"), exports);
 tslib_1.__exportStar(require("./useMenuItem"), exports);
 tslib_1.__exportStar(require("./useMenuItemStyles"), exports);
 //# sourceMappingURL=index.js.map

package/lib-commonjs/components/MenuItem/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"~~file":"index.js","sourceRoot":"../src/","~~sources":["components/MenuItem/index.ts"],"names":[],"mappings":"~~;;;~~AAAA,~~qDAA2B;AAE3B~~,~~2DAAiC;AACjC~~,~~wDAA8B;AAC9B~~,~~8DAAoC~~","sourcesContent":["export * from './MenuItem';\nexport * from './MenuItem.types';\nexport * from './renderMenuItem';\nexport * from './useMenuItem';\nexport * from './useMenuItemStyles';\n"]}
1	+ {"version":3,"sources":["components/MenuItem/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './MenuItem';\nexport * from './MenuItem.types';\nexport * from './renderMenuItem';\nexport * from './useMenuItem';\nexport * from './useMenuItemStyles';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/MenuItem/renderMenuItem.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { MenuItemState } from './MenuItem.types';
+import type { MenuItemState } from './MenuItem.types';
 /**
  * Function that renders the final JSX of the component
  */

package/lib-commonjs/components/MenuItem/renderMenuItem.js CHANGED Viewed

@@ -1,19 +1,29 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-var React = require("react");
-var react_utilities_1 = require("@fluentui/react-utilities");
-var useMenuItem_1 = require("./useMenuItem");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderMenuItem = void 0;
+var tslib_1 = /*#__PURE__*/require("tslib");
+var React = /*#__PURE__*/require("react");
+var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+var useMenuItem_1 = /*#__PURE__*/require("./useMenuItem");
 /**
  * Function that renders the final JSX of the component
  */
-exports.renderMenuItem = function (state) {
-    var _a = react_utilities_1.getSlots(state, useMenuItem_1.menuItemShorthandProps), slots = _a.slots, slotProps = _a.slotProps;
-    return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root),
-        React.createElement(slots.checkmark, tslib_1.__assign({}, slotProps.checkmark)),
-        React.createElement(slots.icon, tslib_1.__assign({}, slotProps.icon)),
-        React.createElement(slots.content, tslib_1.__assign({}, slotProps.content)),
-        React.createElement(slots.secondaryContent, tslib_1.__assign({}, slotProps.secondaryContent)),
-        state.hasSubmenu && React.createElement(slots.submenuIndicator, tslib_1.__assign({}, slotProps.submenuIndicator))));
+var renderMenuItem = function (state) {
+  var _a = react_utilities_1.getSlots(state, useMenuItem_1.menuItemSlots),
+      slots = _a.slots,
+      slotProps = _a.slotProps;
+  return React.createElement(slots.root, tslib_1.__assign({}, slotProps.root), React.createElement(slots.checkmark, tslib_1.__assign({}, slotProps.checkmark)), React.createElement(slots.icon, tslib_1.__assign({}, slotProps.icon)), React.createElement(slots.content, tslib_1.__assign({}, slotProps.content)), React.createElement(slots.secondaryContent, tslib_1.__assign({}, slotProps.secondaryContent)), React.createElement(slots.submenuIndicator, tslib_1.__assign({}, slotProps.submenuIndicator)));
 };
+exports.renderMenuItem = renderMenuItem;
 //# sourceMappingURL=renderMenuItem.js.map

package/lib-commonjs/components/MenuItem/renderMenuItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"~~file":"renderMenuItem.js","sourceRoot":"../src/","~~sources":["components/MenuItem/renderMenuItem.tsx"],"names":[],"mappings":"~~;;;~~AAAA,~~6BAA+B;AAC/B~~,~~6DAAqD;AAErD~~,~~6CAAuD~~;~~AAEvD~~;;~~GAEG;AACU~~,~~QAAA~~,cAAc,GAAG,UAAC,~~KAAoB~~;~~IAC3C~~,~~IAAA~~,~~4EAA8D~~,~~EAA5D~~,~~gBAAK~~,~~EAAE~~,~~wBAAqD~~,~~CAAC~~;~~IAErE~~,~~OAAO~~,~~CACL~~,~~oBAAC~~,KAAK,CAAC,~~IAAI~~,~~uBAAK~~,SAAS,CAAC,~~IAAI;QAC5B~~,~~oBAAC~~,KAAK,CAAC,~~SAAS~~,~~uBAAK~~,SAAS,CAAC,~~SAAS~~,~~EAAI;QAC5C~~,~~oBAAC~~,KAAK,CAAC,~~IAAI~~,~~uBAAK~~,SAAS,CAAC,~~IAAI~~,~~EAAI;QAClC~~,~~oBAAC~~,KAAK,CAAC,~~OAAO~~,~~uBAAK~~,SAAS,CAAC,~~OAAO~~,~~EAAI;QACxC~~,~~oBAAC~~,KAAK,CAAC,~~gBAAgB~~,~~uBAAK~~,SAAS,CAAC,~~gBAAgB~~,~~EAAI;QACzD~~,~~KAAK~~,~~CAAC~~,~~UAAU~~,~~IAAI~~,~~oBAAC~~,KAAK,CAAC,~~gBAAgB~~,~~uBAAK~~,SAAS,CAAC,~~gBAAgB~~,~~EAAI~~,~~CACpE~~,~~CACd,CAAC~~;~~AACJ~~,~~CAAC~~,~~CAAC~~","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { ~~MenuItemState~~ } from './~~MenuItem.types~~';\nimport { ~~menuItemShorthandProps~~ } from './~~useMenuItem~~';\n\n/*\n Function that renders the final JSX of the component\n */\nexport const renderMenuItem = (state: MenuItemState) => {\n const { slots, slotProps } = getSlots(state, ~~menuItemShorthandProps~~);\n\n return (\n <slots.root {...slotProps.root}>\n <slots.checkmark {...slotProps.checkmark} />\n <slots.icon {...slotProps.icon} />\n <slots.content {...slotProps.content} />\n <slots.secondaryContent {...slotProps.secondaryContent} />\n ~~{state.hasSubmenu &&~~ <slots.submenuIndicator {...slotProps.submenuIndicator} ~~/>}\~~n </slots.root>\n );\n};\n"]}
1	+ {"version":3,"sources":["components/MenuItem/renderMenuItem.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,IAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;AAGA;;AAEG;;;AACI,IAAM,cAAc,GAAG,UAAC,KAAD,EAAqB;AAC3C,MAAA,EAAA,GAAuB,iBAAA,CAAA,QAAA,CAAwB,KAAxB,EAA+B,aAAA,CAAA,aAA/B,CAAvB;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AAEN,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,SAAP,EAAgB,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,SAAf,CAAhB,CADF,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAFF,EAGE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,OAAf,CAAd,CAHF,EAIE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,gBAAf,CAAvB,CAJF,EAKE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,gBAAf,CAAvB,CALF,CADF;AASD,CAZM;;AAAM,OAAA,CAAA,cAAA,GAAc,cAAd","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { menuItemSlots } from './useMenuItem';\nimport type { MenuItemSlots, MenuItemState } from './MenuItem.types';\n\n/*\n Function that renders the final JSX of the component\n */\nexport const renderMenuItem = (state: MenuItemState) => {\n const { slots, slotProps } = getSlots<MenuItemSlots>(state, menuItemSlots);\n\n return (\n <slots.root {...slotProps.root}>\n <slots.checkmark {...slotProps.checkmark} />\n <slots.icon {...slotProps.icon} />\n <slots.content {...slotProps.content} />\n <slots.secondaryContent {...slotProps.secondaryContent} />\n <slots.submenuIndicator {...slotProps.submenuIndicator} />\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/MenuItem/useCharacterSearch.d.ts CHANGED Viewed

@@ -1,2 +1,3 @@
-import { MenuItemState } from '../../components/index';
-export declare const useCharacterSearch: (state: MenuItemState) => MenuItemState;
+import * as React from 'react';
+import type { MenuItemState } from '../../components/index';
+export declare const useCharacterSearch: (state: MenuItemState, ref: React.RefObject<HTMLElement>) => MenuItemState;

package/lib-commonjs/components/MenuItem/useCharacterSearch.js CHANGED Viewed

@@ -1,19 +1,36 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var menuListContext_1 = require("../../contexts/menuListContext");
-exports.useCharacterSearch = function (state) {
-    var setFocusByFirstCharacter = menuListContext_1.useMenuListContext(function (context) { return context.setFocusByFirstCharacter; });
-    var onKeyDownBase = state.onKeyDown;
-    state.onKeyDown = function (e) {
-        var _a, _b;
-        if (onKeyDownBase) {
-            onKeyDownBase(e);
-        }
-        if (((_a = e.key) === null || _a === void 0 ? void 0 : _a.length) > 1) {
-            return;
-        }
-        (_b = setFocusByFirstCharacter) === null || _b === void 0 ? void 0 : _b(e, state.ref.current);
-    };
-    return state;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCharacterSearch = void 0;
+var menuListContext_1 = /*#__PURE__*/require("../../contexts/menuListContext");
+var useCharacterSearch = function (state, ref) {
+  var setFocusByFirstCharacter = menuListContext_1.useMenuListContext(function (context) {
+    return context.setFocusByFirstCharacter;
+  });
+  var onKeyDownBase = state.root.onKeyDown;
+  state.root.onKeyDown = function (e) {
+    var _a;
+    if (onKeyDownBase) {
+      onKeyDownBase(e);
+    }
+    if (((_a = e.key) === null || _a === void 0 ? void 0 : _a.length) > 1) {
+      return;
+    }
+    if (ref.current) {
+      setFocusByFirstCharacter === null || setFocusByFirstCharacter === void 0 ? void 0 : setFocusByFirstCharacter(e, ref.current);
+    }
+  };
+  return state;
 };
+exports.useCharacterSearch = useCharacterSearch;
 //# sourceMappingURL=useCharacterSearch.js.map

package/lib-commonjs/components/MenuItem/useCharacterSearch.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"~~file":"useCharacterSearch.js","sourceRoot":"../src/","~~sources":["components/MenuItem/useCharacterSearch.ts"],"names":[],"mappings":";;~~AAEA~~,~~kEAAoE;AAEvD~~,~~QAAA,~~kBAAkB,GAAG,UAAC,~~KAAoB~~;~~IACrD~~,~~IAAM~~,wBAAwB,GAAG,~~oCAAkB~~,~~CAAC~~,~~UAAA~~,~~OAAO~~,~~IAAI~~,OAAA,OAAO,~~CAAC~~,~~wBAAwB~~,~~EAAhC~~,~~CAAgC~~,~~CAAC~~,CAAC~~;IAEzF~~,~~IAAA,+BAAwB~~,~~CAAW;IAC3C~~,KAAK,CAAC,~~SAAS~~,~~GAAG~~,~~UAAC~~,~~CAAmC;;QACpD~~,~~IAAI~~,~~aAAa~~,~~EAAE~~;~~YACjB~~,aAAa,CAAC,~~CAAC~~,~~CAAC,CAAC~~;~~SAClB;QAED~~,~~IAAI~~,~~OAAA~~,CAAC,CAAC,~~GAAG~~,~~0CAAE~~,~~MAAM~~,~~IAAG~~,~~CAAC~~,~~EAAE;YACrB~~,~~OAAO~~;~~SACR~~;~~QAED~~,MAAA,wBAAwB,~~0CAAG~~,~~CAAC~~,~~EAAE~~,~~KAAK~~,~~CAAC~~,GAAG,CAAC,~~OAAO~~,~~EAAE~~;~~IACnD~~,~~CAAC~~,~~CAAC~~;~~IAEF~~,~~OAAO~~,~~KAAK~~,~~CAAC;AACf~~,~~CAAC~~,~~CAAC~~","sourcesContent":["import * as React from 'react';\nimport { ~~MenuItemState~~ } from '../../~~components~~/~~index~~';\nimport { ~~useMenuListContext~~ } from '../../~~contexts~~/~~menuListContext~~';\n\nexport const useCharacterSearch = (state: MenuItemState) => {\n const setFocusByFirstCharacter = useMenuListContext(context => context.setFocusByFirstCharacter);\n\n const { onKeyDown: onKeyDownBase } = state;\n state.onKeyDown = (e: ~~React.KeyboardEvent<HTMLElement>)~~ => {\n if (onKeyDownBase) {\n onKeyDownBase(e);\n }\n\n if (e.key?.length > 1) {\n return;\n }\n\n setFocusByFirstCharacter?.(e, ~~state.~~ref.current);\n };\n\n return state;\n};\n"]}
1	+ {"version":3,"sources":["components/MenuItem/useCharacterSearch.ts"],"names":[],"mappings":";;;;;;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,gCAAA,CAAA;;AAGO,IAAM,kBAAkB,GAAG,UAAC,KAAD,EAAuB,GAAvB,EAAwD;AACxF,MAAM,wBAAwB,GAAG,iBAAA,CAAA,kBAAA,CAAmB,UAAA,OAAA,EAAO;AAAI,WAAA,OAAO,CAAP,wBAAA;AAAgC,GAA9D,CAAjC;AAEQ,MAAW,aAAa,GAAK,KAAK,CAAC,IAAN,CAAL,SAAxB;;AACR,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,UAAA,CAAA,EAAC;;;AACtB,QAAI,aAAJ,EAAmB;AACjB,MAAA,aAAa,CAAC,CAAD,CAAb;AACD;;AAED,QAAI,CAAA,CAAA,EAAA,GAAA,CAAC,CAAC,GAAF,MAAK,IAAL,IAAK,EAAA,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAK,EAAA,CAAE,MAAP,IAAgB,CAApB,EAAuB;AACrB;AACD;;AAED,QAAI,GAAG,CAAC,OAAR,EAAiB;AACf,MAAA,wBAAwB,KAAA,IAAxB,IAAA,wBAAwB,KAAA,KAAA,CAAxB,GAAwB,KAAA,CAAxB,GAAA,wBAAwB,CAAG,CAAH,EAAM,GAAG,CAAC,OAAV,CAAxB;AACD;AACF,GAZD;;AAcA,SAAO,KAAP;AACD,CAnBM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","sourcesContent":["import * as React from 'react';\nimport { useMenuListContext } from '../../contexts/menuListContext';\nimport type { MenuItemState } from '../../components/index';\n\nexport const useCharacterSearch = (state: MenuItemState, ref: React.RefObject<HTMLElement>) => {\n const setFocusByFirstCharacter = useMenuListContext(context => context.setFocusByFirstCharacter);\n\n const { onKeyDown: onKeyDownBase } = state.root;\n state.root.onKeyDown = e => {\n if (onKeyDownBase) {\n onKeyDownBase(e);\n }\n\n if (e.key?.length > 1) {\n return;\n }\n\n if (ref.current) {\n setFocusByFirstCharacter?.(e, ref.current);\n }\n };\n\n return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/MenuItem/useMenuItem.d.ts CHANGED Viewed

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { MenuItemProps, MenuItemState } from './MenuItem.types';
+import type { MenuItemProps, MenuItemSlots, MenuItemState } from './MenuItem.types';
 /**
  * Consts listing which props are shorthand props.
  */
-export declare const menuItemShorthandProps: readonly ["icon", "submenuIndicator", "content", "secondaryContent", "checkmark"];
+export declare const menuItemSlots: Array<keyof MenuItemSlots>;
 /**
  * Returns the props and state required to render the component
  */
-export declare const useMenuItem: (props: MenuItemProps, ref: React.Ref<HTMLElement>, defaultProps?: MenuItemProps | undefined) => MenuItemState;
+export declare const useMenuItem: (props: MenuItemProps, ref: React.Ref<HTMLElement>) => MenuItemState;

package/lib-commonjs/components/MenuItem/useMenuItem.js CHANGED Viewed

@@ -1,67 +1,150 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var React = require("react");
-var react_utilities_1 = require("@fluentui/react-utilities");
-var useCharacterSearch_1 = require("./useCharacterSearch");
-var menuTriggerContext_1 = require("../../contexts/menuTriggerContext");
-var DefaultIcons_1 = require("../../utils/DefaultIcons");
-var menuListContext_1 = require("../../contexts/menuListContext");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMenuItem = exports.menuItemSlots = void 0;
+var tslib_1 = /*#__PURE__*/require("tslib");
+var React = /*#__PURE__*/require("react");
+var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+var react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
+var useCharacterSearch_1 = /*#__PURE__*/require("./useCharacterSearch");
+var menuTriggerContext_1 = /*#__PURE__*/require("../../contexts/menuTriggerContext");
+var react_icons_1 = /*#__PURE__*/require("@fluentui/react-icons");
+var menuListContext_1 = /*#__PURE__*/require("../../contexts/menuListContext");
+var menuContext_1 = /*#__PURE__*/require("../../contexts/menuContext");
 /**
  * Consts listing which props are shorthand props.
  */
-exports.menuItemShorthandProps = ['icon', 'submenuIndicator', 'content', 'secondaryContent', 'checkmark'];
-// eslint-disable-next-line deprecation/deprecation
-var mergeProps = react_utilities_1.makeMergePropsCompat({ deepMerge: exports.menuItemShorthandProps });
+exports.menuItemSlots = ['root', 'icon', 'submenuIndicator', 'content', 'secondaryContent', 'checkmark'];
 /**
  * Returns the props and state required to render the component
  */
-exports.useMenuItem = function (props, ref, defaultProps) {
-    var hasSubmenu = menuTriggerContext_1.useMenuTriggerContext();
-    var hasIcons = menuListContext_1.useMenuListContext(function (context) { return context.hasIcons; });
-    var hasCheckmarks = menuListContext_1.useMenuListContext(function (context) { return context.hasCheckmarks; });
-    var state = mergeProps({
-        ref: react_utilities_1.useMergedRefs(ref, React.useRef(null)),
-        icon: { as: 'span', children: hasIcons ? '' : undefined },
-        checkmark: { as: 'span', children: hasCheckmarks ? '' : undefined },
-        submenuIndicator: { as: 'span', children: React.createElement(DefaultIcons_1.ChevronRightIcon, null) },
-        content: { as: 'span', children: props.children },
-        secondaryContent: { as: 'span' },
-        role: 'menuitem',
-        tabIndex: 0,
-        hasSubmenu: hasSubmenu,
-        'aria-disabled': props.disabled,
-        dummy: { foo: 'xxx ' },
-    }, defaultProps && react_utilities_1.resolveShorthandProps(defaultProps, exports.menuItemShorthandProps), react_utilities_1.resolveShorthandProps(props, exports.menuItemShorthandProps));
-    var onClickOriginal = state.onClick, onKeyDownOriginal = state.onKeyDown;
-    state.onKeyDown = function (e) {
-        var _a, _b;
-        if (react_utilities_1.shouldPreventDefaultOnKeyDown(e)) {
-            if (state.disabled) {
-                e.preventDefault();
-                e.stopPropagation();
-                return;
-            }
-            e.preventDefault();
-            (_a = e.target) === null || _a === void 0 ? void 0 : _a.click();
-        }
-        (_b = onKeyDownOriginal) === null || _b === void 0 ? void 0 : _b(e);
-    };
-    state.onClick = function (e) {
-        var _a;
-        if (state.disabled) {
-            e.preventDefault();
-            e.stopPropagation();
-            return;
-        }
-        (_a = onClickOriginal) === null || _a === void 0 ? void 0 : _a(e);
-    };
-    var onMouseEnterOriginal = state.onMouseEnter;
-    state.onMouseEnter = react_utilities_1.useEventCallback(function (e) {
-        var _a, _b;
-        (_a = state.ref.current) === null || _a === void 0 ? void 0 : _a.focus();
-        (_b = onMouseEnterOriginal) === null || _b === void 0 ? void 0 : _b(e);
-    });
-    useCharacterSearch_1.useCharacterSearch(state);
-    return state;
+var useMenuItem = function (props, ref) {
+  var hasSubmenu = menuTriggerContext_1.useMenuTriggerContext();
+  var hasIcons = menuListContext_1.useMenuListContext(function (context) {
+    return context.hasIcons;
+  });
+  var hasCheckmarks = menuListContext_1.useMenuListContext(function (context) {
+    return context.hasCheckmarks;
+  });
+  var setOpen = menuContext_1.useMenuContext(function (context) {
+    return context.setOpen;
+  });
+  var persistOnClickContext = menuContext_1.useMenuContext(function (context) {
+    return context.persistOnItemClick;
+  });
+  var dismissedWithKeyboardRef = React.useRef(false);
+  var dir = react_shared_contexts_1.useFluent().dir;
+  var innerRef = React.useRef(null);
+  var state = tslib_1.__assign(tslib_1.__assign({
+    hasSubmenu: hasSubmenu
+  }, props), {
+    components: {
+      root: 'div',
+      icon: 'span',
+      checkmark: 'span',
+      submenuIndicator: 'span',
+      content: 'span',
+      secondaryContent: 'span'
+    },
+    root: react_utilities_1.getNativeElementProps('div', tslib_1.__assign({
+      ref: react_utilities_1.useMergedRefs(ref, innerRef),
+      role: 'menuitem',
+      tabIndex: 0,
+      'aria-disabled': props.disabled
+    }, props)),
+    icon: react_utilities_1.resolveShorthand(props.icon, {
+      required: hasIcons
+    }),
+    checkmark: react_utilities_1.resolveShorthand(props.checkmark, {
+      required: hasCheckmarks
+    }),
+    submenuIndicator: react_utilities_1.resolveShorthand(props.submenuIndicator, {
+      required: hasSubmenu,
+      defaultProps: {
+        children: dir === 'ltr' ? React.createElement(react_icons_1.ChevronRight20Regular, null) : React.createElement(react_icons_1.ChevronLeft20Regular, null)
+      }
+    }),
+    content: react_utilities_1.resolveShorthand(props.content, {
+      required: true,
+      defaultProps: {
+        children: props.children
+      }
+    }),
+    secondaryContent: react_utilities_1.resolveShorthand(props.secondaryContent)
+  });
+  var _a = state.root,
+      onClickOriginal = _a.onClick,
+      onKeyDownOriginal = _a.onKeyDown;
+  state.root.onKeyDown = function (e) {
+    var _a;
+    if (react_utilities_1.shouldPreventDefaultOnKeyDown(e)) {
+      if (state.disabled) {
+        e.preventDefault();
+        e.stopPropagation();
+        return;
+      }
+      dismissedWithKeyboardRef.current = true;
+      e.preventDefault();
+      (_a = e.target) === null || _a === void 0 ? void 0 : _a.click();
+    }
+    onKeyDownOriginal === null || onKeyDownOriginal === void 0 ? void 0 : onKeyDownOriginal(e);
+  };
+  state.root.onClick = function (e) {
+    if (state.disabled) {
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+    var shouldPersist = persistOnClickContext; // prop wins over context;
+    if (state.persistOnClick !== undefined && persistOnClickContext !== state.persistOnClick) {
+      shouldPersist = state.persistOnClick;
+    }
+    if (!hasSubmenu && !shouldPersist) {
+      setOpen(e, {
+        open: false,
+        keyboard: dismissedWithKeyboardRef.current,
+        bubble: true
+      });
+      dismissedWithKeyboardRef.current = false;
+    }
+    onClickOriginal === null || onClickOriginal === void 0 ? void 0 : onClickOriginal(e);
+  };
+  var onMouseEnterOriginal = state.root.onMouseEnter;
+  state.root.onMouseEnter = react_utilities_1.useEventCallback(function (e) {
+    var _a;
+    (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    onMouseEnterOriginal === null || onMouseEnterOriginal === void 0 ? void 0 : onMouseEnterOriginal(e);
+  });
+  useCharacterSearch_1.useCharacterSearch(state, innerRef);
+  return state;
 };
+exports.useMenuItem = useMenuItem;
 //# sourceMappingURL=useMenuItem.js.map

package/lib-commonjs/components/MenuItem/useMenuItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"~~file":"useMenuItem.js","sourceRoot":"../src/","~~sources":["components/MenuItem/useMenuItem.tsx"],"names":[],"mappings":";;AAAA,~~6BAA+B;AAC/B~~,~~6DAMmC;AAEnC~~,~~2DAA0D;AAC1D~~,~~wEAA0E;AAC1E~~,~~yDAA4D;AAC5D~~,~~kEAAoE;AAEpE~~;;~~GAEG;AACU~~,~~QAAA~~,~~sBAAsB~~,~~GAAG~~,~~CAAC~~,~~MAAM~~,~~EAAE~~,~~kBAAkB~~,~~EAAE~~,~~SAAS~~,~~EAAE~~,~~kBAAkB~~,~~EAAE~~,~~WAAW~~,~~CAAU~~,~~CAAC;AAExH~~,~~mDAAmD;AACnD~~,~~IAAM~~,~~UAAU~~,~~GAAG~~,~~sCAAoB~~,~~CAAgB~~,~~EAAE~~,~~SAAS~~,~~EAAE~~,~~8BAAsB~~,~~EAAE~~,~~CAAC~~,~~CAAC~~;~~AAE9F~~;;~~GAEG;~~AACU,~~QAAA~~,~~WAAW~~,~~GAAG~~,~~UACzB~~,~~KAAoB~~,~~EACpB~~,~~GAA2B~~,~~EAC3B~~,~~YAA4B~~;~~IAE5B~~,IAAM,UAAU,GAAG,~~0CAAqB~~,~~EAAE~~,~~CAAC~~;~~IAC3C~~,~~IAAM~~,QAAQ,GAAG,~~oCAAkB~~,~~CAAC~~,~~UAAA~~,~~OAAO~~,~~IAAI~~,OAAA,~~OAAO~~,~~CAAC~~,~~QAAQ~~,~~EAAhB~~,~~CAAgB~~,~~CAAC~~,~~CAAC~~;~~IACjE~~,~~IAAM~~,aAAa,GAAG,~~oCAAkB~~,~~CAAC~~,UAAA,OAAO,~~IAAI~~,~~OAAA~~,OAAO,~~CAAC~~,~~aAAa~~,~~EAArB~~,~~CAAqB~~,~~CAAC~~,~~CAAC~~;~~IAE3E~~,~~IAAM~~,~~KAAK~~,GAAG,~~UAAU~~,~~CACtB~~;~~QACE~~,GAAG,~~EAAE,+BAAa~~,CAAC,GAAG,~~EAAE~~,KAAK,CAAC,MAAM,~~CAAC~~,IAAI,~~CAAC~~,~~CAAC~~;~~QAC3C~~,IAAI,EAAE,EAAE,EAAE,EAAE,~~MAAM~~,EAAE,~~QAAQ~~,EAAE,~~QAAQ~~,~~CAAC~~,~~CAAC~~,~~CAAC~~,~~EAAE~~,~~CAAC~~,~~CAAC~~,~~CAAC~~,~~SAAS~~,~~EAAE~~;~~QACzD~~,~~SAAS~~,~~EAAE~~,EAAE,~~EAAE~~,~~EAAE~~,~~MAAM~~,EAAE,QAAQ,EAAE,~~aAAa~~,~~CAAC~~,~~CAAC~~,CAAC,~~EAAE~~,~~CAAC~~,~~CAAC~~,~~CAAC~~,~~SAAS,EAAE~~;~~QACnE~~,~~gBAAgB~~,~~EAAE~~,EAAE,~~EAAE~~,~~EAAE~~,~~MAAM~~,~~EAAE~~,~~QAAQ~~,~~EAAE~~,~~oBAAC,+BAAgB~~,~~OAAG~~,EAAE;~~QAChE~~,~~OAAO~~,~~EAAE~~,~~EAAE~~,~~EAAE~~,EAAE,~~MAAM~~,~~EAAE~~,~~QAAQ~~,~~EAAE~~,KAAK,CAAC,QAAQ,EAAE;~~QACjD~~,gBAAgB,EAAE,~~EAAE~~,~~EAAE~~,~~EAAE~~,~~MAAM~~,~~EAAE~~;~~QAChC~~,~~IAAI~~,EAAE,~~UAAU~~;~~QAChB~~,QAAQ,EAAE,CAAC;~~QACX~~,~~UAAU~~,~~YAAA~~;~~QACV~~,~~eAAe~~,EAAE,KAAK,CAAC,~~QAAQ~~;~~QAC/B~~,~~KAAK~~,~~EAAE~~,EAAE,~~GAAG~~,~~EAAE~~,~~MAAM~~,EAAE;~~KACvB~~,~~EACD~~,~~YAAY~~,~~IAAI~~,~~uCAAqB~~,CAAC,~~YAAY~~,EAAE,~~8BAAsB~~,~~CAAC~~,~~EAC3E~~,~~uCAAqB~~,CAAC,~~KAAK~~,~~EAAE~~,~~8BAAsB~~,~~CAAC~~,~~CACrD~~,CAAC;~~IAEM~~,~~IAAA,+BAAwB~~,~~EAAE~~,~~mCAA4B~~,~~CAAW~~;~~IACzE~~,~~KAAK~~,~~CAAC~~,~~SAAS~~,~~GAAG~~,~~UAAC~~,~~CAAmC~~;;~~QACpD~~,~~IAAI,+CAA6B~~,~~CAAC~~,CAAC,~~CAAC~~,~~EAAE~~;~~YACpC~~,~~IAAI~~,KAAK,CAAC,~~QAAQ~~,~~EAAE~~;~~gBAClB~~,CAAC,CAAC,~~cAAc~~,~~EAAE~~,CAAC~~;gBACnB~~,CAAC,~~CAAC~~,~~eAAe~~,~~EAAE~~,CAAC~~;gBACpB~~,~~OAAO~~;~~aACR;YAED~~,CAAC,CAAC,~~cAAc~~,~~EAAE~~,~~CAAC;YACnB~~,~~MAAC~~,CAAC,CAAC,~~MAAsB~~,~~0CAAE~~,~~KAAK~~,~~GAAG~~;~~SACpC;QAED~~,~~MAAA~~,iBAAiB,~~0CAAG~~,CAAC,~~EAAE~~;~~IACzB~~,CAAC,CAAC;~~IAEF~~,~~KAAK~~,CAAC,~~OAAO~~,GAAG,~~UAAC~~,~~CAAgC~~;;~~QAC/C~~,~~IAAI~~,KAAK,CAAC,~~QAAQ~~,~~EAAE;YAClB~~,~~CAAC~~,~~CAAC~~,~~cAAc~~,~~EAAE~~,CAAC;~~YACnB~~,CAAC,CAAC,~~eAAe~~,~~EAAE~~,CAAC;~~YACpB~~,OAAO;~~SACR~~;~~QAED~~,~~MAAA~~,~~eAAe~~,~~0CAAG~~,CAAC,EAAE;~~IACvB~~,CAAC,~~CAAC~~;~~IAEM~~,IAAA,~~yCAAkC~~,~~CAAW~~;~~IACrD~~,~~KAAK~~,~~CAAC~~,~~YAAY~~,~~GAAG~~,~~kCAAgB~~,CAAC,~~UAAC~~,~~CAAgC;;QACrE~~,~~MAAA~~,KAAK,CAAC,~~GAAG~~,CAAC,~~OAAO~~,~~0CAAE~~,~~KAAK~~,~~GAAG~~;~~QAE3B~~,~~MAAA~~,oBAAoB,~~0CAAG~~,~~CAAC~~,~~EAAE;IAC5B~~,~~CAAC~~,~~CAAC~~,~~CAAC;IAEH~~,~~uCAAkB~~,~~CAAC~~,~~KAAK~~,~~CAAC~~,~~CAAC~~;~~IAC1B~~,~~OAAO~~,~~KAAK~~,~~CAAC~~;~~AACf~~,~~CAAC~~,~~CAAC~~","sourcesContent":["import * as React from 'react';\nimport {\n ~~makeMergePropsCompat~~,\n ~~resolveShorthandProps~~,\n ~~useMergedRefs~~,\n ~~useEventCallback~~,\n ~~shouldPreventDefaultOnKeyDown~~,\n} from '@fluentui/react-utilities';\nimport { ~~MenuItemProps,~~ ~~MenuItemState~~ } from '~~./MenuItem.types~~';\nimport { useCharacterSearch } from './useCharacterSearch';\nimport { useMenuTriggerContext } from '../../contexts/menuTriggerContext';\nimport { ChevronRightIcon } from '~~../../utils~~/~~DefaultIcons~~';\nimport { useMenuListContext } from '../../contexts/menuListContext';\n\n/*\n Consts listing which props are shorthand props.\n /\nexport const ~~menuItemShorthandProps~~ = ['icon', 'submenuIndicator', 'content', 'secondaryContent', 'checkmark'] ~~as const~~;\n\n~~// eslint-disable-next-line deprecation/deprecation\nconst mergeProps = makeMergePropsCompat<MenuItemState>({ deepMerge: menuItemShorthandProps });\n\n~~/\n Returns the props and state required to render the component\n */\nexport const useMenuItem = (\n props: MenuItemProps~~,\n~~ ref: React.Ref<HTMLElement~~>,\n defaultProps?: MenuItemProps,\n~~): MenuItemState => {\n const hasSubmenu = useMenuTriggerContext();\n const hasIcons = useMenuListContext(context => context.hasIcons);\n const hasCheckmarks = useMenuListContext(context => context.hasCheckmarks);\n\n const ~~state~~ = ~~mergeProps~~(\n ~~{\n ref:~~ ~~useMergedRefs~~(~~ref,~~ React.useRef(~~null~~)~~),\~~n ~~icon:~~ { ~~as:~~ ~~'span',~~ ~~children:~~ ~~hasIcons~~ ? '' : ~~undefined~~ },\n ~~checkmark~~: { as: 'span'~~, children~~: ~~hasCheckmarks ?~~ '' ~~: undefined }~~,\n submenuIndicator: ~~{ as:~~ 'span'~~, children: <ChevronRightIcon /> }~~,\n content: ~~{ as:~~ 'span'~~, children: props.children }~~,\n secondaryContent: ~~{ as~~: '~~span~~' },\n role: 'menuitem',\n tabIndex: 0,\n ~~hasSubmenu,\n~~ 'aria-disabled': props.disabled,\n ~~dummy~~: { ~~foo~~: ~~'xxx~~ ' },\n },\n ~~defaultProps~~ ~~&& resolveShorthandProps~~(~~defaultProps~~, ~~menuItemShorthandProps~~),\n ~~resolveShorthandProps~~(props, ~~menuItemShorthandProps~~),\n );\n\n const { onClick: onClickOriginal, onKeyDown: onKeyDownOriginal } = state;\n state.onKeyDown = (e: ~~React.KeyboardEvent<HTMLElement>)~~ => {\n if (shouldPreventDefaultOnKeyDown(e)) {\n if (state.disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n\n e.preventDefault();\n (e.target as HTMLElement)?.click();\n }\n\n onKeyDownOriginal?.(e);\n };\n\n state.onClick = (e: ~~React.MouseEvent<HTMLElement>)~~ => {\n if (state.disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n\n onClickOriginal?.(e);\n };\n\n const { onMouseEnter: onMouseEnterOriginal } = state;\n state.onMouseEnter = useEventCallback((e: ~~React.MouseEvent<HTMLElement>)~~ => {\n ~~state~~.~~ref.~~current?.focus();\n\n onMouseEnterOriginal?.(e);\n });\n\n useCharacterSearch(state);\n return state;\n};\n"]}
1	+ {"version":3,"sources":["components/MenuItem/useMenuItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n useEventCallback,\n shouldPreventDefaultOnKeyDown,\n resolveShorthand,\n useMergedRefs,\n getNativeElementProps,\n} from '@fluentui/react-utilities';\nimport { useFluent } from '@fluentui/react-shared-contexts';\nimport { useCharacterSearch } from './useCharacterSearch';\nimport { useMenuTriggerContext } from '../../contexts/menuTriggerContext';\nimport {\n ChevronRight20Regular as ChevronRightIcon,\n ChevronLeft20Regular as ChevronLeftIcon,\n} from '@fluentui/react-icons';\nimport { useMenuListContext } from '../../contexts/menuListContext';\nimport { useMenuContext } from '../../contexts/menuContext';\nimport type { MenuItemProps, MenuItemSlots, MenuItemState } from './MenuItem.types';\n\n/*\n Consts listing which props are shorthand props.\n /\nexport const menuItemSlots: Array<keyof MenuItemSlots> = [\n 'root',\n 'icon',\n 'submenuIndicator',\n 'content',\n 'secondaryContent',\n 'checkmark',\n];\n\n/\n Returns the props and state required to render the component\n */\nexport const useMenuItem = (props: MenuItemProps, ref: React.Ref<HTMLElement>): MenuItemState => {\n const hasSubmenu = useMenuTriggerContext();\n const hasIcons = useMenuListContext(context => context.hasIcons);\n const hasCheckmarks = useMenuListContext(context => context.hasCheckmarks);\n const setOpen = useMenuContext(context => context.setOpen);\n const persistOnClickContext = useMenuContext(context => context.persistOnItemClick);\n const dismissedWithKeyboardRef = React.useRef(false);\n\n const { dir } = useFluent();\n const innerRef = React.useRef<HTMLElement>(null);\n\n const state: MenuItemState = {\n hasSubmenu,\n ...props,\n components: {\n root: 'div',\n icon: 'span',\n checkmark: 'span',\n submenuIndicator: 'span',\n content: 'span',\n secondaryContent: 'span',\n },\n root: getNativeElementProps('div', {\n ref: useMergedRefs(ref, innerRef),\n role: 'menuitem',\n tabIndex: 0,\n 'aria-disabled': props.disabled,\n ...props,\n }),\n icon: resolveShorthand(props.icon, { required: hasIcons }),\n checkmark: resolveShorthand(props.checkmark, { required: hasCheckmarks }),\n submenuIndicator: resolveShorthand(props.submenuIndicator, {\n required: hasSubmenu,\n defaultProps: {\n children: dir === 'ltr' ? <ChevronRightIcon /> : <ChevronLeftIcon />,\n },\n }),\n content: resolveShorthand(props.content, { required: true, defaultProps: { children: props.children } }),\n secondaryContent: resolveShorthand(props.secondaryContent),\n };\n\n const { onClick: onClickOriginal, onKeyDown: onKeyDownOriginal } = state.root;\n state.root.onKeyDown = e => {\n if (shouldPreventDefaultOnKeyDown(e)) {\n if (state.disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n\n dismissedWithKeyboardRef.current = true;\n e.preventDefault();\n (e.target as HTMLElement)?.click();\n }\n\n onKeyDownOriginal?.(e);\n };\n\n state.root.onClick = e => {\n if (state.disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n\n let shouldPersist = persistOnClickContext;\n // prop wins over context;\n if (state.persistOnClick !== undefined && persistOnClickContext !== state.persistOnClick) {\n shouldPersist = state.persistOnClick;\n }\n\n if (!hasSubmenu && !shouldPersist) {\n setOpen(e, { open: false, keyboard: dismissedWithKeyboardRef.current, bubble: true });\n dismissedWithKeyboardRef.current = false;\n }\n\n onClickOriginal?.(e);\n };\n\n const { onMouseEnter: onMouseEnterOriginal } = state.root;\n state.root.onMouseEnter = useEventCallback(e => {\n innerRef.current?.focus();\n\n onMouseEnterOriginal?.(e);\n });\n\n useCharacterSearch(state, innerRef);\n return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/MenuItem/useMenuItemStyles.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
-import { MenuItemState } from './MenuItem.types';
+import type { MenuItemState } from './MenuItem.types';
 /** Applies style classnames to slots */
 export declare const useMenuItemStyles: (state: MenuItemState) => void;