@lensui/lens-table 0.1.76 → 0.1.77

package/dist/index.cjs

@@ -336,6 +336,8 @@ function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownH
   const editorRef = (0, import_react2.useRef)(null);
   const popupRef = (0, import_react2.useRef)(null);
   const activeOptionRef = (0, import_react2.useRef)(null);
+  const popupReadyRef = (0, import_react2.useRef)(false);
+  const navigationSourceRef = (0, import_react2.useRef)(null);
   const originalValueRef = (0, import_react2.useRef)(value);
   const listboxId = (0, import_react2.useId)();
   const originalValue = originalValueRef.current;
@@ -344,7 +346,10 @@ function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownH
     const selectedIndex = options.findIndex((option) => option.value === value);
     return selectedIndex >= 0 ? selectedIndex : 0;
   });
-  const [popupStyle, setPopupStyle] = (0, import_react2.useState)({});
+  const [popupStyle, setPopupStyle] = (0, import_react2.useState)({
+    position: "fixed",
+    visibility: "hidden"
+  });
   const filteredOptions = (0, import_react2.useMemo)(() => {
     const query = inputValue.trim().toLocaleLowerCase();
     if (!query || query === originalValue.toLocaleLowerCase()) return options;
@@ -362,7 +367,8 @@ function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownH
           bottom: window.innerHeight - rect.top + 4,
           left: rect.left,
           width: rect.width,
-          maxHeight: Math.min(maxDropdownHeight, availableAbove)
+          maxHeight: Math.min(maxDropdownHeight, availableAbove),
+          visibility: popupReadyRef.current ? "visible" : "hidden"
         });
         return;
       }
@@ -371,7 +377,8 @@ function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownH
         top: rect.bottom + 4,
         left: rect.left,
         width: rect.width,
-        maxHeight: Math.min(maxDropdownHeight, Math.max(80, availableBelow))
+        maxHeight: Math.min(maxDropdownHeight, Math.max(80, availableBelow)),
+        visibility: popupReadyRef.current ? "visible" : "hidden"
       });
     };
     positionPopup();
@@ -383,8 +390,22 @@ function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownH
     };
   }, [maxDropdownHeight]);
   (0, import_react2.useLayoutEffect)(() => {
-    activeOptionRef.current?.scrollIntoView?.({ block: "nearest", inline: "nearest" });
-  }, [activeIndex, filteredOptions, popupStyle]);
+    if (popupReadyRef.current) return;
+    if (popupStyle.top === void 0 && popupStyle.bottom === void 0) return;
+    const selectedOption = popupRef.current?.querySelector('[aria-selected="true"]') ?? activeOptionRef.current;
+    selectedOption?.scrollIntoView?.({ block: "center", inline: "nearest" });
+    popupReadyRef.current = true;
+    setPopupStyle((current) => ({ ...current, visibility: "visible" }));
+  }, [popupStyle.bottom, popupStyle.top]);
+  (0, import_react2.useLayoutEffect)(() => {
+    if (!popupReadyRef.current) return;
+    if (navigationSourceRef.current === "keyboard") {
+      activeOptionRef.current?.scrollIntoView?.({ block: "nearest", inline: "nearest" });
+    } else if (navigationSourceRef.current === "filter" && popupRef.current) {
+      popupRef.current.scrollTop = 0;
+    }
+    navigationSourceRef.current = null;
+  }, [activeIndex, filteredOptions]);
   (0, import_react2.useEffect)(() => {
     const handleOutsidePointer = (event) => {
       const target = event.target;
@@ -404,10 +425,12 @@ function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownH
     if (event.key === "Escape") onCancel();
     if (event.key === "ArrowDown") {
       event.preventDefault();
+      navigationSourceRef.current = "keyboard";
       setActiveIndex((index) => Math.min(filteredOptions.length - 1, index + 1));
     }
     if (event.key === "ArrowUp") {
       event.preventDefault();
+      navigationSourceRef.current = "keyboard";
       setActiveIndex((index) => Math.max(0, index - 1));
     }
     if (event.key === "Enter") {
@@ -430,6 +453,7 @@ function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownH
         onChange: (event) => {
           setInputValue(event.target.value);
           onChange(event.target.value);
+          navigationSourceRef.current = "filter";
           setActiveIndex(0);
         },
         onKeyDown: handleKeyDown
@@ -445,7 +469,10 @@ function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownH
         "aria-selected": option.value === originalValue,
         className: `rvg-choice-item${index === activeIndex ? " is-active" : ""}${option.value === originalValue ? " is-selected" : ""}`,
         onPointerDown: (event) => event.preventDefault(),
-        onMouseEnter: () => setActiveIndex(index),
+        onMouseEnter: () => {
+          navigationSourceRef.current = "pointer";
+          setActiveIndex(index);
+        },
         onClick: () => selectOption(option),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: option.label }),

package/dist/index.js

@@ -306,6 +306,8 @@ function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownH
   const editorRef = useRef(null);
   const popupRef = useRef(null);
   const activeOptionRef = useRef(null);
+  const popupReadyRef = useRef(false);
+  const navigationSourceRef = useRef(null);
   const originalValueRef = useRef(value);
   const listboxId = useId2();
   const originalValue = originalValueRef.current;
@@ -314,7 +316,10 @@ function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownH
     const selectedIndex = options.findIndex((option) => option.value === value);
     return selectedIndex >= 0 ? selectedIndex : 0;
   });
-  const [popupStyle, setPopupStyle] = useState({});
+  const [popupStyle, setPopupStyle] = useState({
+    position: "fixed",
+    visibility: "hidden"
+  });
   const filteredOptions = useMemo(() => {
     const query = inputValue.trim().toLocaleLowerCase();
     if (!query || query === originalValue.toLocaleLowerCase()) return options;
@@ -332,7 +337,8 @@ function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownH
           bottom: window.innerHeight - rect.top + 4,
           left: rect.left,
           width: rect.width,
-          maxHeight: Math.min(maxDropdownHeight, availableAbove)
+          maxHeight: Math.min(maxDropdownHeight, availableAbove),
+          visibility: popupReadyRef.current ? "visible" : "hidden"
         });
         return;
       }
@@ -341,7 +347,8 @@ function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownH
         top: rect.bottom + 4,
         left: rect.left,
         width: rect.width,
-        maxHeight: Math.min(maxDropdownHeight, Math.max(80, availableBelow))
+        maxHeight: Math.min(maxDropdownHeight, Math.max(80, availableBelow)),
+        visibility: popupReadyRef.current ? "visible" : "hidden"
       });
     };
     positionPopup();
@@ -353,8 +360,22 @@ function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownH
     };
   }, [maxDropdownHeight]);
   useLayoutEffect(() => {
-    activeOptionRef.current?.scrollIntoView?.({ block: "nearest", inline: "nearest" });
-  }, [activeIndex, filteredOptions, popupStyle]);
+    if (popupReadyRef.current) return;
+    if (popupStyle.top === void 0 && popupStyle.bottom === void 0) return;
+    const selectedOption = popupRef.current?.querySelector('[aria-selected="true"]') ?? activeOptionRef.current;
+    selectedOption?.scrollIntoView?.({ block: "center", inline: "nearest" });
+    popupReadyRef.current = true;
+    setPopupStyle((current) => ({ ...current, visibility: "visible" }));
+  }, [popupStyle.bottom, popupStyle.top]);
+  useLayoutEffect(() => {
+    if (!popupReadyRef.current) return;
+    if (navigationSourceRef.current === "keyboard") {
+      activeOptionRef.current?.scrollIntoView?.({ block: "nearest", inline: "nearest" });
+    } else if (navigationSourceRef.current === "filter" && popupRef.current) {
+      popupRef.current.scrollTop = 0;
+    }
+    navigationSourceRef.current = null;
+  }, [activeIndex, filteredOptions]);
   useEffect(() => {
     const handleOutsidePointer = (event) => {
       const target = event.target;
@@ -374,10 +395,12 @@ function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownH
     if (event.key === "Escape") onCancel();
     if (event.key === "ArrowDown") {
       event.preventDefault();
+      navigationSourceRef.current = "keyboard";
       setActiveIndex((index) => Math.min(filteredOptions.length - 1, index + 1));
     }
     if (event.key === "ArrowUp") {
       event.preventDefault();
+      navigationSourceRef.current = "keyboard";
       setActiveIndex((index) => Math.max(0, index - 1));
     }
     if (event.key === "Enter") {
@@ -400,6 +423,7 @@ function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownH
         onChange: (event) => {
           setInputValue(event.target.value);
           onChange(event.target.value);
+          navigationSourceRef.current = "filter";
           setActiveIndex(0);
         },
         onKeyDown: handleKeyDown
@@ -415,7 +439,10 @@ function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownH
         "aria-selected": option.value === originalValue,
         className: `rvg-choice-item${index === activeIndex ? " is-active" : ""}${option.value === originalValue ? " is-selected" : ""}`,
         onPointerDown: (event) => event.preventDefault(),
-        onMouseEnter: () => setActiveIndex(index),
+        onMouseEnter: () => {
+          navigationSourceRef.current = "pointer";
+          setActiveIndex(index);
+        },
         onClick: () => selectOption(option),
         children: [
           /* @__PURE__ */ jsx3("span", { children: option.label }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lensui/lens-table",
-  "version": "0.1.76",
+  "version": "0.1.77",
   "description": "A lightweight, canvas-rendered React table component for LensUI.",
   "type": "module",
   "main": "./dist/index.cjs",