@react-fabric/core 1.0.0-beta.8 → 1.0.1

package/dist/esm/components/icon/Icon.js

@@ -2,105 +2,106 @@
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { isSvgPath, isString } from '@react-fabric/utilities';
-import classNames from 'classnames';
-import { useMemo } from 'react';
-import { getColor, getBgClass, getColorClass } from '../../utils/getColor.js';
-import classes from './Icon.module.css';
+import { isString, isSvgPath, cn } from '@react-fabric/utilities';
+import { useMemo, isValidElement } from 'react';
 import { jsx } from 'react/jsx-runtime';
+import { getColor } from '../../utils/getColor.js';
 
-var _excluded = ["ref", "icon", "bg", "color", "size", "rtlFlip", "animate", "rounded", "viewBox", "className", "onClick"];
+var _excluded = ["animate", "className", "color", "bg", "icon", "ref", "rounded", "rtlFlip", "size", "viewBox"];
 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; }
 var SvgTextSize = ["", ".875em", ".525em", ".35em", ".25em"];
-var SizeMap = {
-  xs: "0.625rem",
-  sm: "0.875rem",
-  md: "1.125rem",
-  lg: "1.5rem",
-  xl: "2rem"
+var ANIMATIONS = {
+  spin: "animate-spin",
+  fade: "animate-fade",
+  pulse: "animate-pulse",
+  bounce: "animate-bounce"
 };
 
 /**
- * An icon is a display component for svg icon path / image
+ * A versatile icon component that supports multiple formats: SVG paths, CSS class names,
+ * and short text labels (rendered inside an SVG).
+ *
+ * Recommended to use iconify for CSS icons
+ *
+ * @see https://iconify.design/ for a comprehensive collection of icons that can be easily integrated using CSS class names, providing a wide range of options for developers to choose from when selecting icons for their applications.
+ *
+ * @example
+ * ```tsx
+ * import { Icon } from "@react-fabric/core";
+ *
+ * // Render as a raw SVG path
+ * <Icon icon="M10 20v-6h4v6h5V3h-5V13H9v6H5v-6h4z" size="24px" />
+ *
+ * // Render via CSS class
+ * <Icon icon="icon-[mdi--home]" />
+ *
+ * // Render as a short text label inside an SVG
+ * <Icon icon="+" size="1.5em" />
+ *
+ * // With additional features like animations and custom colors
+ * <Icon icon="M4 10h2v10H4zm8-2h2v10h-2zm6-7h2v10h-2zm-4 12h2v3h-2z" animate="spin" color="primary-500" />
+ * ```
  */
-var Icon = function Icon(_ref) {
-  var ref = _ref.ref,
-    icon = _ref.icon,
-    bg = _ref.bg,
+function Icon(_ref) {
+  var animate = _ref.animate,
+    className = _ref.className,
     color = _ref.color,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? "" : _ref$size,
-    rtlFlip = _ref.rtlFlip,
-    animate = _ref.animate,
+    bg = _ref.bg,
+    icon = _ref.icon,
+    ref = _ref.ref,
     rounded = _ref.rounded,
+    rtlFlip = _ref.rtlFlip,
+    size = _ref.size,
     _ref$viewBox = _ref.viewBox,
     viewBox = _ref$viewBox === void 0 ? "0 0 24 24" : _ref$viewBox,
-    className = _ref.className,
-    onClick = _ref.onClick,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  /** ***************** style map *******************/
-  var styles = useMemo(function () {
-    var s = {};
-    if (bg) {
-      s.backgroundColor = getColor(bg);
-    }
-    if (color) {
-      s.color = getColor(color);
-    }
-    if (size && !(size in SizeMap)) {
-      s.fontSize = size;
-    }
-    if (size && size in SizeMap) {
-      s.fontSize = SizeMap[size];
-    }
-    return s;
-  }, [bg, color, size]);
-
-  /** ***************** check if icon is svg path *******************/
-  var isSvg = useMemo(function () {
-    return isSvgPath(icon);
-  }, [icon]);
-
-  /** ***************** render icon *******************/
+    props = _objectWithoutProperties(_ref, _excluded);
   var iconEl = useMemo(function () {
-    var _SvgTextSize$icon$len;
-    if (!isString(icon)) {
-      throw Error("Invalid icon expected string");
+    if (/*#__PURE__*/isValidElement(icon)) return icon;
+    if (isString(icon)) {
+      if (isSvgPath(icon)) {
+        return /*#__PURE__*/jsx("svg", {
+          viewBox: viewBox,
+          className: "size-[1em]",
+          children: /*#__PURE__*/jsx("path", {
+            fill: "currentColor",
+            d: icon.toString()
+          })
+        });
+      }
+      return icon.length <= 4 ? /*#__PURE__*/jsx("svg", {
+        role: "img",
+        className: "size-[1em]",
+        children: /*#__PURE__*/jsx("text", {
+          x: "50%",
+          y: "50%",
+          dy: ".1em",
+          dominantBaseline: "middle",
+          textAnchor: "middle",
+          style: {
+            fontSize: SvgTextSize[icon.length]
+          },
+          children: icon
+        })
+      }) : /*#__PURE__*/jsx("i", {
+        className: "size-[1em] ".concat(icon)
+      });
     }
-    return isSvg ? /*#__PURE__*/jsx("svg", {
-      viewBox: viewBox,
-      children: /*#__PURE__*/jsx("path", {
-        fill: "currentColor",
-        d: icon.toString()
-      })
-    }) : (icon === null || icon === void 0 ? void 0 : icon.toString().length) <= 4 ? /*#__PURE__*/jsx("svg", {
-      role: "img",
-      children: /*#__PURE__*/jsx("text", {
-        x: "50%",
-        y: "50%",
-        dy: ".1em",
-        dominantBaseline: "middle",
-        textAnchor: "middle",
-        style: {
-          fontSize: (_SvgTextSize$icon$len = SvgTextSize[icon.length]) !== null && _SvgTextSize$icon$len !== void 0 ? _SvgTextSize$icon$len : "1em"
-        },
-        children: icon
-      })
-    }) : /*#__PURE__*/jsx("i", {
-      className: "".concat(icon)
-    });
-  }, [icon, isSvg, viewBox]);
-  return /*#__PURE__*/jsx("dfn", _objectSpread(_objectSpread({}, rest), {}, {
+    throw Error("Invalid icon expected string");
+  }, [icon, viewBox]);
+  return /*#__PURE__*/jsx("dfn", _objectSpread(_objectSpread({
+    "data-ref": "icon"
+  }, props), {}, {
     ref: ref,
     role: "presentation",
-    className: classNames(classes.icon, className, "select-none overflow-hidden inline-block box-content leading-none not-italic text-center", bg && getBgClass(bg), color && getColorClass(color), !rounded && "rounded", rounded && "rounded-full", animate && "animate-".concat(animate)),
-    onClick: onClick,
-    "data-flip": rtlFlip,
-    style: styles,
-    "data-clickable": !!onClick,
+    className: cn("fabric-icon", "inline-block", className, "select-none overflow-hidden box-content leading-0 not-italic text-center", rounded ? "rounded-full" : "rounded", animate && ANIMATIONS[animate], rtlFlip && "rtl:-scale-x-100"),
+    style: {
+      fontSize: size,
+      color: getColor(color),
+      backgroundColor: getColor(bg)
+    },
     children: iconEl
   }));
-};
+}
 
 export { Icon };

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

@@ -3,19 +3,49 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 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 { CoreIcons } from '../../types/icons.js';
+import { cn, getImageColorset } from '@react-fabric/utilities';
+import { useState, useRef, Fragment } from 'react';
+import { usePropWatcher } from '../../hooks/usePropState.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 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__*/jsx("div", {
+  className: 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__*/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 = 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"
-    });
-  }, [src]);
+  var _usePropWatcher = usePropWatcher(false, src),
+    _usePropWatcher2 = _slicedToArray(_usePropWatcher, 2),
+    loaded = _usePropWatcher2[0],
+    setLoaded = _usePropWatcher2[1];
+  var _usePropWatcher3 = usePropWatcher(false, src),
+    _usePropWatcher4 = _slicedToArray(_usePropWatcher3, 2),
+    errored = _usePropWatcher4[0],
+    setErrored = _usePropWatcher4[1];
   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: cn("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: 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(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: "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 = useRef(null);
+  var _usePropWatcher5 = usePropWatcher(false, src),
+    _usePropWatcher6 = _slicedToArray(_usePropWatcher5, 2),
+    loaded = _usePropWatcher6[0],
+    setLoaded = _usePropWatcher6[1];
+  var _usePropWatcher7 = usePropWatcher(false, src),
+    _usePropWatcher8 = _slicedToArray(_usePropWatcher7, 2),
+    errored = _usePropWatcher8[0],
+    setErrored = _usePropWatcher8[1];
   var _useState3 = useState(true),
     _useState4 = _slicedToArray(_useState3, 2),
     state = _useState4[0],
@@ -73,76 +145,81 @@ var Video = function Video(_ref2) {
     setVolume = _useState6[1];
   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: 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__*/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: 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 ? 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();
+        onVolumeChange: function onVolumeChange(e) {
+          return setVolume(!!e.currentTarget.volume);
         },
-        icon: state ? CoreIcons.pause : CoreIcons.play
+        onLoadedData: function onLoadedData(e) {
+          e.currentTarget.volume = 0;
+          setLoaded(true);
+        },
+        onError: function onError() {
+          return setErrored(true);
+        },
+        children: [/*#__PURE__*/jsx("source", {
+          src: src
+        }), /*#__PURE__*/jsx("track", {
+          kind: "captions"
+        })]
+      }), /*#__PURE__*/jsxs("div", {
+        "data-inner-clickable": true,
+        className: cn("fabric-mediaControls", "absolute bottom-6 inset-e-6 rounded-full flex flex-col"),
+        children: [/*#__PURE__*/jsx(Button, {
+          rounded: true,
+          variant: "link",
+          className: "fabric-mediaControlPlaceholder",
+          icon: "icon-[mdi--dots-vertical]",
+          "aria-label": "controls"
+        }), /*#__PURE__*/jsx(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__*/jsx(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__*/jsx(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]"
     })]
   }));
-};
+}
 
 export { Image, Video };

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

@@ -2,13 +2,27 @@
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { useFloatingNodeId, useFloating, autoUpdate, offset, flip, useClick, useDismiss, useInteractions, FloatingPortal } from '@floating-ui/react';
+import { useFloatingNodeId, useFloating, autoUpdate, offset, flip, useClick, useDismiss, useInteractions, FloatingPortal, FloatingOverlay, FloatingFocusManager } from '@floating-ui/react';
 import { useState, useRef, useEffect, cloneElement } from 'react';
 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; }
-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 = 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 = useInteractions([dismiss, click]),
     getFloatingProps = _useInteractions.getFloatingProps;
-  var handleClick = useRef(function (e) {
+  var handleClickRef = useRef(function (e) {
     var virtual = {
       getBoundingClientRect: function getBoundingClientRect() {
         return {
@@ -66,39 +80,50 @@ var ContextMenu = function ContextMenu(_ref) {
   var wrapperRef = useRef(null);
   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 = useRef(function (e) {
+  var tryClosingRef = 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__*/jsxs("div", {
     className: "contents",
     ref: wrapperRef,
-    onMouseUpCapture: tryClosing.current,
     children: [children, isOpen && /*#__PURE__*/jsx(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__*/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__*/jsx(FloatingOverlay, {
+        lockScroll: true,
+        style: {
+          zIndex: "var(--z-overlay-mask)",
+          position: "absolute",
+          overflow: "hidden"
+        },
+        children: /*#__PURE__*/jsx(FloatingFocusManager, {
+          context: context,
+          children: /*#__PURE__*/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
+          }))
+        })
+      })
     })]
   });
-};
+}
 
 export { ContextMenu };