@marcoschwartz/lite-ui 0.7.0 → 0.7.1

package/dist/index.mjs

@@ -927,7 +927,8 @@ TextInput.displayName = "TextInput";
 
 // src/components/ActionMenu.tsx
 import { useState as useState5, useRef as useRef2, useEffect as useEffect5 } from "react";
-import { jsx as jsx41, jsxs as jsxs10 } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+import { Fragment as Fragment6, jsx as jsx41, jsxs as jsxs10 } from "react/jsx-runtime";
 var ActionMenu = ({
   items,
   trigger,
@@ -935,10 +936,16 @@ var ActionMenu = ({
 }) => {
   const { themeName } = useTheme();
   const [isOpen, setIsOpen] = useState5(false);
+  const [menuPosition, setMenuPosition] = useState5(null);
+  const [mounted, setMounted] = useState5(false);
   const menuRef = useRef2(null);
+  const triggerRef = useRef2(null);
+  useEffect5(() => {
+    setMounted(true);
+  }, []);
   useEffect5(() => {
     const handleClickOutside = (event) => {
-      if (menuRef.current && !menuRef.current.contains(event.target)) {
+      if (menuRef.current && !menuRef.current.contains(event.target) && triggerRef.current && !triggerRef.current.contains(event.target)) {
         setIsOpen(false);
       }
     };
@@ -947,7 +954,20 @@ var ActionMenu = ({
       return () => document.removeEventListener("mousedown", handleClickOutside);
     }
   }, [isOpen]);
+  useEffect5(() => {
+    if (isOpen && triggerRef.current) {
+      const rect = triggerRef.current.getBoundingClientRect();
+      const menuWidth = 224;
+      setMenuPosition({
+        top: rect.bottom + 8,
+        left: position === "left" ? rect.left : rect.right - menuWidth
+      });
+    } else {
+      setMenuPosition(null);
+    }
+  }, [isOpen, position]);
   const handleItemClick = (item) => {
+    if (item.type === "divider") return;
     if (!item.disabled) {
       item.onClick();
       setIsOpen(false);
@@ -963,15 +983,27 @@ var ActionMenu = ({
   );
   const menuBaseStyles = themeName === "minimalistic" ? "bg-black border-2 border-white" : "bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-lg";
   const itemBaseStyles = themeName === "minimalistic" ? "text-white hover:bg-white hover:text-black transition-colors duration-200" : "text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors";
-  const positionClass = position === "left" ? "left-0" : "right-0";
-  return /* @__PURE__ */ jsxs10("div", { className: "relative inline-block", ref: menuRef, children: [
-    /* @__PURE__ */ jsx41("div", { onClick: () => setIsOpen(!isOpen), children: trigger || defaultTrigger }),
-    isOpen && /* @__PURE__ */ jsx41(
-      "div",
-      {
-        className: `absolute ${positionClass} mt-2 w-56 rounded-lg ${menuBaseStyles} z-50 overflow-hidden`,
-        style: { minWidth: "14rem" },
-        children: items.map((item, index) => /* @__PURE__ */ jsxs10(
+  const menu = isOpen && mounted && menuPosition ? /* @__PURE__ */ jsx41(
+    "div",
+    {
+      ref: menuRef,
+      className: `fixed w-56 rounded-lg ${menuBaseStyles} z-[9999] max-h-[80vh] overflow-auto`,
+      style: {
+        minWidth: "14rem",
+        top: `${menuPosition.top}px`,
+        left: `${menuPosition.left}px`
+      },
+      children: items.map((item, index) => {
+        if (item.type === "divider") {
+          return /* @__PURE__ */ jsx41(
+            "div",
+            {
+              className: "my-1 border-t border-gray-200 dark:border-gray-700"
+            },
+            index
+          );
+        }
+        return /* @__PURE__ */ jsxs10(
           "button",
           {
             onClick: () => handleItemClick(item),
@@ -983,9 +1015,13 @@ var ActionMenu = ({
             ]
           },
           index
-        ))
-      }
-    )
+        );
+      })
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs10(Fragment6, { children: [
+    /* @__PURE__ */ jsx41("div", { className: "relative inline-block", ref: triggerRef, children: /* @__PURE__ */ jsx41("div", { onClick: () => setIsOpen(!isOpen), children: trigger || defaultTrigger }) }),
+    mounted && createPortal(menu, document.body)
   ] });
 };
 
@@ -1245,33 +1281,42 @@ function Table({
   const { theme } = useTheme();
   return /* @__PURE__ */ jsxs15("div", { className: `overflow-x-auto ${className}`, children: [
     /* @__PURE__ */ jsxs15("table", { className: "w-full text-left", children: [
-      /* @__PURE__ */ jsx49("thead", { className: "bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsx49("tr", { children: columns.map((column) => /* @__PURE__ */ jsx49(
-        "th",
-        {
-          className: "px-6 py-3 text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider",
-          style: { width: column.width },
-          children: column.title
-        },
-        column.key
-      )) }) }),
-      /* @__PURE__ */ jsx49("tbody", { className: "bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700", children: data.map((row, rowIndex) => /* @__PURE__ */ jsx49(
-        "tr",
-        {
-          className: `
-                ${striped && rowIndex % 2 === 1 ? "bg-gray-50 dark:bg-gray-800/50" : ""}
-                ${hoverable ? "hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors" : ""}
-              `,
-          children: columns.map((column) => /* @__PURE__ */ jsx49(
-            "td",
-            {
-              className: "px-6 py-4 text-sm text-gray-900 dark:text-gray-100",
-              children: column.render ? column.render(row[column.key], row, rowIndex) : row[column.key]
-            },
-            column.key
-          ))
-        },
-        row[keyField] || rowIndex
-      )) })
+      /* @__PURE__ */ jsx49("thead", { className: "bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsx49("tr", { children: columns.map((column, colIndex) => {
+        const isLast = colIndex === columns.length - 1;
+        return /* @__PURE__ */ jsx49(
+          "th",
+          {
+            className: isLast ? "px-6 py-3 text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider relative" : "px-6 py-3 text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider",
+            style: { width: column.width },
+            children: column.title
+          },
+          column.key
+        );
+      }) }) }),
+      /* @__PURE__ */ jsx49("tbody", { className: "bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700", children: data.map((row, rowIndex) => {
+        const rowClasses = [
+          striped && rowIndex % 2 === 1 ? "bg-gray-50 dark:bg-gray-800/50" : "",
+          hoverable ? "hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors" : ""
+        ].filter(Boolean).join(" ");
+        return /* @__PURE__ */ jsx49(
+          "tr",
+          {
+            className: rowClasses,
+            children: columns.map((column, colIndex) => {
+              const isLast = colIndex === columns.length - 1;
+              return /* @__PURE__ */ jsx49(
+                "td",
+                {
+                  className: isLast ? "px-6 py-4 text-sm text-gray-900 dark:text-gray-100 overflow-visible" : "px-6 py-4 text-sm text-gray-900 dark:text-gray-100",
+                  children: column.render ? column.render(row[column.key], row, rowIndex) : row[column.key]
+                },
+                column.key
+              );
+            })
+          },
+          row[keyField] || rowIndex
+        );
+      }) })
     ] }),
     data.length === 0 && /* @__PURE__ */ jsx49("div", { className: "text-center py-8 text-gray-500 dark:text-gray-400", children: "No data available" })
   ] });