@farmzone/fz-react-ui 1.0.10 → 1.0.12

package/dist/index.js

@@ -7204,9 +7204,13 @@ function SelectWithInputField(props) {
   }, [defaultPrefix, formValue, options]);
   const [selectedPrefix, setSelectedPrefix] = useState(prefix);
   const [prevFormValue, setPrevFormValue] = useState(formValue);
+  const isUserInputChangeRef = useRef(false);
   if (prevFormValue !== formValue) {
     setPrevFormValue(formValue);
-    setSelectedPrefix(formValue ? prefix : defaultPrefix);
+    if (!isUserInputChangeRef.current) {
+      setSelectedPrefix(formValue ? prefix : defaultPrefix);
+    }
+    isUserInputChangeRef.current = false;
   }
   useLayoutEffect(() => {
     if (readOnly) return;
@@ -7215,9 +7219,7 @@ function SelectWithInputField(props) {
     }
   }, [formValue, normalizedFormValue, onChange, readOnly]);
   if (readOnly) {
-    const prefixLabel = options.find((o) => String(o.value) === prefix)?.label ?? prefix;
-    const displayText = inputPart ? `${prefixLabel} ${inputPart}` : prefix ? prefixLabel : "\u2014";
-    return /* @__PURE__ */ jsx("div", { className: fieldControlWrapClass(className), children: /* @__PURE__ */ jsx("span", { className: FIELD_READONLY_TEXT_CLASS, children: displayText || "\u2014" }) });
+    return /* @__PURE__ */ jsx("div", { className: fieldControlWrapClass(className), children: /* @__PURE__ */ jsx("span", { className: FIELD_READONLY_TEXT_CLASS, children: formValue }) });
   }
   const updateCombined = (nextPrefix, nextInput) => {
     onChange(combineSelectWithInputValue(nextPrefix, nextInput));
@@ -7231,6 +7233,7 @@ function SelectWithInputField(props) {
     if (normalized) {
       validationCtx?.markFieldHadValue(String(config.name));
     }
+    isUserInputChangeRef.current = true;
     updateCombined(selectedPrefix, normalized);
   };
   const selectClass = resolveSelectClassNameProp(selectWithInputClassNames?.selectClassName, {
@@ -7269,6 +7272,7 @@ function SelectWithInputField(props) {
         },
         onBlur: (e) => {
           const normalized = normalizeInput(e.target.value.normalize("NFKC"));
+          isUserInputChangeRef.current = true;
           updateCombined(selectedPrefix, normalized);
           onBlur();
         }
@@ -7926,6 +7930,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,60 +7976,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) => {
-    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);
-  };
   const handleDrop = (e, targetTabId) => {
     e.preventDefault();
     e.stopPropagation();
-    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];
-        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);
-        }
-      }
-    }
+    dropHandledRef.current = true;
+    const id = draggingIdRef.current;
+    if (id && id !== targetTabId) reorderTabs(targetTabId, dropSideRef.current, tabsRef.current, id);
     setDraggingId(null);
     setDropTargetId(null);
   };
   const handleContainerDrop = (e) => {
     e.preventDefault();
-    if (!draggingId || !onTabsReorder) {
-      setDraggingId(null);
-      setDropTargetId(null);
-      return;
-    }
-    const fromIdx = tabs.findIndex((t) => t.id === draggingId);
-    if (fromIdx !== -1 && fromIdx < tabs.length - 1) {
-      const newTabs = [...tabs];
-      const moved = newTabs.splice(fromIdx, 1)[0];
-      newTabs.push(moved);
-      onTabsReorder(newTabs);
+    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];
+        newTabs.push(moved);
+        onTabsReorder(newTabs);
+      }
     }
     setDraggingId(null);
     setDropTargetId(null);
   };
   const handleDragEnd = () => {
+    dropHandledRef.current = false;
     setDraggingId(null);
     setDropTargetId(null);
   };
@@ -8067,7 +8120,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: `