@farmzone/fz-react-ui 1.0.9 → 1.0.11

package/dist/index.js

@@ -3454,8 +3454,8 @@ var VARIANT_CONFIG = {
     closeBtn: "text-gray-400 group-hover:text-gray-600"
   },
   "system-light": {
-    container: "bg-gray-50 border-gray-200",
-    iconBg: "bg-white border border-gray-200 shadow-sm rounded-lg",
+    container: "bg-[#ededed] border-gray-200",
+    iconBg: "bg-white border border-gray-200 shadow-xs rounded-lg",
     iconColor: "text-slate-600",
     titleColor: "text-gray-900",
     descColor: "text-gray-500",
@@ -7756,7 +7756,7 @@ function PageFilter(props) {
             value: currentValue,
             onChange: handleSelectChange(optionKey),
             options: option.options,
-            placeholder: "\uC120\uD0DD",
+            placeholder: option.placeholder || "\uC120\uD0DD",
             canReset: option.canReset ?? true,
             containerClassName: option.containerClassName ?? "w-30"
           }
@@ -7926,6 +7926,15 @@ function MultiTabBar(props) {
   const [draggingId, setDraggingId] = useState(null);
   const [dropTargetId, setDropTargetId] = useState(null);
   const [dropSide, setDropSide] = useState("before");
+  const draggingIdRef = useRef(null);
+  const dropTargetIdRef = useRef(null);
+  const dropSideRef = useRef("before");
+  const tabsRef = useRef(tabs);
+  const dropHandledRef = useRef(false);
+  draggingIdRef.current = draggingId;
+  dropTargetIdRef.current = dropTargetId;
+  dropSideRef.current = dropSide;
+  tabsRef.current = tabs;
   useEffect(() => {
     if (!activeTabId || !scrollRef.current) return;
     const el = tabRefs.current.get(activeTabId);
@@ -7963,42 +7972,100 @@ function MultiTabBar(props) {
     el.addEventListener("wheel", onWheel, { passive: false });
     return () => el.removeEventListener("wheel", onWheel);
   }, []);
+  const resolveDropPosition = (clientX) => {
+    for (const [tabId, el] of tabRefs.current) {
+      if (tabId === draggingIdRef.current) continue;
+      const rect = el.getBoundingClientRect();
+      if (clientX >= rect.left && clientX < rect.right) {
+        setDropSide(clientX < rect.left + rect.width / 2 ? "before" : "after");
+        setDropTargetId(tabId);
+        return;
+      }
+    }
+    let rightmostTabId = null;
+    let maxRight = -Infinity;
+    for (const [tabId, el] of tabRefs.current) {
+      if (tabId === draggingIdRef.current) continue;
+      const rect = el.getBoundingClientRect();
+      if (rect.right > maxRight) {
+        maxRight = rect.right;
+        rightmostTabId = tabId;
+      }
+    }
+    if (rightmostTabId && clientX >= maxRight) {
+      setDropSide("after");
+      setDropTargetId(rightmostTabId);
+    }
+  };
+  const reorderTabs = (targetTabId, side, sourceTabs, sourceId) => {
+    if (!onTabsReorder || sourceId === targetTabId) return;
+    const fromIdx = sourceTabs.findIndex((t) => t.id === sourceId);
+    if (fromIdx === -1) return;
+    const newTabs = [...sourceTabs];
+    const moved = newTabs.splice(fromIdx, 1)[0];
+    let insertIdx = newTabs.findIndex((t) => t.id === targetTabId);
+    if (insertIdx === -1) return;
+    if (side === "after") insertIdx += 1;
+    newTabs.splice(insertIdx, 0, moved);
+    onTabsReorder(newTabs);
+  };
+  useEffect(() => {
+    if (!onTabsReorder) return;
+    const onDocDragOver = (e) => {
+      if (!draggingIdRef.current) return;
+      e.preventDefault();
+      resolveDropPosition(e.clientX);
+    };
+    const onDocDrop = (e) => {
+      if (dropHandledRef.current) {
+        dropHandledRef.current = false;
+        return;
+      }
+      e.preventDefault();
+      const id = draggingIdRef.current;
+      const target = dropTargetIdRef.current;
+      if (id && target) reorderTabs(target, dropSideRef.current, tabsRef.current, id);
+      setDraggingId(null);
+      setDropTargetId(null);
+    };
+    document.addEventListener("dragover", onDocDragOver);
+    document.addEventListener("drop", onDocDrop);
+    return () => {
+      document.removeEventListener("dragover", onDocDragOver);
+      document.removeEventListener("drop", onDocDrop);
+    };
+  }, [onTabsReorder]);
   const handleDragStart = (e, tabId) => {
     setDraggingId(tabId);
     e.dataTransfer.effectAllowed = "move";
   };
-  const handleDragOver = (e, tabId) => {
+  const handleDrop = (e, targetTabId) => {
     e.preventDefault();
-    if (tabId === draggingId) return;
-    e.dataTransfer.dropEffect = "move";
-    const rect = e.currentTarget.getBoundingClientRect();
-    setDropSide(e.clientX < rect.left + rect.width / 2 ? "before" : "after");
-    setDropTargetId(tabId);
+    e.stopPropagation();
+    dropHandledRef.current = true;
+    const id = draggingIdRef.current;
+    if (id && id !== targetTabId) reorderTabs(targetTabId, dropSideRef.current, tabsRef.current, id);
+    setDraggingId(null);
+    setDropTargetId(null);
   };
-  const handleDrop = (e, targetTabId) => {
+  const handleContainerDrop = (e) => {
     e.preventDefault();
-    if (!draggingId || draggingId === targetTabId) {
-      setDraggingId(null);
-      setDropTargetId(null);
-      return;
-    }
-    if (onTabsReorder) {
-      const fromIdx = tabs.findIndex((t) => t.id === draggingId);
-      if (fromIdx !== -1) {
-        const newTabs = [...tabs];
+    dropHandledRef.current = true;
+    const id = draggingIdRef.current;
+    if (id && onTabsReorder) {
+      const fromIdx = tabsRef.current.findIndex((t) => t.id === id);
+      if (fromIdx !== -1 && fromIdx < tabsRef.current.length - 1) {
+        const newTabs = [...tabsRef.current];
         const moved = newTabs.splice(fromIdx, 1)[0];
-        let insertIdx = newTabs.findIndex((t) => t.id === targetTabId);
-        if (insertIdx !== -1) {
-          if (dropSide === "after") insertIdx += 1;
-          newTabs.splice(insertIdx, 0, moved);
-          onTabsReorder(newTabs);
-        }
+        newTabs.push(moved);
+        onTabsReorder(newTabs);
       }
     }
     setDraggingId(null);
     setDropTargetId(null);
   };
   const handleDragEnd = () => {
+    dropHandledRef.current = false;
     setDraggingId(null);
     setDropTargetId(null);
   };
@@ -8029,6 +8096,10 @@ function MultiTabBar(props) {
         className: `flex-1 min-w-0 flex items-end gap-0.5 ${s.scrollPadding} overflow-x-auto [&::-webkit-scrollbar]:hidden`,
         style: { scrollbarWidth: "none" },
         onScroll: updateFades,
+        onDragOver: (e) => {
+          if (draggingId) e.preventDefault();
+        },
+        onDrop: handleContainerDrop,
         children: tabs.map((tab) => {
           const isActive = tab.id === activeTabId;
           const isDraggingThis = tab.id === draggingId;
@@ -8045,7 +8116,6 @@ function MultiTabBar(props) {
                 if (!isActive) onTabClick(tab.id);
               },
               onDragStart: (e) => handleDragStart(e, tab.id),
-              onDragOver: (e) => handleDragOver(e, tab.id),
               onDrop: (e) => handleDrop(e, tab.id),
               onDragEnd: handleDragEnd,
               className: `