@react-fabric/core 1.0.0-beta.6 → 1.0.0-beta.60

package/dist/esm/components/media/Media.js

@@ -5,16 +5,50 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { getImageColorset } from '@react-fabric/utilities';
 import classNames from 'classnames';
-import { useState, useMemo, useRef } from 'react';
+import { useState, useEffect, useRef, Fragment } from 'react';
 import { CoreIcons } from '../../types/icons.js';
 import { Button } from '../button/Button.js';
-import classes from './Media.module.css';
+import { Icon } from '../icon/Icon.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var _excluded = ["src", "alt", "reel", "fit", "className"],
   _excluded2 = ["src", "poster", "reel", "autoPlay", "playOnHover", "fit", "className"];
 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; }
+var cover = {
+  fill: "object-fill",
+  cover: "object-cover",
+  contain: "object-contain"
+};
+var loadIndicator = /*#__PURE__*/jsx("div", {
+  className: classNames("fabric-mediaPlaceholder", "absolute z-1 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-4xl text-gray animate-pulse"),
+  children: "\u25CF\u25CF\u25CF"
+});
+
+/**
+ * Component for displaying images with optional reel decoration.
+ * A versatile media component that supports images and videos with various display options.
+ * It can display images with a reel decoration, handle loading states, and show error icons if the media fails to load.
+ * This component is useful for displaying images in a visually appealing way, with support for lazy loading and error handling.
+ * It automatically adjusts the display based on the provided fit property, allowing for different styles such as cover, contain, or fill.
+ *
+ * @param {ImageProps | VideoProps} props - The properties for the Media component.
+ * @returns {JSX.Element} The rendered Media component.
+ *
+ * @example
+ * ```jsx
+ * <Image
+ *   src="image.jpg"
+ *   alt="Example Image"
+ *   reel={true}
+ *   fit="cover"
+ *   className="custom-class"
+ * />
+ * // Renders an image with reel decoration, cover fit, and a custom class name.
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-media--docs} for more details.
+ */
 var Image = function Image(_ref) {
   var src = _ref.src,
     alt = _ref.alt,
@@ -27,31 +61,74 @@ var Image = function Image(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     colorSet = _useState2[0],
     setColorSet = _useState2[1];
-  var loadIndicator = useMemo(function () {
-    return /*#__PURE__*/jsx("div", {
-      className: classNames(classes.mediaPlaceholder, "absolute z-1 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-4xl text-gray animate-pulse"),
-      children: "\u25CF\u25CF\u25CF"
-    });
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    loaded = _useState4[0],
+    setLoaded = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    errored = _useState6[0],
+    setErrored = _useState6[1];
+  useEffect(function () {
+    setLoaded(false);
+    setErrored(false);
   }, [src]);
   return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
     "data-ref": "image",
-    className: classNames(classes.mediaContainer, "relative overflow-hidden bg-gray inline-block", reel && classes.mediaReel, className),
+    className: classNames("fabric-mediaContainer", "relative overflow-hidden inline-block", reel && "fabric-mediaReel", className),
     "data-colorset": colorSet
   }, aria), {}, {
-    children: [loadIndicator, /*#__PURE__*/jsx("img", {
+    children: [!loaded && !errored && loadIndicator, !errored && /*#__PURE__*/jsx("img", {
       alt: alt !== null && alt !== void 0 ? alt : src,
       src: src,
       loading: "lazy",
       crossOrigin: "anonymous",
-      className: classNames(classes.media, "pointer-events-none w-full h-full", fit && "object-".concat(fit)),
+      className: classNames("fabric-media", "pointer-events-none w-full h-full", cover[fit]),
       onLoad: function onLoad(e) {
-        var _e$currentTarget$prev;
-        (_e$currentTarget$prev = e.currentTarget.previousElementSibling) === null || _e$currentTarget$prev === void 0 || _e$currentTarget$prev.remove();
+        setLoaded(true);
         setColorSet(getImageColorset(e.currentTarget));
+      },
+      onError: function onError() {
+        return setErrored(true);
       }
+    }), errored && /*#__PURE__*/jsx(Icon, {
+      size: "2rem",
+      className: "absolute text-tint-300 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
+      icon: CoreIcons.mediaImageBroken
     })]
   }));
 };
+
+/**
+ * Component for displaying videos with optional controls and reel decoration.
+ * A versatile video component that supports autoplay, hover play, and various display options.
+ * It can display videos with a reel decoration, handle loading states, and show error icons if the video fails to load.
+ * This component is useful for displaying videos in a visually appealing way, with support for controls, autoplay, and error handling.
+ * It automatically adjusts the display based on the provided fit property, allowing for different styles such as cover, contain, or fill.
+ * It also includes controls for play/pause and volume, enhancing user interaction with the video content.
+ * This component is ideal for media-rich applications where video content needs to be displayed with user-friendly controls and visual effects.
+ * It supports features like autoplay, play on hover, and custom fit options for the video display.
+ * It also includes a reel decoration for a more engaging visual presentation.
+ *
+ * @param {VideoProps} props - The properties for the Video component.
+ * @returns {JSX.Element} The rendered Video component.
+ *
+ * @example
+ * ```jsx
+ * <Video
+ *   src="video.mp4"
+ *   poster="poster.jpg"
+ *   reel={true}
+ *   autoPlay={true}
+ *   playOnHover={true}
+ *   fit="cover"
+ *   className="custom-class"
+ * />
+ * // Renders a video with reel decoration, autoplay, play on hover, cover fit, and a custom class name.
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-video--docs} for more details.
+ */
 var Video = function Video(_ref2) {
   var src = _ref2.src,
     poster = _ref2.poster,
@@ -63,17 +140,32 @@ var Video = function Video(_ref2) {
     className = _ref2.className,
     aria = _objectWithoutProperties(_ref2, _excluded2);
   var videoRef = useRef(null);
-  var _useState3 = useState(true),
-    _useState4 = _slicedToArray(_useState3, 2),
-    state = _useState4[0],
-    setState = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    volume = _useState6[0],
-    setVolume = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    loaded = _useState8[0],
+    setLoaded = _useState8[1];
+  var _useState9 = useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    errored = _useState10[0],
+    setErrored = _useState10[1];
+  useEffect(function () {
+    setLoaded(false);
+    setErrored(false);
+  }, [src]);
+  var _useState11 = useState(true),
+    _useState12 = _slicedToArray(_useState11, 2),
+    state = _useState12[0],
+    setState = _useState12[1];
+  var _useState13 = useState(false),
+    _useState14 = _slicedToArray(_useState13, 2),
+    volume = _useState14[0],
+    setVolume = _useState14[1];
+  useEffect(function () {
+    setErrored(false);
+  }, [src]);
   return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
     "data-ref": "video",
-    className: classNames(classes.mediaContainer, "relative overflow-hidden bg-gray inline-block", reel && classes.mediaReel, className),
+    className: classNames("fabric-mediaContainer", "relative overflow-hidden inline-block", reel && "fabric-mediaReel", className),
     onMouseEnter: function onMouseEnter() {
       var _videoRef$current;
       playOnHover && ((_videoRef$current = videoRef.current) === null || _videoRef$current === void 0 ? void 0 : _videoRef$current.play());
@@ -83,64 +175,69 @@ var Video = function Video(_ref2) {
       playOnHover && ((_videoRef$current2 = videoRef.current) === null || _videoRef$current2 === void 0 ? void 0 : _videoRef$current2.pause());
     }
   }, aria), {}, {
-    children: [/*#__PURE__*/jsx("div", {
-      className: classNames(classes.mediaPlaceholder, "absolute z-1 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-5xl animate-pulse"),
-      children: "\u25CF\u25CF\u25CF"
-    }), /*#__PURE__*/jsxs("video", {
-      loop: true,
-      ref: videoRef,
-      controls: false,
-      poster: poster,
-      autoPlay: autoPlay,
-      className: classNames(classes.media, "pointer-events-none w-full h-full", fit && "object-".concat(fit)),
-      onPlay: function onPlay() {
-        return setState(true);
-      },
-      onPause: function onPause() {
-        return setState(false);
-      },
-      onVolumeChange: function onVolumeChange(e) {
-        return setVolume(!!e.currentTarget.volume);
-      },
-      onLoadedData: function onLoadedData(e) {
-        var _e$currentTarget$prev2;
-        e.currentTarget.volume = 0;
-        (_e$currentTarget$prev2 = e.currentTarget.previousElementSibling) === null || _e$currentTarget$prev2 === void 0 || _e$currentTarget$prev2.remove();
-      },
-      children: [/*#__PURE__*/jsx("source", {
-        src: src
-      }), /*#__PURE__*/jsx("track", {
-        kind: "captions"
-      })]
-    }), /*#__PURE__*/jsxs("div", {
-      "data-inner-clickable": true,
-      className: classNames(classes.mediaControls, "absolute bottom-6 end-6 rounded-full flex flex-col"),
-      children: [/*#__PURE__*/jsx(Button, {
-        rounded: true,
-        variant: "link",
-        className: classes.mediaControlPlaceholder,
-        icon: CoreIcons.ellipsis,
-        "aria-label": "controls"
-      }), /*#__PURE__*/jsx(Button, {
-        rounded: true,
-        variant: "link",
-        "aria-label": "controls",
-        className: classes.mediaControlAction,
-        onClick: function onClick() {
-          videoRef.current && (videoRef.current.volume = videoRef.current.volume ? 0 : 1);
+    children: [!loaded && !errored && loadIndicator, !errored && /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsxs("video", {
+        loop: true,
+        ref: videoRef,
+        controls: false,
+        poster: poster,
+        autoPlay: autoPlay,
+        className: classNames("fabric-media", "pointer-events-none w-full h-full", fit && "object-".concat(fit)),
+        onPlay: function onPlay() {
+          return setState(true);
+        },
+        onPause: function onPause() {
+          return setState(false);
+        },
+        onVolumeChange: function onVolumeChange(e) {
+          return setVolume(!!e.currentTarget.volume);
+        },
+        onLoadedData: function onLoadedData(e) {
+          e.currentTarget.volume = 0;
+          setLoaded(true);
         },
-        icon: volume ? CoreIcons.volumeOn : CoreIcons.volumeOff
-      }), /*#__PURE__*/jsx(Button, {
-        rounded: true,
-        variant: "link",
-        "aria-label": "controls",
-        className: classes.mediaControlAction,
-        onClick: function onClick() {
-          var _videoRef$current3, _videoRef$current4, _videoRef$current5;
-          (_videoRef$current3 = videoRef.current) !== null && _videoRef$current3 !== void 0 && _videoRef$current3.paused ? (_videoRef$current4 = videoRef.current) === null || _videoRef$current4 === void 0 ? void 0 : _videoRef$current4.play() : (_videoRef$current5 = videoRef.current) === null || _videoRef$current5 === void 0 ? void 0 : _videoRef$current5.pause();
+        onError: function onError() {
+          return setErrored(true);
         },
-        icon: state ? CoreIcons.pause : CoreIcons.play
+        children: [/*#__PURE__*/jsx("source", {
+          src: src
+        }), /*#__PURE__*/jsx("track", {
+          kind: "captions"
+        })]
+      }), /*#__PURE__*/jsxs("div", {
+        "data-inner-clickable": true,
+        className: classNames("fabric-mediaControls", "absolute bottom-6 end-6 rounded-full flex flex-col"),
+        children: [/*#__PURE__*/jsx(Button, {
+          rounded: true,
+          variant: "link",
+          className: "fabric-mediaControlPlaceholder",
+          icon: CoreIcons.ellipsis,
+          "aria-label": "controls"
+        }), /*#__PURE__*/jsx(Button, {
+          rounded: true,
+          variant: "link",
+          "aria-label": "controls",
+          className: "fabric-mediaControlAction",
+          onClick: function onClick() {
+            videoRef.current && (videoRef.current.volume = videoRef.current.volume ? 0 : 1);
+          },
+          icon: volume ? CoreIcons.volumeOn : CoreIcons.volumeOff
+        }), /*#__PURE__*/jsx(Button, {
+          rounded: true,
+          variant: "link",
+          "aria-label": "controls",
+          className: "fabric-mediaControlAction",
+          onClick: function onClick() {
+            var _videoRef$current3, _videoRef$current4, _videoRef$current5;
+            (_videoRef$current3 = videoRef.current) !== null && _videoRef$current3 !== void 0 && _videoRef$current3.paused ? (_videoRef$current4 = videoRef.current) === null || _videoRef$current4 === void 0 ? void 0 : _videoRef$current4.play() : (_videoRef$current5 = videoRef.current) === null || _videoRef$current5 === void 0 ? void 0 : _videoRef$current5.pause();
+          },
+          icon: state ? CoreIcons.pause : CoreIcons.play
+        })]
       })]
+    }), errored && /*#__PURE__*/jsx(Icon, {
+      size: "2rem",
+      className: "absolute text-tint-300 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
+      icon: CoreIcons.mediaVideoBroken
     })]
   }));
 };

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

@@ -8,6 +8,25 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 
 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; }
+/**
+ * A component that provides a context menu that appears on right-click.
+ * It uses the Floating UI library to manage the positioning and interactions of the menu.
+ * This component is useful for creating custom context menus that can be triggered by right-clicking on elements.
+ *
+ * @param {ContextMenuProps} props - The properties for the ContextMenu component.
+ * @returns {JSX.Element} The rendered ContextMenu component.
+ *
+ * @example
+ * ```jsx
+ * <ContextMenu
+ *   menu={<Menu items={[{ label: "Option 1" }, { label: "Option 2" }]} />}
+ * >
+ *   <div className="context-menu-target">Right-click me!</div>
+ * </ContextMenu>
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-menu--docs}
+ */
 var ContextMenu = function ContextMenu(_ref) {
   var _refs$domReference$cu, _refs$domReference$cu2;
   var children = _ref.children,

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

@@ -3,16 +3,18 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { useFloatingParentNodeId, FloatingTree, useFloatingTree, useFloatingNodeId, useFloating, offset, flip, shift, autoUpdate, useHover, safePolygon, useClick, useRole, useDismiss, useListNavigation, useTypeahead, useInteractions, FloatingNode, FloatingList, FloatingOverlay, FloatingFocusManager, FloatingPortal } from '@floating-ui/react';
+import { useFloatingParentNodeId, useFloatingTree, FloatingTree, useFloatingNodeId, useFloating, offset, flip, shift, autoUpdate, useHover, safePolygon, useClick, useRole, useDismiss, useListNavigation, useTypeahead, useInteractions, FloatingNode, FloatingList, FloatingOverlay, FloatingFocusManager, FloatingPortal } from '@floating-ui/react';
 import { mergeRefs } from '@react-fabric/utilities';
 import classNames from 'classnames';
-import { useState, useRef, useEffect, useCallback, Children, cloneElement, Fragment } from 'react';
+import { useState, useRef, useEffect, useCallback, cloneElement, Fragment } from 'react';
+import { HotKeyWrapper } from '../../hotkeys/HotKeyWrapper.js';
 import { CoreIcons } from '../../types/icons.js';
+import { cloneChildren } from '../../utils/cloneElement.js';
 import { nodeCheck } from '../../utils/nodeCheck.js';
 import { MenuItem } from './MenuItem.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-var _excluded = ["children", "minimal", "menuClassName", "onClick", "ref"];
+var _excluded = ["children", "minimal", "menuClassName", "onClick", "trigger", "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
@@ -23,6 +25,8 @@ var MenuComponent = function MenuComponent(_ref) {
     minimal = _ref.minimal,
     menuClassName = _ref.menuClassName,
     onClick = _ref.onClick,
+    _ref$trigger = _ref.trigger,
+    trigger = _ref$trigger === void 0 ? "hover" : _ref$trigger,
     ref = _ref.ref,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(false),
@@ -44,6 +48,7 @@ var MenuComponent = function MenuComponent(_ref) {
       open: !isNested || isOpen,
       onOpenChange: function onOpenChange(open, event, reason) {
         isNested && setIsOpen(open);
+        if (reason === "outside-press" && trigger === "click") tree === null || tree === void 0 || tree.events.emit("close");
       },
       placement: isNested ? "right-start" : "bottom-start",
       middleware: [offset({
@@ -56,6 +61,7 @@ var MenuComponent = function MenuComponent(_ref) {
     refs = _useFloating.refs,
     context = _useFloating.context;
   var hover = useHover(context, {
+    enabled: trigger === "hover",
     delay: {
       open: 75
     },
@@ -64,8 +70,9 @@ var MenuComponent = function MenuComponent(_ref) {
     })
   });
   var click = useClick(context, {
-    toggle: true,
-    ignoreMouse: true
+    event: "mousedown",
+    toggle: trigger === "click" || !isNested,
+    ignoreMouse: trigger === "hover" && !isNested
   });
   var role = useRole(context, {
     role: "menu"
@@ -137,6 +144,16 @@ var MenuComponent = function MenuComponent(_ref) {
       });
     }, 100);
   }, [isOpen]);
+  useEffect(function () {
+    if ((!isNested || isOpen) && activeIndex) {
+      setTimeout(function () {
+        var _elementsRef$current$;
+        (_elementsRef$current$ = elementsRef.current[activeIndex]) === null || _elementsRef$current$ === void 0 || _elementsRef$current$.scrollIntoView({
+          block: "nearest"
+        });
+      }, 100);
+    }
+  }, [isOpen, activeIndex]);
   return /*#__PURE__*/jsxs(FloatingNode, {
     id: nodeId,
     children: [isNested && /*#__PURE__*/jsx(MenuItem, _objectSpread(_objectSpread({}, getReferenceProps(_objectSpread(_objectSpread({}, rest), {}, {
@@ -155,21 +172,21 @@ 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: Children.map(children, function (child, index) {
-              if (child) {
+        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-(--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,
@@ -181,19 +198,57 @@ var MenuComponent = function MenuComponent(_ref) {
                   onClick: child.props.onClick,
                   tabIndex: activeIndex === index ? 0 : -1
                 })) : {});
-              }
-            })
-          }))
+              })
+            }))
+          })
         })]
       }))
     })]
   });
 };
+
+/**
+ * A component that displays a menu with items, supports nested menus and various interactions.
+ * It can be triggered by hover or click events, and allows for custom styling and behavior.
+ * This component is designed to be used within a Floating UI context, allowing for dynamic positioning and interaction handling.
+ * It can be nested within other menus to create complex menu structures.
+ *
+ * @param {MenuProps} props - The properties for the Menu component.
+ * @returns {JSX.Element} The rendered Menu component.
+ *
+ * @example
+ * ```jsx
+ * <Menu
+ *   className="my-menu"
+ *   trigger="click"
+ *   onClick={(id) => console.log(`Clicked item with id: ${id}`)}
+ * >
+ *   <MenuItem id="item1" label="Item 1" />
+ *   <MenuItem id="item2" label="Item 2" />
+ *   <MenuItem id="item3" label="Item 3">
+ *     <Menu>
+ *       <MenuItem id="subitem1" label="Sub Item 1" />
+ *       <MenuItem id="subitem2" label="Sub Item 2" />
+ *     </Menu>
+ *   </MenuItem>
+ * </Menu>
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-menu--docs} for more details.
+ */
 var Menu = function Menu(props) {
   var parentId = useFloatingParentNodeId();
+  var tree = useFloatingTree();
+  if (tree) {
+    return /*#__PURE__*/jsx(MenuComponent, _objectSpread(_objectSpread({}, props), {}, {
+      className: "",
+      menuClassName: props.className
+    }));
+  }
   if (parentId === null) {
     return /*#__PURE__*/jsx(FloatingTree, {
       children: /*#__PURE__*/jsx(MenuComponent, _objectSpread(_objectSpread({}, props), {}, {
+        className: "",
         menuClassName: props.className
       }))
     });

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

@@ -3,25 +3,46 @@
 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, useEffect, 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 { Icon, getIconProps } from '../icon/Icon.js';
 import '../../types/icons.js';
-import classes from './Menu.module.css';
+import '../../hotkeys/HotKeyWrapper.js';
 
-var _excluded = ["as", "label", "color", "className", "icon", "iconBg", "iconColor", "appendLabel", "rtlFlip", "altIcon", "id", "active", "disabled", "onClick", "badge", "hotKey", "minimal", "data-open", "ref"],
+var _excluded = ["as", "label", "color", "className", "icon", "appendLabel", "altIcon", "id", "active", "disabled", "onClick", "badge", "hotKey", "tabIndex", "minimal", "data-open", "ref"],
   _excluded2 = ["children"];
 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; }
+/**
+ * A menu item component that can be used in a dropdown or menu.
+ * It supports various features such as icons, badges, hotkeys, and more.
+ * It can be customized with different colors, icons, and behaviors.
+ *
+ * @param {MenuItemProps} props
+ * @returns A JSX element representing the menu item.
+ *
+ * @example
+ * ```jsx
+ * <MenuItem
+ *   label="Settings"
+ *   icon="settings"
+ *   onClick={() => console.log("Settings clicked")}
+ *   hotKey="Ctrl+S"
+ *   badge={{ count: 3, color: "red" }}
+ * />
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-menu--docs} for documentation.
+ */
 var MenuItem = function MenuItem(_ref) {
   var as = _ref.as,
     label = _ref.label,
@@ -29,10 +50,7 @@ var MenuItem = function MenuItem(_ref) {
     color = _ref$color === void 0 ? "primary" : _ref$color,
     className = _ref.className,
     icon = _ref.icon,
-    iconBg = _ref.iconBg,
-    iconColor = _ref.iconColor,
     appendLabel = _ref.appendLabel,
-    rtlFlip = _ref.rtlFlip,
     altIcon = _ref.altIcon,
     id = _ref.id,
     active = _ref.active,
@@ -40,28 +58,31 @@ var MenuItem = function MenuItem(_ref) {
     _onClick = _ref.onClick,
     badge = _ref.badge,
     hotKey = _ref.hotKey,
+    _ref$tabIndex = _ref.tabIndex,
+    tabIndex = _ref$tabIndex === void 0 ? -1 : _ref$tabIndex,
     minimal = _ref.minimal,
     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);
   }, [badge]);
+  useEffect(function () {
+    var _elRef$current;
+    tabIndex === 0 && ((_elRef$current = elRef.current) === null || _elRef$current === void 0 ? void 0 : _elRef$current.focus());
+  }, [tabIndex]);
   var iconEl = useMemo(function () {
     var _path;
     var path = icon;
     if (minimal && !path) {
       path = iconToken(label);
     }
-    return /*#__PURE__*/jsx(Icon, {
-      className: classNames(classes.menuIcon, minimal && classes.minimal),
-      icon: (_path = path) !== null && _path !== void 0 ? _path : "",
-      bg: iconBg,
-      color: iconColor,
-      rtlFlip: rtlFlip
-    });
-  }, [icon, iconBg, iconColor, rtlFlip, minimal, label]);
+    return /*#__PURE__*/jsx(Icon, _objectSpread({
+      className: classNames("fabric-menuIcon", minimal && "minimal")
+    }, getIconProps((_path = path) !== null && _path !== void 0 ? _path : "")));
+  }, [icon, minimal, label]);
   var Wrapper = useCallback(function (_ref2) {
     var children = _ref2.children,
       rest = _objectWithoutProperties(_ref2, _excluded2);
@@ -98,20 +119,27 @@ 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"),
+      className: classNames("fabric-menuItem cursor-pointer", className, active && "active", minimal && "minimal", disabled && "disabled", "rounded relative max-w-[50vw] my-0.5"),
       "data-active": active,
       "data-open": childOpen,
       disabled: disabled,
       "data-id": id,
+      tabIndex: tabIndex,
       onClick: function onClick(e) {
         (_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$current2, _elRef$current2$click;
+          return (_elRef$current2 = elRef.current) === null || _elRef$current2 === void 0 || (_elRef$current2$click = _elRef$current2.click) === null || _elRef$current2$click === void 0 ? void 0 : _elRef$current2$click.call(_elRef$current2);
+        }
+      }), menuLabel]
     }))
   }));
 };