@react-fabric/core 1.0.0-beta.9 → 1.0.2

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

@@ -4,18 +4,48 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var utilities = require('@react-fabric/utilities');
-var classNames = require('classnames');
 var react = require('react');
-var icons = require('../../types/icons.js');
+var usePropState = require('../../hooks/usePropState.js');
 var Button = require('../button/Button.js');
-var Media_module = require('./Media.module.css');
+var Icon = require('../icon/Icon.js');
 var jsxRuntime = require('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 Image = function Image(_ref) {
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).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__*/jsxRuntime.jsx("div", {
+  className: utilities.cn("fabric-mediaPlaceholder", "absolute z-1 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-sm text-gray"),
+  children: /*#__PURE__*/jsxRuntime.jsx("i", {
+    className: "icon-[svg-spinners--pulse-rings-2]"
+  })
+});
+
+/**
+ * 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.
+ *
+ * @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.
+ * ```
+ */
+function Image(_ref) {
   var src = _ref.src,
     alt = _ref.alt,
     reel = _ref.reel,
@@ -27,32 +57,66 @@ var Image = function Image(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     colorSet = _useState2[0],
     setColorSet = _useState2[1];
-  var loadIndicator = react.useMemo(function () {
-    return /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classNames(Media_module.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"
-    });
-  }, [src]);
+  var _usePropWatcher = usePropState.usePropWatcher(false, src),
+    _usePropWatcher2 = _slicedToArray(_usePropWatcher, 2),
+    loaded = _usePropWatcher2[0],
+    setLoaded = _usePropWatcher2[1];
+  var _usePropWatcher3 = usePropState.usePropWatcher(false, src),
+    _usePropWatcher4 = _slicedToArray(_usePropWatcher3, 2),
+    errored = _usePropWatcher4[0],
+    setErrored = _usePropWatcher4[1];
   return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
     "data-ref": "image",
-    className: classNames(Media_module.mediaContainer, "relative overflow-hidden bg-gray inline-block", reel && Media_module.mediaReel, className),
+    className: utilities.cn("fabric-mediaContainer", "relative overflow-hidden inline-block", reel && "fabric-mediaReel", className),
     "data-colorset": colorSet
   }, aria), {}, {
-    children: [loadIndicator, /*#__PURE__*/jsxRuntime.jsx("img", {
+    children: [!loaded && !errored && loadIndicator, !errored && /*#__PURE__*/jsxRuntime.jsx("img", {
       alt: alt !== null && alt !== void 0 ? alt : src,
       src: src,
       loading: "lazy",
       crossOrigin: "anonymous",
-      className: classNames(Media_module.media, "pointer-events-none w-full h-full", fit && "object-".concat(fit)),
+      className: utilities.cn("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(utilities.getImageColorset(e.currentTarget));
+      },
+      onError: function onError() {
+        return setErrored(true);
       }
+    }), errored && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+      size: "2rem",
+      className: "absolute text-tint-300 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
+      icon: "icon-[mdi--image-off-outline]"
     })]
   }));
-};
-var Video = function Video(_ref2) {
+}
+
+/**
+ * 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.
+ *
+ * @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.
+ * ```
+ */
+function Video(_ref2) {
   var src = _ref2.src,
     poster = _ref2.poster,
     reel = _ref2.reel,
@@ -63,6 +127,14 @@ var Video = function Video(_ref2) {
     className = _ref2.className,
     aria = _objectWithoutProperties(_ref2, _excluded2);
   var videoRef = react.useRef(null);
+  var _usePropWatcher5 = usePropState.usePropWatcher(false, src),
+    _usePropWatcher6 = _slicedToArray(_usePropWatcher5, 2),
+    loaded = _usePropWatcher6[0],
+    setLoaded = _usePropWatcher6[1];
+  var _usePropWatcher7 = usePropState.usePropWatcher(false, src),
+    _usePropWatcher8 = _slicedToArray(_usePropWatcher7, 2),
+    errored = _usePropWatcher8[0],
+    setErrored = _usePropWatcher8[1];
   var _useState3 = react.useState(true),
     _useState4 = _slicedToArray(_useState3, 2),
     state = _useState4[0],
@@ -73,77 +145,82 @@ var Video = function Video(_ref2) {
     setVolume = _useState6[1];
   return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
     "data-ref": "video",
-    className: classNames(Media_module.mediaContainer, "relative overflow-hidden bg-gray inline-block", reel && Media_module.mediaReel, className),
+    className: utilities.cn("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());
+      if (playOnHover) void ((_videoRef$current = videoRef.current) === null || _videoRef$current === void 0 ? void 0 : _videoRef$current.play());
     },
     onMouseLeave: function onMouseLeave() {
       var _videoRef$current2;
-      playOnHover && ((_videoRef$current2 = videoRef.current) === null || _videoRef$current2 === void 0 ? void 0 : _videoRef$current2.pause());
+      if (playOnHover) (_videoRef$current2 = videoRef.current) === null || _videoRef$current2 === void 0 || _videoRef$current2.pause();
     }
   }, aria), {}, {
-    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classNames(Media_module.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__*/jsxRuntime.jsxs("video", {
-      loop: true,
-      ref: videoRef,
-      controls: false,
-      poster: poster,
-      autoPlay: autoPlay,
-      className: classNames(Media_module.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__*/jsxRuntime.jsx("source", {
-        src: src
-      }), /*#__PURE__*/jsxRuntime.jsx("track", {
-        kind: "captions"
-      })]
-    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-      "data-inner-clickable": true,
-      className: classNames(Media_module.mediaControls, "absolute bottom-6 end-6 rounded-full flex flex-col"),
-      children: [/*#__PURE__*/jsxRuntime.jsx(Button.Button, {
-        rounded: true,
-        variant: "link",
-        className: Media_module.mediaControlPlaceholder,
-        icon: icons.CoreIcons.ellipsis,
-        "aria-label": "controls"
-      }), /*#__PURE__*/jsxRuntime.jsx(Button.Button, {
-        rounded: true,
-        variant: "link",
-        "aria-label": "controls",
-        className: Media_module.mediaControlAction,
-        onClick: function onClick() {
-          videoRef.current && (videoRef.current.volume = videoRef.current.volume ? 0 : 1);
+    children: [!loaded && !errored && loadIndicator, !errored && /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
+      children: [/*#__PURE__*/jsxRuntime.jsxs("video", {
+        loop: true,
+        ref: videoRef,
+        controls: false,
+        poster: poster,
+        autoPlay: autoPlay,
+        className: utilities.cn("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);
         },
-        icon: volume ? icons.CoreIcons.volumeOn : icons.CoreIcons.volumeOff
-      }), /*#__PURE__*/jsxRuntime.jsx(Button.Button, {
-        rounded: true,
-        variant: "link",
-        "aria-label": "controls",
-        className: Media_module.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();
+        onVolumeChange: function onVolumeChange(e) {
+          return setVolume(!!e.currentTarget.volume);
         },
-        icon: state ? icons.CoreIcons.pause : icons.CoreIcons.play
+        onLoadedData: function onLoadedData(e) {
+          e.currentTarget.volume = 0;
+          setLoaded(true);
+        },
+        onError: function onError() {
+          return setErrored(true);
+        },
+        children: [/*#__PURE__*/jsxRuntime.jsx("source", {
+          src: src
+        }), /*#__PURE__*/jsxRuntime.jsx("track", {
+          kind: "captions"
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        "data-inner-clickable": true,
+        className: utilities.cn("fabric-mediaControls", "absolute bottom-6 inset-e-6 rounded-full flex flex-col"),
+        children: [/*#__PURE__*/jsxRuntime.jsx(Button.Button, {
+          rounded: true,
+          variant: "link",
+          className: "fabric-mediaControlPlaceholder",
+          icon: "icon-[mdi--dots-vertical]",
+          "aria-label": "controls"
+        }), /*#__PURE__*/jsxRuntime.jsx(Button.Button, {
+          rounded: true,
+          variant: "link",
+          "aria-label": "controls",
+          className: "fabric-mediaControlAction",
+          onClick: function onClick() {
+            if (videoRef.current) videoRef.current.volume = videoRef.current.volume ? 0 : 1;
+          },
+          icon: volume ? "icon-[mdi--volume]" : "icon-[mdi--volume-mute]"
+        }), /*#__PURE__*/jsxRuntime.jsx(Button.Button, {
+          rounded: true,
+          variant: "link",
+          "aria-label": "controls",
+          className: "fabric-mediaControlAction",
+          onClick: function onClick() {
+            var _videoRef$current3, _videoRef$current4, _videoRef$current5;
+            void ((_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 ? "icon-[mdi--pause]" : "icon-[mdi--play]"
+        })]
       })]
+    }), errored && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+      size: "2rem",
+      className: "absolute text-tint-300 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
+      icon: "icon-[mdi--video-off-outline]"
     })]
   }));
-};
+}
 
 exports.Image = Image;
 exports.Video = Video;

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

@@ -7,8 +7,22 @@ var react = require('react');
 var jsxRuntime = require('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; }
-var ContextMenu = function ContextMenu(_ref) {
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).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.
+ *
+ * @example
+ * ```jsx
+ * <ContextMenu
+ *   menu={<Menu items={[{ label: "Option 1" }, { label: "Option 2" }]} />}
+ * >
+ *   <div className="context-menu-target">Right-click me!</div>
+ * </ContextMenu>
+ * ```
+ */
+function ContextMenu(_ref) {
   var _refs$domReference$cu, _refs$domReference$cu2;
   var children = _ref.children,
     menu = _ref.menu,
@@ -21,7 +35,7 @@ var ContextMenu = function ContextMenu(_ref) {
   var _useFloating = react$1.useFloating({
       open: isOpen,
       nodeId: nodeId,
-      onOpenChange: function onOpenChange(open, evt, reason) {
+      onOpenChange: function onOpenChange(open, evt) {
         var target = evt === null || evt === void 0 ? void 0 : evt.target;
         if (!(target !== null && target !== void 0 && target.closest(".menu-list"))) setIsOpen(open);
       },
@@ -42,7 +56,7 @@ var ContextMenu = function ContextMenu(_ref) {
   });
   var _useInteractions = react$1.useInteractions([dismiss, click]),
     getFloatingProps = _useInteractions.getFloatingProps;
-  var handleClick = react.useRef(function (e) {
+  var handleClickRef = react.useRef(function (e) {
     var virtual = {
       getBoundingClientRect: function getBoundingClientRect() {
         return {
@@ -66,39 +80,50 @@ var ContextMenu = function ContextMenu(_ref) {
   var wrapperRef = react.useRef(null);
   react.useEffect(function () {
     var el = wrapperRef.current;
+    var handler = handleClickRef.current;
     if (el && !disabled) {
       var _el$parentElement;
-      el === null || el === void 0 || (_el$parentElement = el.parentElement) === null || _el$parentElement === void 0 || _el$parentElement.addEventListener("contextmenu", handleClick.current);
+      el === null || el === void 0 || (_el$parentElement = el.parentElement) === null || _el$parentElement === void 0 || _el$parentElement.addEventListener("contextmenu", handler);
       return function () {
         var _el$parentElement2;
-        el === null || el === void 0 || (_el$parentElement2 = el.parentElement) === null || _el$parentElement2 === void 0 || _el$parentElement2.removeEventListener("contextmenu", handleClick.current);
+        el === null || el === void 0 || (_el$parentElement2 = el.parentElement) === null || _el$parentElement2 === void 0 || _el$parentElement2.removeEventListener("contextmenu", handler);
       };
     }
   }, [disabled]);
-  var tryClosing = react.useRef(function (e) {
+  var tryClosingRef = react.useRef(function (e) {
     var _e$target;
-    if ((_e$target = e.target) !== null && _e$target !== void 0 && _e$target.closest("[data-dropdown-dismiss='true']")) setTimeout(function () {
+    if (!((_e$target = e.target) !== null && _e$target !== void 0 && _e$target.closest("[data-dropdown-dismiss='false']"))) setTimeout(function () {
       return setIsOpen(false);
     }, 50);
   });
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "contents",
     ref: wrapperRef,
-    onMouseUpCapture: tryClosing.current,
     children: [children, isOpen && /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingPortal, {
       root: (_refs$domReference$cu = (_refs$domReference$cu2 = refs.domReference.current) === null || _refs$domReference$cu2 === void 0 ? void 0 : _refs$domReference$cu2.closest(".theme-base")) !== null && _refs$domReference$cu !== void 0 ? _refs$domReference$cu : undefined,
-      children: /*#__PURE__*/react.cloneElement(menu, _objectSpread(_objectSpread({}, getFloatingProps()), {}, {
-        style: _objectSpread(_objectSpread({}, floatingStyles), {}, {
-          borderRadius: "var(--rounding)",
-          zIndex: "var(--z-popover)",
-          fontSize: "0.875rem"
-        }),
-        className: "bg-base outline rounded-capped shadow-lg",
-        ref: refs.setFloating,
-        onMouseUp: tryClosing.current
-      }))
+      children: /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingOverlay, {
+        lockScroll: true,
+        style: {
+          zIndex: "var(--z-overlay-mask)",
+          position: "absolute",
+          overflow: "hidden"
+        },
+        children: /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingFocusManager, {
+          context: context,
+          children: /*#__PURE__*/react.cloneElement(menu, _objectSpread(_objectSpread({}, getFloatingProps()), {}, {
+            style: _objectSpread(_objectSpread({}, floatingStyles), {}, {
+              borderRadius: "var(--rounding)",
+              zIndex: "var(--z-popover)",
+              fontSize: "0.875rem"
+            }),
+            className: "bg-default outline rounded-capped shadow-lg",
+            ref: refs.floating,
+            onMouseUp: tryClosingRef.current
+          }))
+        })
+      })
     })]
   });
-};
+}
 
 exports.ContextMenu = ContextMenu;

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

@@ -5,25 +5,30 @@ var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var react = require('@floating-ui/react');
 var utilities = require('@react-fabric/utilities');
-var classNames = require('classnames');
 var react$1 = require('react');
-var icons = require('../../types/icons.js');
+var cloneElement = require('../../utils/cloneElement.js');
 var nodeCheck = require('../../utils/nodeCheck.js');
 var MenuItem = require('./MenuItem.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["children", "minimal", "menuClassName", "onClick", "ref"];
+var _excluded = ["children", "minimal", "className", "forDropdown", "onClick", "trigger", "ref", "onMouseUp", "onMouseDown", "style"];
 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; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).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;
+function MenuComponent(_ref) {
+  var _refs$domReference$cu, _refs$domReference$cu2, _cloneChildren;
   var children = _ref.children,
     minimal = _ref.minimal,
-    menuClassName = _ref.menuClassName,
+    className = _ref.className,
+    forDropdown = _ref.forDropdown,
     onClick = _ref.onClick,
+    _ref$trigger = _ref.trigger,
+    trigger = _ref$trigger === void 0 ? "hover" : _ref$trigger,
     ref = _ref.ref,
+    onMouseUp = _ref.onMouseUp,
+    onMouseDown = _ref.onMouseDown,
+    style = _ref.style,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = react$1.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -38,12 +43,13 @@ var MenuComponent = function MenuComponent(_ref) {
   var tree = react.useFloatingTree();
   var nodeId = react.useFloatingNodeId();
   var parentId = react.useFloatingParentNodeId();
-  var isNested = parentId !== null;
+  var isNested = parentId !== null && !forDropdown;
   var _useFloating = react.useFloating({
-      nodeId: nodeId,
+      nodeId: "menu-".concat(nodeId),
       open: !isNested || isOpen,
       onOpenChange: function onOpenChange(open, event, reason) {
-        isNested && setIsOpen(open);
+        if (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: [react.offset({
@@ -56,6 +62,7 @@ var MenuComponent = function MenuComponent(_ref) {
     refs = _useFloating.refs,
     context = _useFloating.context;
   var hover = react.useHover(context, {
+    enabled: trigger === "hover",
     delay: {
       open: 75
     },
@@ -64,8 +71,9 @@ var MenuComponent = function MenuComponent(_ref) {
     })
   });
   var click = react.useClick(context, {
-    toggle: true,
-    ignoreMouse: true
+    event: "mousedown",
+    toggle: trigger === "click" || !isNested,
+    ignoreMouse: trigger === "hover" && !isNested
   });
   var role = react.useRole(context, {
     role: "menu"
@@ -119,66 +127,91 @@ var MenuComponent = function MenuComponent(_ref) {
       });
     }
   }, [tree, isOpen, nodeId, parentId]);
-  var handleClick = react$1.useCallback(function (e) {
+  var handleClick = function handleClick(e) {
     var el = e.target;
     if (el.dataset.id) {
       onClick === null || onClick === void 0 || onClick(el.dataset.id);
     }
-  }, [onClick]);
+  };
   var Wrapper = isNested ? react.FloatingPortal : react$1.Fragment;
   var wrapperProps = isNested ? {
     root: (_refs$domReference$cu = (_refs$domReference$cu2 = refs.domReference.current) === null || _refs$domReference$cu2 === void 0 ? void 0 : _refs$domReference$cu2.closest(".theme-base")) !== null && _refs$domReference$cu !== void 0 ? _refs$domReference$cu : undefined
   } : {};
   react$1.useEffect(function () {
-    setTimeout(function () {
-      var _refs$floating$curren;
-      return (_refs$floating$curren = refs.floating.current) === null || _refs$floating$curren === void 0 || (_refs$floating$curren = _refs$floating$curren.querySelector("[data-active=\"true\"]")) === null || _refs$floating$curren === void 0 ? void 0 : _refs$floating$curren.scrollIntoView({
+    var tmr = setTimeout(function () {
+      var _elementsRef$current$, _refs$floating$curren;
+      (_elementsRef$current$ = elementsRef.current[0]) === null || _elementsRef$current$ === void 0 || _elementsRef$current$.focus();
+      (_refs$floating$curren = refs.floating.current) === null || _refs$floating$curren === void 0 || (_refs$floating$curren = _refs$floating$curren.querySelector("[data-active=\"true\"]")) === null || _refs$floating$curren === void 0 || _refs$floating$curren.scrollIntoView({
         block: "nearest"
       });
     }, 100);
-  }, [isOpen]);
+    return function () {
+      clearTimeout(tmr);
+    };
+  }, [isOpen, refs.floating]);
+  react$1.useEffect(function () {
+    if ((!isNested || isOpen) && activeIndex) {
+      var tmr = setTimeout(function () {
+        var _elementsRef$current$2;
+        (_elementsRef$current$2 = elementsRef.current[activeIndex]) === null || _elementsRef$current$2 === void 0 || _elementsRef$current$2.scrollIntoView({
+          block: "nearest"
+        });
+      }, 100);
+      return function () {
+        clearTimeout(tmr);
+      };
+    }
+  }, [isOpen, activeIndex, isNested]);
   return /*#__PURE__*/jsxRuntime.jsxs(react.FloatingNode, {
     id: nodeId,
     children: [isNested && /*#__PURE__*/jsxRuntime.jsx(MenuItem.MenuItem, _objectSpread(_objectSpread({}, getReferenceProps(_objectSpread(_objectSpread({}, rest), {}, {
       id: undefined,
+      // @ts-expect-error ignore
       "data-dropdown-dismiss": false,
       onClick: function onClick(e) {
         e.stopPropagation();
         return false;
       }
     }))), {}, {
-      "data-open": isOpen,
+      "data-open": isOpen
+      // @ts-expect-error ignore
+      ,
       minimal: minimal,
-      altIcon: icons.CoreIcons.chevronRight,
-      ref: utilities.mergeRefs(refs.setReference, ref)
+      altIcon: "icon-[mdi--menu-right]",
+      ref: utilities.mergeRefs(refs.reference, ref)
     })), /*#__PURE__*/jsxRuntime.jsx(react.FloatingList, {
       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,
+          closeOnFocusOut: true,
           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)
+            className: utilities.cn(className, "flex flex-col p-1 menu-list", isNested && "outline shadow-lg rounded-capped max-h-[60vh] overflow-auto scroll-thin z-(--z-popover)"),
+            ref: utilities.mergeRefs(isNested ? refs.floating : ref)
           }, getFloatingProps({
-            onClick: isNested ? undefined : handleClick
+            onClick: isNested ? undefined : handleClick,
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            onMouseDown: onMouseDown,
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            onMouseUp: onMouseUp
           })), {}, {
-            style: !isNested ? rest.style : floatingStyles,
-            children: react$1.Children.map(children, function (child, index) {
-              if (child) {
-                labelsRef.current[index] = child.props.label;
-                return /*#__PURE__*/react$1.cloneElement(child, nodeCheck.nodeCheck(child, MenuItem.MenuItem, Menu, MenuComponent) ? _objectSpread({
+            style: !isNested ? style : floatingStyles,
+            children: (_cloneChildren = cloneElement.cloneChildren(children)) === null || _cloneChildren === void 0 ? void 0 : _cloneChildren.map(function (child, index) {
+              if (/*#__PURE__*/react$1.isValidElement(child)) {
+                var childEl = child;
+                labelsRef.current[index] = childEl.props.label;
+                return /*#__PURE__*/react$1.cloneElement(childEl, nodeCheck.nodeCheck(child, MenuItem.MenuItem, Menu, MenuComponent) ? _objectSpread({
+                  // @ts-expect-error ignore
                   minimal: !isNested && minimal,
                   "data-focus": activeIndex === index,
                   ref: function ref(el) {
                     return elementsRef.current[index] = el;
                   }
                 }, getItemProps({
-                  onClick: child.props.onClick,
+                  onClick: childEl.props.onClick,
                   tabIndex: activeIndex === index ? 0 : -1
                 })) : {});
               }
@@ -188,17 +221,44 @@ var MenuComponent = function MenuComponent(_ref) {
       }))
     })]
   });
-};
-var Menu = function Menu(props) {
+}
+
+/**
+ * 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.
+ *
+ * @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>
+ * ```
+ */
+function Menu(props) {
   var parentId = react.useFloatingParentNodeId();
+  var tree = react.useFloatingTree();
+  if (tree) {
+    return /*#__PURE__*/jsxRuntime.jsx(MenuComponent, _objectSpread({}, props));
+  }
   if (parentId === null) {
     return /*#__PURE__*/jsxRuntime.jsx(react.FloatingTree, {
-      children: /*#__PURE__*/jsxRuntime.jsx(MenuComponent, _objectSpread(_objectSpread({}, props), {}, {
-        menuClassName: props.className
-      }))
+      children: /*#__PURE__*/jsxRuntime.jsx(MenuComponent, _objectSpread({}, props))
     });
   }
   return /*#__PURE__*/jsxRuntime.jsx(MenuComponent, _objectSpread({}, props));
-};
+}
 
 exports.Menu = Menu;