@vesture/react 0.2.8 → 0.2.9

package/dist/index.js

@@ -3246,14 +3246,17 @@ import {
 var chip = "Combobox_chip__26nhic2";
 var chipRemove = "Combobox_chipRemove__26nhic3";
 var chipsWrapper = "Combobox_chipsWrapper__26nhic1";
-var emptyState2 = "Combobox_emptyState__26nhic7";
+var emptyState2 = "Combobox_emptyState__26nhic8";
 var inputEl = "Combobox_inputEl__26nhic4";
 var listbox = "Combobox_listbox__26nhic5";
 var option = "Combobox_option__26nhic6";
+var virtualSpacer = "Combobox_virtualSpacer__26nhic7";
 var wrapper9 = "Combobox_wrapper__26nhic0";
 
 // src/components/Combobox/Combobox.tsx
 import { jsx as jsx40, jsxs as jsxs23 } from "react/jsx-runtime";
+var DEFAULT_OPTION_HEIGHT = 37;
+var OVERSCAN = 5;
 function defaultFilter(options, inputText) {
   const query = inputText.trim().toLowerCase();
   if (!query) return options;
@@ -3276,6 +3279,8 @@ function Combobox({
   disabled = false,
   invalid,
   loading = false,
+  virtualizationThreshold = 50,
+  optionHeight = DEFAULT_OPTION_HEIGHT,
   id,
   className,
   ...rest
@@ -3302,8 +3307,37 @@ function Combobox({
     }
   }, [singleValue, multiple]);
   const inputRef = useRef9(null);
+  const listboxRef = useRef9(null);
   const listboxId = useId2();
+  const [scrollTop, setScrollTop] = useState14(0);
+  const [viewportHeight, setViewportHeight] = useState14(280);
   const filteredOptions = filterOptions(options, multiple ? inputText : open ? inputText : "");
+  const isVirtualized = filteredOptions.length >= virtualizationThreshold;
+  useEffect7(() => {
+    setScrollTop(0);
+    setActiveIndex(null);
+    if (listboxRef.current) listboxRef.current.scrollTop = 0;
+  }, [options]);
+  useEffect7(() => {
+    if (!open) return;
+    const node = listboxRef.current;
+    if (!node) return;
+    if (node.clientHeight > 0) setViewportHeight(node.clientHeight);
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry) setViewportHeight(entry.contentRect.height);
+    });
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [open]);
+  const totalHeight = filteredOptions.length * optionHeight;
+  const maxScrollTop = Math.max(0, totalHeight - viewportHeight);
+  const effectiveScrollTop = Math.min(scrollTop, maxScrollTop);
+  const visibleCount = Math.ceil(viewportHeight / optionHeight) + OVERSCAN * 2;
+  const startIndex = isVirtualized ? Math.max(0, Math.floor(effectiveScrollTop / optionHeight) - OVERSCAN) : 0;
+  const endIndex = isVirtualized ? Math.min(filteredOptions.length, startIndex + visibleCount) : filteredOptions.length;
+  const visibleOptions = filteredOptions.slice(startIndex, endIndex);
   const { refs, floatingStyles, context } = useFloating7({
     open,
     onOpenChange: setOpen,
@@ -3348,6 +3382,21 @@ function Combobox({
     setOpen(true);
     setActiveIndex(null);
   };
+  const scrollIndexIntoView = (index) => {
+    if (!isVirtualized) return;
+    const rowTop = index * optionHeight;
+    const rowBottom = rowTop + optionHeight;
+    let next = scrollTop;
+    if (rowTop < scrollTop) {
+      next = rowTop;
+    } else if (rowBottom > scrollTop + viewportHeight) {
+      next = rowBottom - viewportHeight;
+    } else {
+      return;
+    }
+    setScrollTop(next);
+    if (listboxRef.current) listboxRef.current.scrollTop = next;
+  };
   const moveActiveIndex = (direction2) => {
     if (filteredOptions.length === 0) return;
     let next = activeIndex ?? (direction2 === 1 ? -1 : filteredOptions.length);
@@ -3355,6 +3404,7 @@ function Combobox({
       next = (next + direction2 + filteredOptions.length) % filteredOptions.length;
       if (!filteredOptions[next]?.disabled) {
         setActiveIndex(next);
+        scrollIndexIntoView(next);
         return;
       }
     }
@@ -3448,14 +3498,40 @@ function Combobox({
     open ? /* @__PURE__ */ jsx40(FloatingPortal7, { children: /* @__PURE__ */ jsx40(
       "div",
       {
-        ref: refs.setFloating,
+        ref: (node) => {
+          refs.setFloating(node);
+          listboxRef.current = node;
+        },
         id: listboxId,
         role: "listbox",
         "aria-multiselectable": multiple || void 0,
         className: listbox,
         style: floatingStyles,
+        onScroll: (e) => setScrollTop(e.currentTarget.scrollTop),
         ...getFloatingProps(),
-        children: loading ? /* @__PURE__ */ jsx40("div", { className: emptyState2, children: "Loading\u2026" }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsx40("div", { className: emptyState2, children: noOptionsMessage }) : filteredOptions.map((opt, index) => {
+        children: loading ? /* @__PURE__ */ jsx40("div", { className: emptyState2, children: "Loading\u2026" }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsx40("div", { className: emptyState2, children: noOptionsMessage }) : isVirtualized ? /* @__PURE__ */ jsx40("div", { className: virtualSpacer, style: { height: totalHeight }, children: visibleOptions.map((opt, i) => {
+          const index = startIndex + i;
+          const isSelected = multiple ? selectedValues.includes(opt.value) : opt.value === singleValue;
+          return /* @__PURE__ */ jsx40(
+            "div",
+            {
+              id: `${listboxId}-option-${index}`,
+              role: "option",
+              "aria-selected": isSelected,
+              "aria-disabled": opt.disabled || void 0,
+              "data-active": activeIndex === index || void 0,
+              className: option,
+              style: { position: "absolute", top: index * optionHeight, left: 0, right: 0, height: optionHeight },
+              onMouseDown: (event) => {
+                event.preventDefault();
+                selectOption(opt);
+              },
+              onMouseEnter: () => setActiveIndex(index),
+              children: opt.label
+            },
+            opt.value
+          );
+        }) }) : filteredOptions.map((opt, index) => {
           const isSelected = multiple ? selectedValues.includes(opt.value) : opt.value === singleValue;
           return /* @__PURE__ */ jsx40(
             "div",