organify-ui 0.3.13 → 0.3.15

package/dist/index.js

@@ -16,6 +16,7 @@ import * as ProgressPrimitive from '@radix-ui/react-progress';
 import { X, XIcon, GripVertical, Check, ChevronRight, Circle, Search, MoreHorizontal, AlertCircle, AlertTriangle, CheckCircle2, Info, Sparkles, Plus, Zap, Trash2, Calendar } from 'lucide-react';
 import { cva } from 'class-variance-authority';
 import * as SheetPrimitive from '@radix-ui/react-dialog';
+import { createPortal } from 'react-dom';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
@@ -7146,7 +7147,7 @@ function KanbanBoard({
       {
         "data-tour": "kanban-board",
         className: cn(
-          "bg-void snap-x snap-mandatory sm:snap-none",
+          "flex h-full overflow-x-auto gap-3 p-4 bg-void snap-x snap-mandatory sm:snap-none",
           "scrollbar-none",
           className
         ),
@@ -7530,11 +7531,14 @@ function BoardsSwitcher({
   const [isOpen, setIsOpen] = React5.useState(false);
   const [isCreating, setIsCreating] = React5.useState(false);
   const [newBoardName, setNewBoardName] = React5.useState("");
+  const [menuPos, setMenuPos] = React5.useState(null);
+  const triggerRef = React5.useRef(null);
   const dropdownRef = React5.useRef(null);
   const createInputRef = React5.useRef(null);
   React5.useEffect(() => {
+    if (!isOpen) return;
     function handleClickOutside(event) {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+      if (!triggerRef.current?.contains(event.target) && !dropdownRef.current?.contains(event.target)) {
         setIsOpen(false);
         setIsCreating(false);
         setNewBoardName("");
@@ -7542,10 +7546,27 @@ function BoardsSwitcher({
     }
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
+  }, [isOpen]);
+  React5.useEffect(() => {
+    if (!isOpen) return;
+    const close = () => setIsOpen(false);
+    window.addEventListener("scroll", close, true);
+    window.addEventListener("resize", close);
+    return () => {
+      window.removeEventListener("scroll", close, true);
+      window.removeEventListener("resize", close);
+    };
+  }, [isOpen]);
   React5.useEffect(() => {
     if (isCreating) createInputRef.current?.focus();
   }, [isCreating]);
+  const handleToggle = () => {
+    if (!isOpen) {
+      const rect = triggerRef.current?.getBoundingClientRect();
+      if (rect) setMenuPos({ top: rect.bottom + 4, left: rect.left });
+    }
+    setIsOpen((v) => !v);
+  };
   const activeBoard = boards.find((b) => b.id === activeBoardId);
   const handleCreate = () => {
     const trimmed = newBoardName.trim();
@@ -7555,11 +7576,89 @@ function BoardsSwitcher({
       setIsCreating(false);
     }
   };
-  return /* @__PURE__ */ jsxs("div", { ref: dropdownRef, "data-tour": "board-switcher", className: cn("relative z-[10000]", className), children: [
+  const dropdown = isOpen && menuPos ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: dropdownRef,
+      style: { position: "fixed", top: menuPos.top, left: menuPos.left, zIndex: 9999 },
+      className: cn(
+        "min-w-[240px]",
+        "bg-elevated/95 backdrop-blur-xl border border-theme-subtle rounded-xl shadow-2xl",
+        "animate-in fade-in slide-in-from-top-2 duration-200"
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "p-1.5", children: [
+        /* @__PURE__ */ jsx("div", { className: "max-h-[240px] overflow-y-auto scrollbar-none space-y-0.5", children: boards.map((board) => {
+          const isActive = board.id === activeBoardId;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => {
+                onBoardChange(board.id);
+                setIsOpen(false);
+              },
+              className: cn(
+                "w-full flex items-center gap-2 px-3 py-2 rounded-lg text-xs",
+                "transition-colors",
+                isActive ? "bg-primary/10 text-primary-light" : "text-theme hover:bg-theme-highlight"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "w-2.5 h-2.5 rounded shrink-0",
+                    style: { backgroundColor: board.color || "#7C3AED" }
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "flex-1 text-left truncate", children: board.name }),
+                board.visibility === "private" && /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", className: "text-theme-muted shrink-0", children: [
+                  /* @__PURE__ */ jsx("rect", { x: "3", y: "7", width: "10", height: "7", rx: "1.5", stroke: "currentColor", strokeWidth: "1.2" }),
+                  /* @__PURE__ */ jsx("path", { d: "M5 7V5a3 3 0 016 0v2", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round" })
+                ] }),
+                board.isDefault && /* @__PURE__ */ jsx(Badge, { className: "text-[9px] px-1.5 py-0 h-4 bg-primary/10 text-primary-light border-primary/20", children: "Padr\xE3o" }),
+                board.taskCount != null && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-theme-muted", children: board.taskCount })
+              ]
+            },
+            board.id
+          );
+        }) }),
+        onCreateBoard && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "h-px bg-theme-subtle my-1" }),
+          isCreating ? /* @__PURE__ */ jsx("div", { className: "px-2 py-1.5", children: /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: createInputRef,
+              value: newBoardName,
+              onChange: (e) => setNewBoardName(e.target.value),
+              onKeyDown: (e) => {
+                if (e.key === "Enter") handleCreate();
+                if (e.key === "Escape") {
+                  setIsCreating(false);
+                  setNewBoardName("");
+                }
+              },
+              placeholder: "Nome do board...",
+              className: "w-full text-xs text-theme bg-transparent outline-none placeholder:text-theme-muted"
+            }
+          ) }) : /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => setIsCreating(true),
+              className: "w-full flex items-center gap-2 px-3 py-2 rounded-lg text-xs text-theme-muted hover:text-theme hover:bg-theme-highlight transition-colors",
+              children: [
+                /* @__PURE__ */ jsx(OrgPlus, { className: "w-3 h-3" }),
+                "Criar board"
+              ]
+            }
+          )
+        ] })
+      ] })
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs("div", { ref: triggerRef, "data-tour": "board-switcher", className: cn("relative inline-flex", className), children: [
     /* @__PURE__ */ jsxs(
       "button",
       {
-        onClick: () => setIsOpen(!isOpen),
+        onClick: handleToggle,
         className: cn(
           "flex items-center gap-2 rounded-xl px-3 py-2",
           "bg-theme-glass backdrop-blur-md border border-theme-subtle",
@@ -7582,76 +7681,7 @@ function BoardsSwitcher({
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsx("div", { className: cn(
-      "absolute top-full left-0 mt-1 z-[10001] min-w-[240px]",
-      "bg-elevated/95 backdrop-blur-xl border border-theme-subtle rounded-xl shadow-2xl",
-      "animate-in fade-in slide-in-from-top-2 duration-200"
-    ), children: /* @__PURE__ */ jsxs("div", { className: "p-1.5", children: [
-      /* @__PURE__ */ jsx("div", { className: "max-h-[240px] overflow-y-auto scrollbar-none space-y-0.5", children: boards.map((board) => {
-        const isActive = board.id === activeBoardId;
-        return /* @__PURE__ */ jsxs(
-          "button",
-          {
-            onClick: () => {
-              onBoardChange(board.id);
-              setIsOpen(false);
-            },
-            className: cn(
-              "w-full flex items-center gap-2 px-3 py-2 rounded-lg text-xs",
-              "transition-colors",
-              isActive ? "bg-primary/10 text-primary-light" : "text-theme hover:bg-theme-highlight"
-            ),
-            children: [
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: "w-2.5 h-2.5 rounded shrink-0",
-                  style: { backgroundColor: board.color || "#7C3AED" }
-                }
-              ),
-              /* @__PURE__ */ jsx("span", { className: "flex-1 text-left truncate", children: board.name }),
-              board.visibility === "private" && /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", className: "text-theme-muted shrink-0", children: [
-                /* @__PURE__ */ jsx("rect", { x: "3", y: "7", width: "10", height: "7", rx: "1.5", stroke: "currentColor", strokeWidth: "1.2" }),
-                /* @__PURE__ */ jsx("path", { d: "M5 7V5a3 3 0 016 0v2", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round" })
-              ] }),
-              board.isDefault && /* @__PURE__ */ jsx(Badge, { className: "text-[9px] px-1.5 py-0 h-4 bg-primary/10 text-primary-light border-primary/20", children: "Padr\xE3o" }),
-              board.taskCount != null && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-theme-muted", children: board.taskCount })
-            ]
-          },
-          board.id
-        );
-      }) }),
-      onCreateBoard && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("div", { className: "h-px bg-theme-subtle my-1" }),
-        isCreating ? /* @__PURE__ */ jsx("div", { className: "px-2 py-1.5", children: /* @__PURE__ */ jsx(
-          "input",
-          {
-            ref: createInputRef,
-            value: newBoardName,
-            onChange: (e) => setNewBoardName(e.target.value),
-            onKeyDown: (e) => {
-              if (e.key === "Enter") handleCreate();
-              if (e.key === "Escape") {
-                setIsCreating(false);
-                setNewBoardName("");
-              }
-            },
-            placeholder: "Nome do board...",
-            className: "w-full text-xs text-theme bg-transparent outline-none placeholder:text-theme-muted"
-          }
-        ) }) : /* @__PURE__ */ jsxs(
-          "button",
-          {
-            onClick: () => setIsCreating(true),
-            className: "w-full flex items-center gap-2 px-3 py-2 rounded-lg text-xs text-theme-muted hover:text-theme hover:bg-theme-highlight transition-colors",
-            children: [
-              /* @__PURE__ */ jsx(OrgPlus, { className: "w-3 h-3" }),
-              "Criar board"
-            ]
-          }
-        )
-      ] })
-    ] }) })
+    typeof document !== "undefined" && dropdown && createPortal(dropdown, document.body)
   ] });
 }
 BoardsSwitcher.displayName = "BoardsSwitcher";
@@ -7669,29 +7699,117 @@ function SprintFilter({
   className
 }) {
   const [isOpen, setIsOpen] = React5.useState(false);
+  const [menuPos, setMenuPos] = React5.useState(null);
+  const triggerRef = React5.useRef(null);
   const dropdownRef = React5.useRef(null);
   React5.useEffect(() => {
+    if (!isOpen) return;
     function handleClickOutside(event) {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+      if (!triggerRef.current?.contains(event.target) && !dropdownRef.current?.contains(event.target)) {
         setIsOpen(false);
       }
     }
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
+  }, [isOpen]);
+  React5.useEffect(() => {
+    if (!isOpen) return;
+    const close = () => setIsOpen(false);
+    window.addEventListener("scroll", close, true);
+    window.addEventListener("resize", close);
+    return () => {
+      window.removeEventListener("scroll", close, true);
+      window.removeEventListener("resize", close);
+    };
+  }, [isOpen]);
+  const handleToggle = () => {
+    if (!isOpen) {
+      const rect = triggerRef.current?.getBoundingClientRect();
+      if (rect) setMenuPos({ top: rect.bottom + 4, left: rect.left });
+    }
+    setIsOpen((v) => !v);
+  };
   const selectedSprint = selectedSprintId ? sprints.find((s) => s.id === selectedSprintId) : null;
   const displayLabel = selectedSprint ? selectedSprint.name : selectedSprintId === null ? "Todas as tarefas" : activeSprint?.name ?? "Todas as tarefas";
   const sortedSprints = React5.useMemo(() => {
     const order = { ACTIVE: 0, PLANNED: 1, COMPLETED: 2 };
     return [...sprints].sort((a, b) => (order[a.status] ?? 9) - (order[b.status] ?? 9));
   }, [sprints]);
-  return /* @__PURE__ */ jsxs("div", { ref: dropdownRef, "data-tour": "sprint-switcher", className: cn("relative z-[10000]", className), children: [
-    /* @__PURE__ */ jsxs(
+  const dropdown = isOpen && menuPos ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: dropdownRef,
+      style: { position: "fixed", top: menuPos.top, left: menuPos.left, zIndex: 9999 },
+      className: cn(
+        "min-w-[220px]",
+        "bg-elevated/95 backdrop-blur-xl border border-theme-subtle rounded-xl shadow-2xl",
+        "animate-in fade-in slide-in-from-top-2 duration-200"
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "p-1.5 max-h-[280px] overflow-y-auto scrollbar-none", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => {
+              onSprintChange(null);
+              setIsOpen(false);
+            },
+            className: cn(
+              "w-full flex items-center gap-2 px-3 py-2 rounded-lg text-xs",
+              "transition-colors",
+              selectedSprintId === null ? "bg-primary/10 text-primary-light" : "text-theme-muted hover:bg-theme-highlight hover:text-theme"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "w-2 h-2 rounded-full bg-theme-muted shrink-0" }),
+              /* @__PURE__ */ jsx("span", { className: "flex-1 text-left", children: "Todas as tarefas" })
+            ]
+          }
+        ),
+        sortedSprints.length > 0 && /* @__PURE__ */ jsx("div", { className: "h-px bg-theme-subtle my-1" }),
+        sortedSprints.map((sprint) => {
+          const config = statusConfig2[sprint.status];
+          const isSelected = selectedSprintId === sprint.id;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => {
+                onSprintChange(sprint.id);
+                setIsOpen(false);
+              },
+              className: cn(
+                "w-full flex items-center gap-2 px-3 py-2 rounded-lg text-xs",
+                "transition-colors",
+                isSelected ? "bg-primary/10 text-primary-light" : "text-theme hover:bg-theme-highlight"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn("w-2 h-2 rounded-full shrink-0", {
+                      "bg-emerald-400": sprint.status === "ACTIVE",
+                      "bg-blue-400": sprint.status === "PLANNED",
+                      "bg-theme-muted": sprint.status === "COMPLETED"
+                    })
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "flex-1 text-left truncate", children: sprint.name }),
+                /* @__PURE__ */ jsx(Badge, { className: cn("text-[9px] px-1.5 py-0 h-4 border", config.className), children: config.label }),
+                sprint.taskCount != null && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-theme-muted", children: sprint.taskCount })
+              ]
+            },
+            sprint.id
+          );
+        }),
+        sortedSprints.length === 0 && /* @__PURE__ */ jsx("div", { className: "px-3 py-4 text-center text-xs text-theme-muted", children: "Nenhuma sprint criada" })
+      ] })
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs("div", { "data-tour": "sprint-switcher", className: cn("relative", className), children: [
+    /* @__PURE__ */ jsx("div", { ref: triggerRef, className: "inline-flex", children: /* @__PURE__ */ jsxs(
       Button,
       {
         variant: "ghost",
         size: "sm",
-        onClick: () => setIsOpen(!isOpen),
+        onClick: handleToggle,
         className: cn(
           "h-8 gap-1.5 text-xs font-medium",
           compact ? "px-2" : "px-3 gap-2",
@@ -7705,67 +7823,8 @@ function SprintFilter({
           /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", className: cn("transition-transform shrink-0", isOpen && "rotate-180"), children: /* @__PURE__ */ jsx("path", { d: "M2.5 3.75L5 6.25L7.5 3.75", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round" }) })
         ]
       }
-    ),
-    isOpen && /* @__PURE__ */ jsx("div", { className: cn(
-      "absolute top-full left-0 mt-1 z-[10001] min-w-[220px]",
-      "bg-elevated/95 backdrop-blur-xl border border-theme-subtle rounded-xl shadow-2xl",
-      "animate-in fade-in slide-in-from-top-2 duration-200"
-    ), children: /* @__PURE__ */ jsxs("div", { className: "p-1.5 max-h-[280px] overflow-y-auto scrollbar-none", children: [
-      /* @__PURE__ */ jsxs(
-        "button",
-        {
-          onClick: () => {
-            onSprintChange(null);
-            setIsOpen(false);
-          },
-          className: cn(
-            "w-full flex items-center gap-2 px-3 py-2 rounded-lg text-xs",
-            "transition-colors",
-            selectedSprintId === null ? "bg-primary/10 text-primary-light" : "text-theme-muted hover:bg-theme-highlight hover:text-theme"
-          ),
-          children: [
-            /* @__PURE__ */ jsx("span", { className: "w-2 h-2 rounded-full bg-theme-muted shrink-0" }),
-            /* @__PURE__ */ jsx("span", { className: "flex-1 text-left", children: "Todas as tarefas" })
-          ]
-        }
-      ),
-      sortedSprints.length > 0 && /* @__PURE__ */ jsx("div", { className: "h-px bg-theme-subtle my-1" }),
-      sortedSprints.map((sprint) => {
-        const config = statusConfig2[sprint.status];
-        const isSelected = selectedSprintId === sprint.id;
-        return /* @__PURE__ */ jsxs(
-          "button",
-          {
-            onClick: () => {
-              onSprintChange(sprint.id);
-              setIsOpen(false);
-            },
-            className: cn(
-              "w-full flex items-center gap-2 px-3 py-2 rounded-lg text-xs",
-              "transition-colors",
-              isSelected ? "bg-primary/10 text-primary-light" : "text-theme hover:bg-theme-highlight"
-            ),
-            children: [
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: cn("w-2 h-2 rounded-full shrink-0", {
-                    "bg-emerald-400": sprint.status === "ACTIVE",
-                    "bg-blue-400": sprint.status === "PLANNED",
-                    "bg-theme-muted": sprint.status === "COMPLETED"
-                  })
-                }
-              ),
-              /* @__PURE__ */ jsx("span", { className: "flex-1 text-left truncate", children: sprint.name }),
-              /* @__PURE__ */ jsx(Badge, { className: cn("text-[9px] px-1.5 py-0 h-4 border", config.className), children: config.label }),
-              sprint.taskCount != null && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-theme-muted", children: sprint.taskCount })
-            ]
-          },
-          sprint.id
-        );
-      }),
-      sortedSprints.length === 0 && /* @__PURE__ */ jsx("div", { className: "px-3 py-4 text-center text-xs text-theme-muted", children: "Nenhuma sprint criada" })
-    ] }) })
+    ) }),
+    typeof document !== "undefined" && dropdown && createPortal(dropdown, document.body)
   ] });
 }
 SprintFilter.displayName = "SprintFilter";