@react-fabric/core 1.0.0-beta.21 → 1.0.0-beta.23

package/dist/cjs/components/menu/Menu.js

@@ -10,13 +10,12 @@ var react$1 = require('react');
 var icons = require('../../types/icons.js');
 var nodeCheck = require('../../utils/nodeCheck.js');
 var MenuItem = require('./MenuItem.js');
+var HotKeyWrapper = require('../../hotkeys/HotKeyWrapper.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 var _excluded = ["children", "minimal", "menuClassName", "onClick", "ref"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-// FIXME: refactor menu implementation to differentiate between static and floating menus, implement context wrapper for each menu level
-
 var MenuComponent = function MenuComponent(_ref) {
   var _refs$domReference$cu, _refs$domReference$cu2;
   var children = _ref.children,
@@ -165,33 +164,35 @@ var MenuComponent = function MenuComponent(_ref) {
       elementsRef: elementsRef,
       labelsRef: labelsRef,
       children: (!isNested || isOpen) && /*#__PURE__*/jsxRuntime.jsxs(Wrapper, _objectSpread(_objectSpread({}, wrapperProps), {}, {
-        children: [isNested && /*#__PURE__*/jsxRuntime.jsx(react.FloatingOverlay, {}), /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
-          context: context,
-          modal: !isNested,
-          initialFocus: isNested ? -1 : 0,
-          returnFocus: !isNested,
-          children: /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
-            className: classNames(menuClassName, "flex flex-col bg-base p-1 menu-list", isNested && "outline shadow-lg rounded-capped max-h-96 overflow-auto scroll-thin z-[var(--z-popover)]"),
-            autoFocus: true,
-            ref: utilities.mergeRefs(isNested ? refs.setFloating : ref)
-          }, getFloatingProps({
-            onClick: isNested ? undefined : handleClick
-          })), {}, {
-            style: !isNested ? rest.style : floatingStyles,
-            children: utilities.cloneChildren(children, function (child, index) {
-              labelsRef.current[index] = child.props.label;
-              return /*#__PURE__*/react$1.cloneElement(child, nodeCheck.nodeCheck(child, MenuItem.MenuItem, Menu, MenuComponent) ? _objectSpread({
-                minimal: !isNested && minimal,
-                "data-focus": activeIndex === index,
-                ref: function ref(el) {
-                  return elementsRef.current[index] = el;
-                }
-              }, getItemProps({
-                onClick: child.props.onClick,
-                tabIndex: activeIndex === index ? 0 : -1
-              })) : {});
-            })
-          }))
+        children: [isNested && /*#__PURE__*/jsxRuntime.jsx(react.FloatingOverlay, {}), /*#__PURE__*/jsxRuntime.jsx(HotKeyWrapper.HotKeyWrapper, {
+          children: /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
+            context: context,
+            modal: !isNested,
+            initialFocus: isNested ? -1 : 0,
+            returnFocus: !isNested,
+            children: /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
+              className: classNames(menuClassName, "flex flex-col bg-base p-1 menu-list", isNested && "outline shadow-lg rounded-capped max-h-96 overflow-auto scroll-thin z-[var(--z-popover)]"),
+              autoFocus: true,
+              ref: utilities.mergeRefs(isNested ? refs.setFloating : ref)
+            }, getFloatingProps({
+              onClick: isNested ? undefined : handleClick
+            })), {}, {
+              style: !isNested ? rest.style : floatingStyles,
+              children: utilities.cloneChildren(children, function (child, index) {
+                labelsRef.current[index] = child.props.label;
+                return /*#__PURE__*/react$1.cloneElement(child, nodeCheck.nodeCheck(child, MenuItem.MenuItem, Menu, MenuComponent) ? _objectSpread({
+                  minimal: !isNested && minimal,
+                  "data-focus": activeIndex === index,
+                  ref: function ref(el) {
+                    return elementsRef.current[index] = el;
+                  }
+                }, getItemProps({
+                  onClick: child.props.onClick,
+                  tabIndex: activeIndex === index ? 0 : -1
+                })) : {});
+              })
+            }))
+          })
         })]
       }))
     })]

package/dist/cjs/components/menu/MenuItem.js

@@ -2,20 +2,21 @@
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var react = require('@floating-ui/react');
+var react$1 = require('@floating-ui/react');
 var utilities = require('@react-fabric/utilities');
 var classNames = require('classnames');
-var react$1 = require('react');
+var react = require('react');
+var HotKey = require('../../hotkeys/HotKey.js');
 var HotKeyLabel = require('../../hotkeys/HotKeyLabel.js');
 require('@babel/runtime/helpers/slicedToArray');
 require('react-i18next');
 require('../../hooks/useEffectDebugger.js');
 var jsxRuntime = require('react/jsx-runtime');
-require('../../hotkeys/HotKeyWrapper.js');
 var Tooltip = require('../../overlays/tooltip/Tooltip.js');
 var Badge = require('../badge/Badge.js');
 var Icon = require('../icon/Icon.js');
 require('../../types/icons.js');
+require('../../hotkeys/HotKeyWrapper.js');
 var Menu_module = require('./Menu.module.css');
 
 var _excluded = ["as", "label", "color", "className", "icon", "iconBg", "iconColor", "appendLabel", "rtlFlip", "altIcon", "id", "active", "disabled", "onClick", "badge", "hotKey", "minimal", "data-open", "ref"],
@@ -44,11 +45,12 @@ var MenuItem = function MenuItem(_ref) {
     childOpen = _ref["data-open"],
     ref = _ref.ref,
     aria = _objectWithoutProperties(_ref, _excluded);
-  var tree = react.useFloatingTree();
-  var badgeProps = react$1.useMemo(function () {
+  var elRef = react.useRef(null);
+  var tree = react$1.useFloatingTree();
+  var badgeProps = react.useMemo(function () {
     return Badge.getBadgeProps(badge);
   }, [badge]);
-  var iconEl = react$1.useMemo(function () {
+  var iconEl = react.useMemo(function () {
     var _path;
     var path = icon;
     if (minimal && !path) {
@@ -62,7 +64,7 @@ var MenuItem = function MenuItem(_ref) {
       rtlFlip: rtlFlip
     });
   }, [icon, iconBg, iconColor, rtlFlip, minimal, label]);
-  var Wrapper = react$1.useCallback(function (_ref2) {
+  var Wrapper = react.useCallback(function (_ref2) {
     var children = _ref2.children,
       rest = _objectWithoutProperties(_ref2, _excluded2);
     return minimal ? /*#__PURE__*/jsxRuntime.jsx(Tooltip.Tooltip, _objectSpread(_objectSpread({
@@ -71,11 +73,11 @@ var MenuItem = function MenuItem(_ref) {
       disabled: childOpen
     }, rest), {}, {
       children: children
-    })) : /*#__PURE__*/jsxRuntime.jsx(react$1.Fragment, {
+    })) : /*#__PURE__*/jsxRuntime.jsx(react.Fragment, {
       children: children
     });
   }, [minimal, label, childOpen]);
-  var menuLabel = react$1.useMemo(function () {
+  var menuLabel = react.useMemo(function () {
     return /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "flex flex-nowrap text-start items-center",
       children: [iconEl, !minimal && /*#__PURE__*/jsxRuntime.jsx("label", {
@@ -98,8 +100,8 @@ var MenuItem = function MenuItem(_ref) {
   }, [iconEl, minimal, appendLabel, label, badge, badgeProps, hotKey, active]);
   var E = as !== null && as !== void 0 ? as : "button";
   return /*#__PURE__*/jsxRuntime.jsx(Wrapper, _objectSpread(_objectSpread({}, aria), {}, {
-    children: /*#__PURE__*/jsxRuntime.jsx(E, _objectSpread(_objectSpread({
-      ref: ref,
+    children: /*#__PURE__*/jsxRuntime.jsxs(E, _objectSpread(_objectSpread({
+      ref: utilities.mergeRefs(ref, elRef),
       "data-dropdown-dismiss": true,
       "data-color": color,
       className: classNames(Menu_module.menuItem, className, active && Menu_module.active, minimal && Menu_module.minimal, disabled && Menu_module.disabled, "rounded-capped relative max-w-[50vw] my-0.5"),
@@ -111,7 +113,13 @@ var MenuItem = function MenuItem(_ref) {
         (_onClick === null || _onClick === void 0 ? void 0 : _onClick(e)) !== false && (tree === null || tree === void 0 ? void 0 : tree.events.emit("click"));
       }
     }, minimal ? {} : aria), {}, {
-      children: menuLabel
+      children: [hotKey && /*#__PURE__*/jsxRuntime.jsx(HotKey.HotKey, {
+        keyCombo: hotKey,
+        handler: function handler() {
+          var _elRef$current, _elRef$current$click;
+          return (_elRef$current = elRef.current) === null || _elRef$current === void 0 || (_elRef$current$click = _elRef$current.click) === null || _elRef$current$click === void 0 ? void 0 : _elRef$current$click.call(_elRef$current);
+        }
+      }), menuLabel]
     }))
   }));
 };

package/dist/cjs/index.js

@@ -73,6 +73,7 @@ var useResizeObserver = require('./hooks/useResizeObserver.js');
 var useStorage = require('./hooks/useStorage.js');
 var HotKey = require('./hotkeys/HotKey.js');
 var HotKeyLabel = require('./hotkeys/HotKeyLabel.js');
+var HotKeyWrapper = require('./hotkeys/HotKeyWrapper.js');
 var Global = require('./context/Global.js');
 
 
@@ -158,6 +159,7 @@ exports.useLocalStorage = useStorage.useLocalStorage;
 exports.useSessionStorage = useStorage.useSessionStorage;
 exports.HotKey = HotKey.HotKey;
 exports.HotKeyLabel = HotKeyLabel.HotKeyLabel;
+exports.HotKeyWrapper = HotKeyWrapper.HotKeyWrapper;
 exports.ApplicationProvider = Global.ApplicationProvider;
 exports.useApplicationContext = Global.useApplicationContext;
 exports.useGlobals = Global.useGlobals;

package/dist/cjs/overlays/tooltip/Tooltip.js

@@ -118,7 +118,7 @@ var Tooltip = function Tooltip(_ref) {
         style: floatingStyles
       }, getFloatingProps()), {}, {
         children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-          className: classNames("font-medium text-dimmed flex-1", utilities.isString(content) && "whitespace-pre-wrap mixed-lang"),
+          className: classNames("font-medium text-dimmed flex-1 break-all", utilities.isString(content) && "whitespace-pre-wrap mixed-lang"),
           children: content
         }), copyEl, /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingArrow, {
           ref: arrowRef,

package/dist/esm/components/menu/Menu.js

@@ -10,13 +10,12 @@ import { useState, useRef, useEffect, useCallback, cloneElement, Fragment } from
 import { CoreIcons } from '../../types/icons.js';
 import { nodeCheck } from '../../utils/nodeCheck.js';
 import { MenuItem } from './MenuItem.js';
+import { HotKeyWrapper } from '../../hotkeys/HotKeyWrapper.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var _excluded = ["children", "minimal", "menuClassName", "onClick", "ref"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-// FIXME: refactor menu implementation to differentiate between static and floating menus, implement context wrapper for each menu level
-
 var MenuComponent = function MenuComponent(_ref) {
   var _refs$domReference$cu, _refs$domReference$cu2;
   var children = _ref.children,
@@ -165,33 +164,35 @@ var MenuComponent = function MenuComponent(_ref) {
       elementsRef: elementsRef,
       labelsRef: labelsRef,
       children: (!isNested || isOpen) && /*#__PURE__*/jsxs(Wrapper, _objectSpread(_objectSpread({}, wrapperProps), {}, {
-        children: [isNested && /*#__PURE__*/jsx(FloatingOverlay, {}), /*#__PURE__*/jsx(FloatingFocusManager, {
-          context: context,
-          modal: !isNested,
-          initialFocus: isNested ? -1 : 0,
-          returnFocus: !isNested,
-          children: /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
-            className: classNames(menuClassName, "flex flex-col bg-base p-1 menu-list", isNested && "outline shadow-lg rounded-capped max-h-96 overflow-auto scroll-thin z-[var(--z-popover)]"),
-            autoFocus: true,
-            ref: mergeRefs(isNested ? refs.setFloating : ref)
-          }, getFloatingProps({
-            onClick: isNested ? undefined : handleClick
-          })), {}, {
-            style: !isNested ? rest.style : floatingStyles,
-            children: cloneChildren(children, function (child, index) {
-              labelsRef.current[index] = child.props.label;
-              return /*#__PURE__*/cloneElement(child, nodeCheck(child, MenuItem, Menu, MenuComponent) ? _objectSpread({
-                minimal: !isNested && minimal,
-                "data-focus": activeIndex === index,
-                ref: function ref(el) {
-                  return elementsRef.current[index] = el;
-                }
-              }, getItemProps({
-                onClick: child.props.onClick,
-                tabIndex: activeIndex === index ? 0 : -1
-              })) : {});
-            })
-          }))
+        children: [isNested && /*#__PURE__*/jsx(FloatingOverlay, {}), /*#__PURE__*/jsx(HotKeyWrapper, {
+          children: /*#__PURE__*/jsx(FloatingFocusManager, {
+            context: context,
+            modal: !isNested,
+            initialFocus: isNested ? -1 : 0,
+            returnFocus: !isNested,
+            children: /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
+              className: classNames(menuClassName, "flex flex-col bg-base p-1 menu-list", isNested && "outline shadow-lg rounded-capped max-h-96 overflow-auto scroll-thin z-[var(--z-popover)]"),
+              autoFocus: true,
+              ref: mergeRefs(isNested ? refs.setFloating : ref)
+            }, getFloatingProps({
+              onClick: isNested ? undefined : handleClick
+            })), {}, {
+              style: !isNested ? rest.style : floatingStyles,
+              children: cloneChildren(children, function (child, index) {
+                labelsRef.current[index] = child.props.label;
+                return /*#__PURE__*/cloneElement(child, nodeCheck(child, MenuItem, Menu, MenuComponent) ? _objectSpread({
+                  minimal: !isNested && minimal,
+                  "data-focus": activeIndex === index,
+                  ref: function ref(el) {
+                    return elementsRef.current[index] = el;
+                  }
+                }, getItemProps({
+                  onClick: child.props.onClick,
+                  tabIndex: activeIndex === index ? 0 : -1
+                })) : {});
+              })
+            }))
+          })
         })]
       }))
     })]

package/dist/esm/components/menu/MenuItem.js

@@ -3,19 +3,20 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { useFloatingTree } from '@floating-ui/react';
-import { iconToken } from '@react-fabric/utilities';
+import { iconToken, mergeRefs } from '@react-fabric/utilities';
 import classNames from 'classnames';
-import { useMemo, useCallback, Fragment } from 'react';
+import { useRef, useMemo, useCallback, Fragment } from 'react';
+import { HotKey } from '../../hotkeys/HotKey.js';
 import { HotKeyLabel } from '../../hotkeys/HotKeyLabel.js';
 import '@babel/runtime/helpers/slicedToArray';
 import 'react-i18next';
 import '../../hooks/useEffectDebugger.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import '../../hotkeys/HotKeyWrapper.js';
 import { Tooltip } from '../../overlays/tooltip/Tooltip.js';
 import { getBadgeProps, Badge } from '../badge/Badge.js';
 import { Icon } from '../icon/Icon.js';
 import '../../types/icons.js';
+import '../../hotkeys/HotKeyWrapper.js';
 import classes from './Menu.module.css';
 
 var _excluded = ["as", "label", "color", "className", "icon", "iconBg", "iconColor", "appendLabel", "rtlFlip", "altIcon", "id", "active", "disabled", "onClick", "badge", "hotKey", "minimal", "data-open", "ref"],
@@ -44,6 +45,7 @@ var MenuItem = function MenuItem(_ref) {
     childOpen = _ref["data-open"],
     ref = _ref.ref,
     aria = _objectWithoutProperties(_ref, _excluded);
+  var elRef = useRef(null);
   var tree = useFloatingTree();
   var badgeProps = useMemo(function () {
     return getBadgeProps(badge);
@@ -98,8 +100,8 @@ var MenuItem = function MenuItem(_ref) {
   }, [iconEl, minimal, appendLabel, label, badge, badgeProps, hotKey, active]);
   var E = as !== null && as !== void 0 ? as : "button";
   return /*#__PURE__*/jsx(Wrapper, _objectSpread(_objectSpread({}, aria), {}, {
-    children: /*#__PURE__*/jsx(E, _objectSpread(_objectSpread({
-      ref: ref,
+    children: /*#__PURE__*/jsxs(E, _objectSpread(_objectSpread({
+      ref: mergeRefs(ref, elRef),
       "data-dropdown-dismiss": true,
       "data-color": color,
       className: classNames(classes.menuItem, className, active && classes.active, minimal && classes.minimal, disabled && classes.disabled, "rounded-capped relative max-w-[50vw] my-0.5"),
@@ -111,7 +113,13 @@ var MenuItem = function MenuItem(_ref) {
         (_onClick === null || _onClick === void 0 ? void 0 : _onClick(e)) !== false && (tree === null || tree === void 0 ? void 0 : tree.events.emit("click"));
       }
     }, minimal ? {} : aria), {}, {
-      children: menuLabel
+      children: [hotKey && /*#__PURE__*/jsx(HotKey, {
+        keyCombo: hotKey,
+        handler: function handler() {
+          var _elRef$current, _elRef$current$click;
+          return (_elRef$current = elRef.current) === null || _elRef$current === void 0 || (_elRef$current$click = _elRef$current.click) === null || _elRef$current$click === void 0 ? void 0 : _elRef$current$click.call(_elRef$current);
+        }
+      }), menuLabel]
     }))
   }));
 };

package/dist/esm/index.js

@@ -73,4 +73,5 @@ export { useResizeObserver } from './hooks/useResizeObserver.js';
 export { useLocalStorage, useSessionStorage } from './hooks/useStorage.js';
 export { HotKey } from './hotkeys/HotKey.js';
 export { HotKeyLabel } from './hotkeys/HotKeyLabel.js';
+export { HotKeyWrapper } from './hotkeys/HotKeyWrapper.js';
 export { ApplicationProvider, useApplicationContext, useGlobals, useNotificationService } from './context/Global.js';

package/dist/esm/overlays/tooltip/Tooltip.js

@@ -118,7 +118,7 @@ var Tooltip = function Tooltip(_ref) {
         style: floatingStyles
       }, getFloatingProps()), {}, {
         children: [/*#__PURE__*/jsx("span", {
-          className: classNames("font-medium text-dimmed flex-1", isString(content) && "whitespace-pre-wrap mixed-lang"),
+          className: classNames("font-medium text-dimmed flex-1 break-all", isString(content) && "whitespace-pre-wrap mixed-lang"),
           children: content
         }), copyEl, /*#__PURE__*/jsx(FloatingArrow, {
           ref: arrowRef,

package/dist/types/index.d.ts

@@ -15,6 +15,7 @@ export * from "./hooks/useResizeObserver";
 export * from "./hooks/useStorage";
 export { HotKey } from "./hotkeys/HotKey";
 export { HotKeyLabel } from "./hotkeys/HotKeyLabel";
+export { HotKeyWrapper } from "./hotkeys/HotKeyWrapper";
 export { type ModalProps } from "./types";
 export { CoreIcons } from "./types/icons";
 export { ApplicationProvider, useApplicationContext, useGlobals, useNotificationService, } from "./context/Global";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/core",
-  "version": "1.0.0-beta.21",
+  "version": "1.0.0-beta.23",
   "description": "RUF: Core package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.26.24",
-    "@react-fabric/utilities": "^1.0.0-beta.21",
+    "@react-fabric/utilities": "^1.0.0-beta.23",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.13",
@@ -56,5 +56,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "31c3d5c19bce7df519a62bd43efd1c9e6341be04"
+  "gitHead": "96cac942a837ec03886660d398de74b8bcb2dbac"
 }

package/src/components/menu/Menu.tsx

@@ -59,6 +59,7 @@ import { CoreIcons } from "../../types/icons";
 import { nodeCheck } from "../../utils";
 import { MenuItem } from "./MenuItem";
 import { type MenuProps } from "./types";
+import { HotKeyWrapper } from "../../hotkeys/HotKeyWrapper";
 
 // FIXME: refactor menu implementation to differentiate between static and floating menus, implement context wrapper for each menu level
 
@@ -219,47 +220,49 @@ const MenuComponent = ({
         {(!isNested || isOpen) && (
           <Wrapper {...wrapperProps}>
             {isNested && <FloatingOverlay />}
-            <FloatingFocusManager
-              context={context}
-              modal={!isNested}
-              initialFocus={isNested ? -1 : 0}
-              returnFocus={!isNested}
-            >
-              <div
-                className={classNames(
-                  menuClassName,
-                  "flex flex-col bg-base p-1 menu-list",
-                  isNested &&
-                    "outline shadow-lg rounded-capped max-h-96 overflow-auto scroll-thin z-[var(--z-popover)]",
-                )}
-                autoFocus
-                ref={mergeRefs(isNested ? refs.setFloating : ref)}
-                {...getFloatingProps({
-                  onClick: isNested ? undefined : handleClick,
-                })}
-                // @ts-expect-error ignore
-                {...{ style: !isNested ? rest.style : floatingStyles }}
+            <HotKeyWrapper>
+              <FloatingFocusManager
+                context={context}
+                modal={!isNested}
+                initialFocus={isNested ? -1 : 0}
+                returnFocus={!isNested}
               >
-                {cloneChildren(children, (child: AnyObject, index) => {
-                  labelsRef.current[index] = child.props.label;
-                  return cloneElement(
-                    child,
-                    nodeCheck(child, MenuItem, Menu, MenuComponent)
-                      ? {
-                          minimal: !isNested && minimal,
-                          "data-focus": activeIndex === index,
-                          ref: (el: HTMLElement) =>
-                            (elementsRef.current[index] = el),
-                          ...getItemProps({
-                            onClick: child.props.onClick,
-                            tabIndex: activeIndex === index ? 0 : -1,
-                          }),
-                        }
-                      : {},
-                  );
-                })}
-              </div>
-            </FloatingFocusManager>
+                <div
+                  className={classNames(
+                    menuClassName,
+                    "flex flex-col bg-base p-1 menu-list",
+                    isNested &&
+                      "outline shadow-lg rounded-capped max-h-96 overflow-auto scroll-thin z-[var(--z-popover)]",
+                  )}
+                  autoFocus
+                  ref={mergeRefs(isNested ? refs.setFloating : ref)}
+                  {...getFloatingProps({
+                    onClick: isNested ? undefined : handleClick,
+                  })}
+                  // @ts-expect-error ignore
+                  {...{ style: !isNested ? rest.style : floatingStyles }}
+                >
+                  {cloneChildren(children, (child: AnyObject, index) => {
+                    labelsRef.current[index] = child.props.label;
+                    return cloneElement(
+                      child,
+                      nodeCheck(child, MenuItem, Menu, MenuComponent)
+                        ? {
+                            minimal: !isNested && minimal,
+                            "data-focus": activeIndex === index,
+                            ref: (el: HTMLElement) =>
+                              (elementsRef.current[index] = el),
+                            ...getItemProps({
+                              onClick: child.props.onClick,
+                              tabIndex: activeIndex === index ? 0 : -1,
+                            }),
+                          }
+                        : {},
+                    );
+                  })}
+                </div>
+              </FloatingFocusManager>
+            </HotKeyWrapper>
           </Wrapper>
         )}
       </FloatingList>

package/src/components/menu/MenuItem.tsx

@@ -22,9 +22,10 @@
  */
 
 import { useFloatingTree } from "@floating-ui/react";
-import { iconToken } from "@react-fabric/utilities";
+import { iconToken, mergeRefs } from "@react-fabric/utilities";
 import classNames from "classnames";
-import { Fragment, useCallback, useMemo } from "react";
+import { Fragment, useCallback, useMemo, useRef } from "react";
+import { HotKey } from "../../hotkeys/HotKey";
 import { HotKeyLabel } from "../../hotkeys/HotKeyLabel";
 import { Tooltip } from "../../overlays";
 import { type PolymorphicProps } from "../../types";
@@ -58,6 +59,7 @@ export const MenuItem = <Tag extends React.ElementType = "button">({
   ref,
   ...aria
 }: MenuItemProps & PolymorphicProps<Tag>) => {
+  const elRef = useRef<HTMLElement>(null);
   const tree = useFloatingTree();
   const badgeProps = useMemo(() => {
     return getBadgeProps(badge);
@@ -135,7 +137,7 @@ export const MenuItem = <Tag extends React.ElementType = "button">({
   return (
     <Wrapper {...aria}>
       <E
-        ref={ref}
+        ref={mergeRefs(ref, elRef)}
         data-dropdown-dismiss
         data-color={color}
         className={classNames(
@@ -155,6 +157,9 @@ export const MenuItem = <Tag extends React.ElementType = "button">({
         }}
         {...(minimal ? {} : aria)}
       >
+        {hotKey && (
+          <HotKey keyCombo={hotKey} handler={() => elRef.current?.click?.()} />
+        )}
         {menuLabel}
       </E>
     </Wrapper>

package/src/index.ts

@@ -40,6 +40,7 @@ export * from "./hooks/useStorage";
 
 export { HotKey } from "./hotkeys/HotKey";
 export { HotKeyLabel } from "./hotkeys/HotKeyLabel";
+export { HotKeyWrapper } from "./hotkeys/HotKeyWrapper";
 
 export { type ModalProps } from "./types";
 export { CoreIcons } from "./types/icons";

package/src/overlays/tooltip/Tooltip.tsx

@@ -184,7 +184,7 @@ export const Tooltip = ({
           >
             <span
               className={classNames(
-                "font-medium text-dimmed flex-1",
+                "font-medium text-dimmed flex-1 break-all",
                 isString(content) && "whitespace-pre-wrap mixed-lang",
               )}
             >