@parca/profile 0.19.125 → 0.19.126

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.19.126](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.125...@parca/profile@0.19.126) (2026-02-23)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.19.125](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.124...@parca/profile@0.19.125) (2026-02-18)
 
 **Note:** Version bump only for package @parca/profile

package/dist/SimpleMatchers/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/SimpleMatchers/Select.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAShF,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,GAAG,CAAC,OAAO,CAAC;IACpB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,aAAa,CAAC;CACxB;AAED,MAAM,WAAW,eAAgB,SAAQ,UAAU;IACjD,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,UAAU,EAAE,CAAC;CACtB;AAED,UAAU,iBAAiB;IACzB,KAAK,EAAE,iBAAiB,EAAE,GAAG,UAAU,EAAE,CAAC;IAC1C,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACpC,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAwUnE,CAAC;AAkDF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/SimpleMatchers/Select.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAU/E,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,GAAG,CAAC,OAAO,CAAC;IACpB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,aAAa,CAAC;CACxB;AAED,MAAM,WAAW,eAAgB,SAAQ,UAAU;IACjD,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,UAAU,EAAE,CAAC;CACtB;AAED,UAAU,iBAAiB;IACzB,KAAK,EAAE,iBAAiB,EAAE,GAAG,UAAU,EAAE,CAAC;IAC1C,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACpC,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAwXnE,CAAC;AA2CF,eAAe,YAAY,CAAC"}

package/dist/SimpleMatchers/Select.js

@@ -11,8 +11,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { Fragment, useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Icon } from '@iconify/react';
+import { useVirtualizer } from '@tanstack/react-virtual';
 import cx from 'classnames';
 import levenshtein from 'fast-levenshtein';
 import { Button, DividerWithLabel, RefreshButton, useParcaContext } from '@parca/components';
@@ -22,11 +23,11 @@ const CustomSelect = ({ items: itemsProp, selectedKey, onSelection, placeholder
     const [isOpen, setIsOpen] = useState(false);
     const [focusedIndex, setFocusedIndex] = useState(-1);
     const [searchTerm, setSearchTerm] = useState('');
+    const [debouncedSearchTerm, setDebouncedSearchTerm] = useState('');
     const [isRefetching, setIsRefetching] = useState(false);
     const containerRef = useRef(null);
     const optionsRef = useRef(null);
     const searchInputRef = useRef(null);
-    const optionRefs = useRef([]);
     const handleRefetch = useCallback(async () => {
         if (refetchValues == null || isRefetching)
             return;
@@ -38,26 +39,26 @@ const CustomSelect = ({ items: itemsProp, selectedKey, onSelection, placeholder
             setIsRefetching(false);
         }
     }, [refetchValues, isRefetching]);
-    let items = [];
-    if (itemsProp[0] != null && 'type' in itemsProp[0]) {
-        items = itemsProp.flatMap(item => item.values.map(v => ({ ...v, type: item.type })));
-    }
-    else {
-        items = itemsProp.map(item => ({ ...item, type: '' }));
-    }
-    const filteredItems = searchable
-        ? items
-            .filter(item => item.element.active.props.children
-            .toString()
-            .toLowerCase()
-            .includes(searchTerm.toLowerCase()))
-            .sort((a, b) => {
-            if (searchTerm === '') {
-                return a.key.localeCompare(b.key);
-            }
-            return levenshtein.get(a.key, searchTerm) - levenshtein.get(b.key, searchTerm);
-        })
-        : items;
+    useEffect(() => {
+        const timer = setTimeout(() => setDebouncedSearchTerm(searchTerm), 150);
+        return () => clearTimeout(timer);
+    }, [searchTerm]);
+    const items = useMemo(() => {
+        if (itemsProp[0] != null && 'type' in itemsProp[0]) {
+            return itemsProp.flatMap(item => item.values.map(v => ({ ...v, type: item.type })));
+        }
+        return itemsProp.map(item => ({ ...item, type: '' }));
+    }, [itemsProp]);
+    const filteredItems = useMemo(() => {
+        if (!searchable)
+            return items;
+        const lowerSearch = debouncedSearchTerm.toLowerCase();
+        const filtered = items.filter(item => item.element.active.props.children.toString().toLowerCase().includes(lowerSearch));
+        if (debouncedSearchTerm === '') {
+            return filtered.sort((a, b) => a.key.localeCompare(b.key));
+        }
+        return filtered.sort((a, b) => levenshtein.get(a.key, debouncedSearchTerm) - levenshtein.get(b.key, debouncedSearchTerm));
+    }, [items, debouncedSearchTerm, searchable]);
     const selection = editable ? selectedKey : items.find(v => v.key === selectedKey);
     useEffect(() => {
         const handleClickOutside = (event) => {
@@ -75,24 +76,6 @@ const CustomSelect = ({ items: itemsProp, selectedKey, onSelection, placeholder
             searchInputRef.current?.focus();
         }
     }, [isOpen, searchable]);
-    useEffect(() => {
-        if (focusedIndex !== -1 &&
-            optionsRef.current !== null &&
-            optionRefs.current[focusedIndex] !== null) {
-            const optionElement = optionRefs.current[focusedIndex];
-            const optionsContainer = optionsRef.current;
-            if (optionElement !== null && optionsContainer !== null) {
-                const optionRect = optionElement.getBoundingClientRect();
-                const containerRect = optionsContainer.getBoundingClientRect();
-                if (optionRect.bottom > containerRect.bottom) {
-                    optionsContainer.scrollTop += optionRect.bottom - containerRect.bottom;
-                }
-                else if (optionRect.top < containerRect.top) {
-                    optionsContainer.scrollTop -= containerRect.top - optionRect.top;
-                }
-            }
-        }
-    }, [focusedIndex]);
     const handleKeyDown = (e) => {
         if (e.key === 'Enter') {
             if (!isOpen) {
@@ -162,31 +145,69 @@ const CustomSelect = ({ items: itemsProp, selectedKey, onSelection, placeholder
         e.target.value = '';
         e.target.value = value;
     };
-    const groupedFilteredItems = filteredItems
-        .reduce((acc, item) => {
-        const group = acc.find(g => g.type === item.type);
-        if (group != null) {
-            group.values.push(item);
+    const groupedFilteredItems = useMemo(() => {
+        return filteredItems
+            .reduce((acc, item) => {
+            const group = acc.find(g => g.type === item.type);
+            if (group != null) {
+                group.values.push(item);
+            }
+            else {
+                acc.push({ type: item.type, values: [item] });
+            }
+            return acc;
+        }, [])
+            .sort((a, b) => a.values.length - b.values.length);
+    }, [filteredItems]);
+    const showHeaders = useMemo(() => groupedFilteredItems.length > 1 && groupedFilteredItems.every(g => g.type !== ''), [groupedFilteredItems]);
+    const flatList = useMemo(() => {
+        const list = [];
+        let optionIndex = 0;
+        for (const group of groupedFilteredItems) {
+            if (showHeaders && group.type !== '') {
+                list.push({ type: 'header', label: group.type });
+            }
+            for (const item of group.values) {
+                list.push({ type: 'option', item: item, flatIndex: optionIndex });
+                optionIndex++;
+            }
         }
-        else {
-            acc.push({ type: item.type, values: [item] });
+        return list;
+    }, [groupedFilteredItems, showHeaders]);
+    const longestKey = useMemo(() => filteredItems.reduce((a, b) => (a.key.length > b.key.length ? a : b), filteredItems[0])
+        ?.key ?? '', [filteredItems]);
+    const rowVirtualizer = useVirtualizer({
+        count: flatList.length,
+        getScrollElement: () => optionsRef.current,
+        estimateSize: () => 36,
+        overscan: 500,
+    });
+    useEffect(() => {
+        if (focusedIndex !== -1) {
+            const flatIdx = flatList.findIndex(entry => entry.type === 'option' && entry.flatIndex === focusedIndex);
+            if (flatIdx !== -1) {
+                rowVirtualizer.scrollToIndex(flatIdx, { align: 'auto' });
+            }
         }
-        return acc;
-    }, [])
-        .sort((a, b) => a.values.length - b.values.length);
+    }, [focusedIndex, flatList, rowVirtualizer]);
     return (_jsxs("div", { ref: containerRef, className: "relative", onKeyDown: handleKeyDown, onClick: onButtonClick, children: [_jsxs("div", { id: id, onClick: () => !disabled && setIsOpen(!isOpen), className: cx(styles, width !== undefined ? `w-${width}` : 'w-full', disabled ? 'cursor-not-allowed opacity-50 pointer-events-none' : '', primary ? primaryStyles : defaultStyles, { [className]: className.length > 0 }), tabIndex: 0, role: "button", "aria-haspopup": "listbox", "aria-expanded": isOpen, ...restProps, children: [_jsx("div", { className: cx(icon != null ? '' : 'block overflow-x-hidden text-ellipsis whitespace-nowrap'), children: renderSelection(selection) }), _jsx("div", { className: cx(icon != null ? '' : 'pointer-events-none text-gray-400'), children: icon ?? _jsx(Icon, { icon: "heroicons:chevron-up-down-20-solid", "aria-hidden": "true" }) })] }), isOpen && (_jsx("div", { ref: optionsRef, className: cx('absolute z-50 mt-1 max-h-[50vh] w-max overflow-auto rounded-md bg-gray-50 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:ring-white dark:ring-opacity-20 sm:text-sm', { [optionsClassname]: optionsClassname.length > 0 }), role: "listbox", children: _jsxs("div", { className: "relative flex flex-col", children: [searchable && (_jsx("div", { className: "sticky z-10 top-[-5px] w-auto max-w-full", children: _jsx("div", { className: "flex flex-col", children: editable ? (_jsxs(_Fragment, { children: [_jsx("textarea", { ref: searchInputRef, className: "w-full px-4 py-2 text-sm border-b border-gray-200 rounded-none ring-0 outline-none bg-gray-50 dark:bg-gray-800 dark:text-white min-h-[50px]", placeholder: "Type a RegEx to add", value: searchTerm, onChange: e => setSearchTerm(e.target.value), onFocus: e => moveCaretToEnd(e) }), editable && searchTerm.length > 0 && (_jsx("div", { className: "p-2 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800", children: _jsx(Button, { variant: "primary", className: "w-full h-[30px]", onClick: () => {
                                                     onSelection(searchTerm);
                                                     setIsOpen(false);
-                                                }, children: "Add" }) }))] })) : (_jsx("input", { ref: searchInputRef, type: "text", className: "w-full px-4 h-[45px] text-sm border-none rounded-none ring-0 outline-none bg-gray-50 dark:bg-gray-800 dark:text-white", placeholder: "Search...", value: searchTerm, onChange: e => setSearchTerm(e.target.value) })) }) })), _jsx("div", { className: "flex-1 min-h-0", children: loading === true ? (_jsx("div", { className: "w-[270px]", children: loader })) : groupedFilteredItems.length === 0 ? (_jsx("div", { className: "px-4 py-3 text-sm text-gray-500 dark:text-gray-400 text-center", ...testId(TEST_IDS.LABEL_VALUE_NO_RESULTS), children: "No values found" })) : (groupedFilteredItems.map(group => (_jsxs(Fragment, { children: [groupedFilteredItems.length > 1 &&
-                                        groupedFilteredItems.every(g => g.type !== '') &&
-                                        group.type !== '' ? (_jsx("div", { className: "pl-2", children: _jsx(DividerWithLabel, { label: group.type }) })) : null, group.values.map((item, index) => (_jsx(OptionItem, { item: item, index: index, optionRefs: optionRefs, focusedIndex: focusedIndex, selectedKey: selectedKey, handleSelection: handleSelection }, item.key)))] }, group.type)))) }), refetchValues !== undefined && loading !== true && (_jsx(RefreshButton, { onClick: () => void handleRefetch(), disabled: isRefetching, title: "Refresh results", testId: TEST_IDS.LABEL_VALUE_REFRESH_BUTTON, sticky: true, loading: isRefetching }))] }) }))] }));
+                                                }, children: "Add" }) }))] })) : (_jsx("input", { ref: searchInputRef, type: "text", className: "w-full px-4 h-[45px] text-sm border-none rounded-none ring-0 outline-none bg-gray-50 dark:bg-gray-800 dark:text-white", placeholder: "Search...", value: searchTerm, onChange: e => setSearchTerm(e.target.value) })) }) })), _jsx("div", { className: "flex-1 min-h-0", children: loading === true ? (_jsx("div", { className: "w-[270px]", children: loader })) : groupedFilteredItems.length === 0 ? (_jsx("div", { className: "px-4 py-3 text-sm text-gray-500 dark:text-gray-400 text-center", ...testId(TEST_IDS.LABEL_VALUE_NO_RESULTS), children: "No values found" })) : ((() => {
+                                const virtualItems = rowVirtualizer.getVirtualItems();
+                                const paddingTop = virtualItems.length > 0 ? virtualItems[0]?.start ?? 0 : 0;
+                                const paddingBottom = virtualItems.length > 0
+                                    ? rowVirtualizer.getTotalSize() -
+                                        (virtualItems[virtualItems.length - 1]?.end ?? 0)
+                                    : 0;
+                                return (_jsxs("div", { children: [_jsx("div", { "aria-hidden": true, className: "pl-3 pr-9 whitespace-nowrap overflow-hidden", style: { height: 0, visibility: 'hidden' }, children: longestKey }), paddingTop > 0 && _jsx("div", { style: { height: paddingTop } }), virtualItems.map(virtualItem => {
+                                            const entry = flatList[virtualItem.index];
+                                            return entry.type === 'header' ? (_jsx("div", { className: "pl-2", children: _jsx(DividerWithLabel, { label: entry.label }) }, virtualItem.key)) : (_jsx(OptionItem, { item: entry.item, index: entry.flatIndex, focusedIndex: focusedIndex, selectedKey: selectedKey, handleSelection: handleSelection }, virtualItem.key));
+                                        }), paddingBottom > 0 && _jsx("div", { style: { height: paddingBottom } })] }));
+                            })()) }), refetchValues !== undefined && loading !== true && (_jsx(RefreshButton, { onClick: () => void handleRefetch(), disabled: isRefetching, title: "Refresh results", testId: TEST_IDS.LABEL_VALUE_REFRESH_BUTTON, sticky: true, loading: isRefetching }))] }) }))] }));
 };
-const OptionItem = ({ item, optionRefs, index, focusedIndex, selectedKey, handleSelection, }) => {
-    return (_jsxs("div", { ref: el => {
-            if (el !== null) {
-                optionRefs.current[index] = el;
-            }
-        }, className: cx('relative cursor-default select-none py-2 pl-3 pr-9', index === focusedIndex && 'bg-indigo-600 text-white', item.key === selectedKey && 'bg-indigo-100 dark:bg-indigo-700', item.disabled !== null && item.disabled === true && 'opacity-50 cursor-not-allowed', 'focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 hover:bg-indigo-600 hover:text-white'), role: "option", "aria-selected": item.key === selectedKey, tabIndex: -1, onClick: () => {
+const OptionItem = ({ item, index, focusedIndex, selectedKey, handleSelection, }) => {
+    return (_jsxs("div", { className: cx('relative cursor-default select-none py-2 pl-3 pr-9', index === focusedIndex && 'bg-indigo-600 text-white', item.key === selectedKey && 'bg-indigo-100 dark:bg-indigo-700', item.disabled !== null && item.disabled === true && 'opacity-50 cursor-not-allowed', 'focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 hover:bg-indigo-600 hover:text-white'), role: "option", "aria-selected": item.key === selectedKey, tabIndex: -1, onClick: () => {
             if (!(item.disabled ?? false)) {
                 handleSelection(item.key);
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parca/profile",
-  "version": "0.19.125",
+  "version": "0.19.126",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@floating-ui/react": "^0.27.12",
@@ -20,6 +20,7 @@
     "@storybook/preview-api": "^8.4.3",
     "@tanstack/react-query": "^4.0.5",
     "@tanstack/react-table": "^8.17.3",
+    "@tanstack/react-virtual": "^3.5.0",
     "@tanstack/table-core": "^8.16.0",
     "@types/d3": "^7.4.3",
     "@types/d3-scale": "^4.0.8",
@@ -87,5 +88,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "e7032ad37a873cf980400210d52885c9b990e4d1"
+  "gitHead": "0cbcaff4a19806bfa5e3e1c7b2c3cb4a0e8eb97c"
 }

package/src/SimpleMatchers/Select.tsx

@@ -11,9 +11,10 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, {Fragment, useCallback, useEffect, useRef, useState} from 'react';
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 
 import {Icon} from '@iconify/react';
+import {useVirtualizer} from '@tanstack/react-virtual';
 import cx from 'classnames';
 import levenshtein from 'fast-levenshtein';
 
@@ -84,11 +85,11 @@ const CustomSelect: React.FC<CustomSelectProps & Record<string, any>> = ({
   const [isOpen, setIsOpen] = useState(false);
   const [focusedIndex, setFocusedIndex] = useState(-1);
   const [searchTerm, setSearchTerm] = useState('');
+  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState('');
   const [isRefetching, setIsRefetching] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
   const optionsRef = useRef<HTMLDivElement>(null);
   const searchInputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);
-  const optionRefs = useRef<Array<HTMLElement | null>>([]);
 
   const handleRefetch = useCallback(async () => {
     if (refetchValues == null || isRefetching) return;
@@ -101,30 +102,34 @@ const CustomSelect: React.FC<CustomSelectProps & Record<string, any>> = ({
     }
   }, [refetchValues, isRefetching]);
 
-  let items: TypedSelectItem[] = [];
-  if (itemsProp[0] != null && 'type' in itemsProp[0]) {
-    items = (itemsProp as GroupedSelectItem[]).flatMap(item =>
-      item.values.map(v => ({...v, type: item.type}))
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedSearchTerm(searchTerm), 150);
+    return () => clearTimeout(timer);
+  }, [searchTerm]);
+
+  const items = useMemo<TypedSelectItem[]>(() => {
+    if (itemsProp[0] != null && 'type' in itemsProp[0]) {
+      return (itemsProp as GroupedSelectItem[]).flatMap(item =>
+        item.values.map(v => ({...v, type: item.type}))
+      );
+    }
+    return (itemsProp as SelectItem[]).map(item => ({...item, type: ''}));
+  }, [itemsProp]);
+
+  const filteredItems = useMemo(() => {
+    if (!searchable) return items;
+    const lowerSearch = debouncedSearchTerm.toLowerCase();
+    const filtered = items.filter(item =>
+      item.element.active.props.children.toString().toLowerCase().includes(lowerSearch)
+    );
+    if (debouncedSearchTerm === '') {
+      return filtered.sort((a, b) => a.key.localeCompare(b.key));
+    }
+    return filtered.sort(
+      (a, b) =>
+        levenshtein.get(a.key, debouncedSearchTerm) - levenshtein.get(b.key, debouncedSearchTerm)
     );
-  } else {
-    items = (itemsProp as SelectItem[]).map(item => ({...item, type: ''}));
-  }
-
-  const filteredItems = searchable
-    ? items
-        .filter(item =>
-          item.element.active.props.children
-            .toString()
-            .toLowerCase()
-            .includes(searchTerm.toLowerCase())
-        )
-        .sort((a, b) => {
-          if (searchTerm === '') {
-            return a.key.localeCompare(b.key);
-          }
-          return levenshtein.get(a.key, searchTerm) - levenshtein.get(b.key, searchTerm);
-        })
-    : items;
+  }, [items, debouncedSearchTerm, searchable]);
 
   const selection = editable ? selectedKey : items.find(v => v.key === selectedKey);
 
@@ -147,28 +152,6 @@ const CustomSelect: React.FC<CustomSelectProps & Record<string, any>> = ({
     }
   }, [isOpen, searchable]);
 
-  useEffect(() => {
-    if (
-      focusedIndex !== -1 &&
-      optionsRef.current !== null &&
-      optionRefs.current[focusedIndex] !== null
-    ) {
-      const optionElement = optionRefs.current[focusedIndex];
-      const optionsContainer = optionsRef.current;
-
-      if (optionElement !== null && optionsContainer !== null) {
-        const optionRect = optionElement.getBoundingClientRect();
-        const containerRect = optionsContainer.getBoundingClientRect();
-
-        if (optionRect.bottom > containerRect.bottom) {
-          optionsContainer.scrollTop += optionRect.bottom - containerRect.bottom;
-        } else if (optionRect.top < containerRect.top) {
-          optionsContainer.scrollTop -= containerRect.top - optionRect.top;
-        }
-      }
-    }
-  }, [focusedIndex]);
-
   const handleKeyDown = (e: React.KeyboardEvent): void => {
     if (e.key === 'Enter') {
       if (!isOpen) {
@@ -245,17 +228,66 @@ const CustomSelect: React.FC<CustomSelectProps & Record<string, any>> = ({
     e.target.value = value;
   };
 
-  const groupedFilteredItems = filteredItems
-    .reduce((acc: GroupedSelectItem[], item) => {
-      const group = acc.find(g => g.type === item.type);
-      if (group != null) {
-        group.values.push(item);
-      } else {
-        acc.push({type: item.type, values: [item]});
+  const groupedFilteredItems = useMemo(() => {
+    return filteredItems
+      .reduce((acc: GroupedSelectItem[], item) => {
+        const group = acc.find(g => g.type === item.type);
+        if (group != null) {
+          group.values.push(item);
+        } else {
+          acc.push({type: item.type, values: [item]});
+        }
+        return acc;
+      }, [])
+      .sort((a, b) => a.values.length - b.values.length);
+  }, [filteredItems]);
+
+  const showHeaders = useMemo(
+    () => groupedFilteredItems.length > 1 && groupedFilteredItems.every(g => g.type !== ''),
+    [groupedFilteredItems]
+  );
+
+  const flatList = useMemo(() => {
+    const list: Array<
+      {type: 'header'; label: string} | {type: 'option'; item: TypedSelectItem; flatIndex: number}
+    > = [];
+    let optionIndex = 0;
+    for (const group of groupedFilteredItems) {
+      if (showHeaders && group.type !== '') {
+        list.push({type: 'header', label: group.type});
       }
-      return acc;
-    }, [])
-    .sort((a, b) => a.values.length - b.values.length);
+      for (const item of group.values) {
+        list.push({type: 'option', item: item as TypedSelectItem, flatIndex: optionIndex});
+        optionIndex++;
+      }
+    }
+    return list;
+  }, [groupedFilteredItems, showHeaders]);
+
+  const longestKey = useMemo(
+    () =>
+      filteredItems.reduce((a, b) => (a.key.length > b.key.length ? a : b), filteredItems[0])
+        ?.key ?? '',
+    [filteredItems]
+  );
+
+  const rowVirtualizer = useVirtualizer({
+    count: flatList.length,
+    getScrollElement: () => optionsRef.current,
+    estimateSize: () => 36,
+    overscan: 500,
+  });
+
+  useEffect(() => {
+    if (focusedIndex !== -1) {
+      const flatIdx = flatList.findIndex(
+        entry => entry.type === 'option' && entry.flatIndex === focusedIndex
+      );
+      if (flatIdx !== -1) {
+        rowVirtualizer.scrollToIndex(flatIdx, {align: 'auto'});
+      }
+    }
+  }, [focusedIndex, flatList, rowVirtualizer]);
 
   return (
     <div ref={containerRef} className="relative" onKeyDown={handleKeyDown} onClick={onButtonClick}>
@@ -349,28 +381,45 @@ const CustomSelect: React.FC<CustomSelectProps & Record<string, any>> = ({
                   No values found
                 </div>
               ) : (
-                groupedFilteredItems.map(group => (
-                  <Fragment key={group.type}>
-                    {groupedFilteredItems.length > 1 &&
-                    groupedFilteredItems.every(g => g.type !== '') &&
-                    group.type !== '' ? (
-                      <div className="pl-2">
-                        <DividerWithLabel label={group.type} />
+                (() => {
+                  const virtualItems = rowVirtualizer.getVirtualItems();
+                  const paddingTop = virtualItems.length > 0 ? virtualItems[0]?.start ?? 0 : 0;
+                  const paddingBottom =
+                    virtualItems.length > 0
+                      ? rowVirtualizer.getTotalSize() -
+                        (virtualItems[virtualItems.length - 1]?.end ?? 0)
+                      : 0;
+                  return (
+                    <div>
+                      <div
+                        aria-hidden
+                        className="pl-3 pr-9 whitespace-nowrap overflow-hidden"
+                        style={{height: 0, visibility: 'hidden'}}
+                      >
+                        {longestKey}
                       </div>
-                    ) : null}
-                    {group.values.map((item, index) => (
-                      <OptionItem
-                        key={item.key}
-                        item={item}
-                        index={index}
-                        optionRefs={optionRefs}
-                        focusedIndex={focusedIndex}
-                        selectedKey={selectedKey}
-                        handleSelection={handleSelection}
-                      />
-                    ))}
-                  </Fragment>
-                ))
+                      {paddingTop > 0 && <div style={{height: paddingTop}} />}
+                      {virtualItems.map(virtualItem => {
+                        const entry = flatList[virtualItem.index];
+                        return entry.type === 'header' ? (
+                          <div key={virtualItem.key} className="pl-2">
+                            <DividerWithLabel label={entry.label} />
+                          </div>
+                        ) : (
+                          <OptionItem
+                            key={virtualItem.key}
+                            item={entry.item}
+                            index={entry.flatIndex}
+                            focusedIndex={focusedIndex}
+                            selectedKey={selectedKey}
+                            handleSelection={handleSelection}
+                          />
+                        );
+                      })}
+                      {paddingBottom > 0 && <div style={{height: paddingBottom}} />}
+                    </div>
+                  );
+                })()
               )}
             </div>
             {refetchValues !== undefined && loading !== true && (
@@ -392,14 +441,12 @@ const CustomSelect: React.FC<CustomSelectProps & Record<string, any>> = ({
 
 const OptionItem = ({
   item,
-  optionRefs,
   index,
   focusedIndex,
   selectedKey,
   handleSelection,
 }: {
   item: SelectItem;
-  optionRefs: React.MutableRefObject<Array<HTMLElement | null>>;
   index: number;
   focusedIndex: number;
   selectedKey: string | undefined;
@@ -407,11 +454,6 @@ const OptionItem = ({
 }): JSX.Element => {
   return (
     <div
-      ref={el => {
-        if (el !== null) {
-          optionRefs.current[index] = el;
-        }
-      }}
       className={cx(
         'relative cursor-default select-none py-2 pl-3 pr-9',
         index === focusedIndex && 'bg-indigo-600 text-white',