@marcoschwartz/lite-ui 0.7.0 → 0.7.1

package/dist/index.d.mts

@@ -105,13 +105,16 @@ interface TextInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement
 }
 declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;
 
-interface ActionMenuItem {
+type ActionMenuItem = {
+    type?: 'item';
     label: string;
     onClick: () => void;
     icon?: React.ReactNode;
     disabled?: boolean;
     variant?: 'default' | 'danger';
-}
+} | {
+    type: 'divider';
+};
 interface ActionMenuProps {
     items: ActionMenuItem[];
     trigger?: React.ReactNode;

package/dist/index.d.ts

@@ -105,13 +105,16 @@ interface TextInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement
 }
 declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;
 
-interface ActionMenuItem {
+type ActionMenuItem = {
+    type?: 'item';
     label: string;
     onClick: () => void;
     icon?: React.ReactNode;
     disabled?: boolean;
     variant?: 'default' | 'danger';
-}
+} | {
+    type: 'divider';
+};
 interface ActionMenuProps {
     items: ActionMenuItem[];
     trigger?: React.ReactNode;

package/dist/index.js

@@ -1029,6 +1029,7 @@ TextInput.displayName = "TextInput";
 
 // src/components/ActionMenu.tsx
 var import_react8 = require("react");
+var import_react_dom = require("react-dom");
 var import_jsx_runtime41 = require("react/jsx-runtime");
 var ActionMenu = ({
   items,
@@ -1037,10 +1038,16 @@ var ActionMenu = ({
 }) => {
   const { themeName } = useTheme();
   const [isOpen, setIsOpen] = (0, import_react8.useState)(false);
+  const [menuPosition, setMenuPosition] = (0, import_react8.useState)(null);
+  const [mounted, setMounted] = (0, import_react8.useState)(false);
   const menuRef = (0, import_react8.useRef)(null);
+  const triggerRef = (0, import_react8.useRef)(null);
+  (0, import_react8.useEffect)(() => {
+    setMounted(true);
+  }, []);
   (0, import_react8.useEffect)(() => {
     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);
       }
     };
@@ -1049,7 +1056,20 @@ var ActionMenu = ({
       return () => document.removeEventListener("mousedown", handleClickOutside);
     }
   }, [isOpen]);
+  (0, import_react8.useEffect)(() => {
+    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);
@@ -1065,15 +1085,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__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "relative inline-block", ref: menuRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { onClick: () => setIsOpen(!isOpen), children: trigger || defaultTrigger }),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-      "div",
-      {
-        className: `absolute ${positionClass} mt-2 w-56 rounded-lg ${menuBaseStyles} z-50 overflow-hidden`,
-        style: { minWidth: "14rem" },
-        children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+  const menu = isOpen && mounted && menuPosition ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    "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__ */ (0, import_jsx_runtime41.jsx)(
+            "div",
+            {
+              className: "my-1 border-t border-gray-200 dark:border-gray-700"
+            },
+            index
+          );
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
           "button",
           {
             onClick: () => handleItemClick(item),
@@ -1085,9 +1117,13 @@ var ActionMenu = ({
             ]
           },
           index
-        ))
-      }
-    )
+        );
+      })
+    }
+  ) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "relative inline-block", ref: triggerRef, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { onClick: () => setIsOpen(!isOpen), children: trigger || defaultTrigger }) }),
+    mounted && (0, import_react_dom.createPortal)(menu, document.body)
   ] });
 };
 
@@ -1347,33 +1383,42 @@ function Table({
   const { theme } = useTheme();
   return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: `overflow-x-auto ${className}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("table", { className: "w-full text-left", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("thead", { className: "bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("tr", { children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-        "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__ */ (0, import_jsx_runtime49.jsx)("tbody", { className: "bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700", children: data.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-        "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__ */ (0, import_jsx_runtime49.jsx)(
-            "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__ */ (0, import_jsx_runtime49.jsx)("thead", { className: "bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("tr", { children: columns.map((column, colIndex) => {
+        const isLast = colIndex === columns.length - 1;
+        return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+          "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__ */ (0, import_jsx_runtime49.jsx)("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__ */ (0, import_jsx_runtime49.jsx)(
+          "tr",
+          {
+            className: rowClasses,
+            children: columns.map((column, colIndex) => {
+              const isLast = colIndex === columns.length - 1;
+              return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                "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__ */ (0, import_jsx_runtime49.jsx)("div", { className: "text-center py-8 text-gray-500 dark:text-gray-400", children: "No data available" })
   ] });