From 17b8fe7ecc592a4965235657e7cb721cb05cf19f Mon Sep 17 00:00:00 2001
From: "ilia.brauer" <ilia.brauer@semrush.com>
Date: Thu, 21 May 2026 09:21:25 +0200
Subject: [PATCH] [select] added VirtualList as exported component

---
 semcore/select/src/Select.jsx                 |  1 +
 semcore/select/src/index.d.ts                 |  1 +
 .../select/tests/Select.stories.tsx           |  5 +
 .../select/tests/examples/virtualization.tsx  | 93 +++++++++++++++++++
 4 files changed, 100 insertions(+)
 create mode 100644 stories/components/select/tests/examples/virtualization.tsx

diff --git a/semcore/select/src/Select.jsx b/semcore/select/src/Select.jsx
index 33bb985a02..4d2b47c3ba 100644
--- a/semcore/select/src/Select.jsx
+++ b/semcore/select/src/Select.jsx
@@ -501,6 +501,7 @@ const Select = createComponent(
       },
     ],
     Group: Dropdown.Group,
+    VirtualList: DropdownMenu.VirtualList,
     Divider,
     InputSearch: [InputSearchWrapper, InputSearch._______childrenComponents],
     Input: [InputSearchWrapper, InputSearch._______childrenComponents],
diff --git a/semcore/select/src/index.d.ts b/semcore/select/src/index.d.ts
index ab57acb032..1ce4c960af 100644
--- a/semcore/select/src/index.d.ts
+++ b/semcore/select/src/index.d.ts
@@ -143,6 +143,7 @@ declare const Select: IntergalacticSelectComponent & {
   Popper: typeof DropdownMenu.Popper;
   List: typeof DropdownMenu.List;
   Menu: typeof DropdownMenu.Menu;
+  VirtualList: typeof DropdownMenu.VirtualList;
   Group: typeof Dropdown.Group;
   Option: Intergalactic.Component<
     'option',
diff --git a/stories/components/select/tests/Select.stories.tsx b/stories/components/select/tests/Select.stories.tsx
index 73b9dbfe04..848ac64ede 100644
--- a/stories/components/select/tests/Select.stories.tsx
+++ b/stories/components/select/tests/Select.stories.tsx
@@ -10,6 +10,7 @@ import ProgrammaticallyFocusExample from './examples/programmatically_focus';
 import type { defaultProps as SelectWithEllipsisProps } from './examples/select-with-ellipsis';
 import SelectWithEllipsisExample from './examples/select-with-ellipsis';
 import SubcomponentsExample, { defaultProps as SubcomponentsProps } from './examples/subcomponents_trigger_popper_list_search';
+import VirtualizationExample from './examples/virtualization';
 
 const meta: Meta<typeof Select> = {
   title: 'Components/Select/Test',
@@ -217,3 +218,7 @@ export const SubcomponentsTriggerPopperListSearch: StoryObj<typeof Subcomponents
   },
   args: SubcomponentsProps,
 };
+
+export const Virtualization: StoryObj = {
+  render: VirtualizationExample,
+};
diff --git a/stories/components/select/tests/examples/virtualization.tsx b/stories/components/select/tests/examples/virtualization.tsx
new file mode 100644
index 0000000000..584cd8a11d
--- /dev/null
+++ b/stories/components/select/tests/examples/virtualization.tsx
@@ -0,0 +1,93 @@
+import { ButtonTrigger } from '@semcore/ui/base-trigger';
+import type { RenderRowProps, DropdownMenuProps, DropdownMenuListProps, DropdownMenuItemProps } from '@semcore/ui/dropdown-menu';
+import Select, { InputSearch } from '@semcore/ui/select';
+import React from 'react';
+
+const projects = Array.from({ length: 5500 }, (_, index) => `project ${index}`);
+const rowHeight = 32;
+
+type ProjectSelectorProps = DropdownMenuProps & DropdownMenuListProps & DropdownMenuItemProps & {
+  disabledAll?: boolean;
+  disabledFirstItem?: boolean;
+  visibleItems?: number;
+};
+
+const Row = React.memo(({ index, data, row }: RenderRowProps<string, { selected: string | null; setProject: (project: string, index: number) => void; disabledAll?: boolean; disabledFirstItem?: boolean }>) => {
+  const projectName = row;
+
+  return (
+    <Select.Option
+      key={row}
+      disabled={data.disabledAll || (index === 0 && data.disabledFirstItem)}
+      index={index}
+      data-test-id={`item-${projectName}`}
+      value={projectName}
+    >
+      {projectName}
+    </Select.Option>
+  );
+});
+
+const Demo = (props: ProjectSelectorProps) => {
+  const [searchValue, setSearchValue] = React.useState('');
+  const [visible, setVisible] = React.useState(false);
+  const [selectedProject, setProject] = React.useState<string>('project 33');
+
+  const visibleItems = props.visibleItems ?? 10;
+  const listHeight = visibleItems * rowHeight;
+
+  const normalizedQuery = searchValue.trim().toLowerCase();
+
+  const filteredProjects = React.useMemo(() => {
+    if (!normalizedQuery) return projects;
+    return projects.filter((p) => p.toLowerCase().includes(normalizedQuery));
+  }, [normalizedQuery]);
+
+  const handleSetProject = (project: string) => {
+    setProject(project);
+  };
+
+  return (
+    <Select
+      stretch={props.stretch}
+      itemsCount={filteredProjects.length}
+      visible={visible}
+      onVisibleChange={setVisible}
+      value={selectedProject}
+      onChange={handleSetProject}
+    >
+      <Select.Trigger tag={ButtonTrigger} w={220}>
+        {selectedProject ?? 'Select project'}
+      </Select.Trigger>
+
+      <Select.Popper aria-label='Select project popover'>
+        <InputSearch value={searchValue} onChange={setSearchValue} m={1} autoFocus={false} />
+
+        <Select.VirtualList
+          key={filteredProjects.length === projects.length ? 'virtual-list-stable-key' : normalizedQuery}
+          hMax={listHeight + 41}
+          rowHeight={rowHeight}
+          renderRow={Row}
+          rows={filteredProjects}
+          customData={{
+            setProject: handleSetProject,
+            selected: selectedProject,
+            disabledAll: props.disabledAll,
+            disabledFirstItem: props.disabledFirstItem,
+          }}
+        />
+      </Select.Popper>
+    </Select>
+  );
+};
+
+export const defaultProps: ProjectSelectorProps = {
+  disabledAll: false,
+  disabledFirstItem: false,
+  stretch: undefined,
+  visibleItems: 4,
+};
+
+Demo.defaultProps = defaultProps;
+
+export default Demo;