@synerise/ds-select 2.0.0 → 2.0.2

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.2](https://github.com/synerise/synerise-design/compare/@synerise/ds-select@2.0.1...@synerise/ds-select@2.0.2) (2026-09-02)
+
+**Note:** Version bump only for package @synerise/ds-select
+
+## [2.0.1](https://github.com/synerise/synerise-design/compare/@synerise/ds-select@2.0.0...@synerise/ds-select@2.0.1) (2026-09-01)
+
+### Performance Improvements
+
+- **select:** virtualize the dropdown option list ([f95de4e](https://github.com/synerise/synerise-design/commit/f95de4e6bbe392def14e010c0556e2c56c90ddc7))
+
 # [2.0.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-select@1.5.3...@synerise/ds-select@2.0.0) (2026-08-26)
 
 **Note:** Version bump only for package @synerise/ds-select

package/CLAUDE.md

@@ -20,11 +20,12 @@ src/
   useSelectOptions.ts — resolve options (prop → children), client filtering, tags create-row
   useResponsiveTagCount.ts — maxTagCount="responsive": fit-to-width chip count (ResizeObserver)
  components/
-  OptionList.tsx — dropdown overlay: loading / empty / scrollable listbox of options
+  OptionList.tsx — dropdown overlay: loading / empty / windowed (react-window) listbox of options
   SelectorContent.tsx — selector inner content: chips / selected label / placeholder + search input
  utils/
   getOptionsFromChildren.ts — read <Select.Option> children into SelectOption[]; findOption()
-  helpers.ts — cx(), toArray(), defaultFilter(), DEFAULT_LIST_HEIGHT
+  areOptionChildrenEqual.ts — structural compare of <Select.Option> children (memo guard)
+  helpers.ts — cx(), toArray(), defaultFilter(), DEFAULT_LIST_HEIGHT, DEFAULT_LIST_ITEM_HEIGHT, OVERSCAN_COUNT, MAX_MEASURED_ROWS
  __specs__/
   Select.spec.tsx — Vitest + React Testing Library tests
 ```
@@ -69,7 +70,8 @@ sub-component: **`Select.Option`** (the DS `Option` marker). `Select.OptGroup` i
 | `readOnly` | `boolean` | `undefined` | Non-interactive with readable styling (white bg, `default` cursor, `grey-600` text). |
 | `disabled` | `boolean` | `undefined` | Standard disabled state; ORed with `readOnly` to block interaction. |
 | `selectorStyle` | `CSSObject` | `undefined` | Inline style object applied to the `Selector` box. |
-| `listHeight` | `number \| string` | `256` | Max dropdown list height (px). |
+| `listHeight` | `number \| string` | `256` | Max dropdown list height (px); also the windowed viewport height. |
+| `listItemHeight` | `number` | `32` | Height per option row the window is sized from; taller rows are measured. |
 | `style` | `CSSProperties` | `undefined` | Applied to `SelectWrapper` (the flex row: selector + addons). |
 | `className` | `string` | `undefined` | Added to the outer `SelectContainer`. |
 | `getPopupContainer` | `(node) => HTMLElement \| ParentNode \| null` | `defaultGetPopupContainer` (`@synerise/ds-utils`) | Container the dropdown mounts into. |
@@ -88,9 +90,9 @@ Kept so antd-era consumers need no change: `searchValue`, `onClear`, `onClick`,
 `SelectHandler` type and the `SelectStyles.Selector` styled export are re-exported for parity.
 
 `maxTagCount` (`number | 'responsive'` — collapse extra chips into a `+N` overflow chip, or fit them
-to the selector width on one line), `maxTagTextLength` (truncate chip labels) and `onPopupScroll` are
-fully implemented. `listItemHeight`, `dropdownAlign` and `defaultActiveFirstOption` are accepted for
-compatibility but have **no runtime effect**.
+to the selector width on one line), `maxTagTextLength`, `onPopupScroll` and `listItemHeight` (the row
+height the windowed list is sized from) are fully implemented. `dropdownAlign` and
+`defaultActiveFirstOption` are accepted for compatibility but have **no runtime effect**.
 
 ## Usage patterns
 
@@ -145,6 +147,8 @@ Class hooks are `ds-select-*` (`.ds-select`, `.ds-select-selection-item`, `.ds-s
 - `@synerise/ds-icon` — `AngleDownS` (arrow), `Close3M` (clear), `CloseS` (chip remove).
 - `@synerise/ds-tooltip` — wraps the clear control for `clearTooltip`.
 - `@synerise/ds-utils` — default `getPopupContainer`.
+- `react-window` — `VariableSizeList`, the windowing engine behind `OptionList` (already a DS-wide
+  dependency: `dropdown`, `context-selector`, `item-picker`, `table`, …).
 - `@synerise/ds-core` — theme tokens (peerDep). **No `antd` peerDep** — the component imports zero
   antd; the LESS that pulled `~antd/lib/select/style` was relocated to `ds-table` (see below).
 
@@ -153,6 +157,25 @@ Class hooks are `ds-select-*` (`.ds-select`, `.ds-select-selection-item`, `.ds-s
 - **Option resolution** — `useSelectOptions` returns `resolvedOptions` (from `options` prop, else
   `getOptionsFromChildren(children)`) and `displayedOptions` (after client filtering and, in `tags`
   mode, a create-row prepended for the typed text). `filterOption={false}` disables local filtering.
+  The children path is cached against `areOptionChildrenEqual` rather than `useMemo([children])`:
+  JSX hands over a fresh array of fresh elements on every parent render, so a reference-keyed memo
+  would rebuild the options — and invalidate every memo below them — on renders that changed nothing.
+- **Windowed option list** — `OptionList` renders `displayedOptions` through react-window's
+  `VariableSizeList`, so only the visible rows plus `OVERSCAN_COUNT` are in the DOM. Following the
+  DS idiom (`item-picker`, `context-selector`): the surrounding `Scrollbar` owns the scrolling
+  (`overflow: unset` on the list, `onScroll` → `list.scrollTo`), which keeps `onPopupScroll` firing
+  from the same element as before. `listItemHeight` (default 32) is the size estimate; each mounted
+  row reports its real `offsetHeight` so rows with taller JSX (a flag + a wrapping label) lay out
+  correctly. Keyboard navigation can target a row that is not mounted, so `OptionList` scrolls by
+  computed offset instead of `scrollIntoView`, and a changed query resets the window to the top.
+  Because only a slice of the options is ever in the DOM, each row states `aria-setsize` /
+  `aria-posinset` — AT can no longer count the set for itself.
+- **Row measurement invalidates through `resetAfterIndex`** — react-window memoises row offsets, so a
+  measured height only takes effect once the list is told to drop that memo. Two consequences worth
+  keeping in mind when touching `OptionList`: a row's own layout effect cannot reach `listRef` on the
+  mount commit (rows are descendants of the list, so their effects run first), and a change to
+  `listItemHeight` must invalidate *and* force a render — a passive `resetAfterIndex(index, false)`
+  leaves the stale layout on screen until something else happens to re-render the list.
 - **Row vs selector display (antd parity)** — the dropdown row renders `option.children ?? label ??
   value`, the selector renders the field named by `optionLabelProp` (`label`, `children`, `value`,
   `title`, …) and falls back to `label`. So `<Option label={compact}>{rich}</Option>` shows `rich` in

package/README.md

@@ -104,8 +104,8 @@ select root.
 | dropdownStyle | Inline style on the dropdown overlay. | `CSSProperties` | - |
 | dropdownMatchSelectWidth | Match dropdown width to the selector; a number fixes the width (px). | `boolean \| number` | `true` |
 | dropdownRender | Wrap the rendered option menu (custom footer / scroll container). | `(menu: ReactElement) => ReactNode` | - |
-| listHeight | Max dropdown list height (px). | `number \| string` | `256` |
-| listItemHeight | Fixed height per option row (accepted; list is non-virtualised). | `number` | - |
+| listHeight | Max dropdown list height (px) — also the height of the virtualised viewport. | `number \| string` | `256` |
+| listItemHeight | Height per option row the virtualised window is sized from. Rows with taller content are measured and lay out at their real height. | `number` | `32` |
 
 ### Display & tags
 
@@ -191,7 +191,12 @@ import type {
   `.ds-select`, `.ds-select-wrapper`, `.ds-select-selection-item`, `.ds-select-dropdown`, etc.
 - **Remote search** — set `filterOption={false}` and update `options` from your `onSearch`
   handler; the component won't filter locally in that mode.
+- **Virtualised list** — the dropdown renders only the visible rows (plus overscan) via
+  `react-window`, so a few hundred options cost the same as a few. `listHeight` sizes the viewport
+  and `listItemHeight` the row estimate.
 - **Keyboard & ARIA** — Arrow / Home / End / Enter / Escape / Space (and Backspace to drop the
-  last chip in multiple mode), with combobox / listbox `aria-activedescendant`.
+  last chip in multiple mode), with combobox / listbox `aria-activedescendant`. Because the list
+  is virtualised, each option also carries `aria-setsize` / `aria-posinset` so assistive tech
+  announces its place in the whole list, not in the mounted window.
 - **Not reimplemented from antd** — `OptGroup`, `labelInValue` / `LabeledValue`,
   `autoClearSearchValue`, `firstActiveValue`, `menuItemSelectedIcon`.

package/dist/Select.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef, useState, useRef, useId, useEffect } from "react";
+import { forwardRef, useState, useMemo, useRef, useId, useCallback, useEffect } from "react";
 import Dropdown from "@synerise/ds-dropdown";
 import FormField from "@synerise/ds-form-field";
 import Icon, { AngleDownS, Close3M } from "@synerise/ds-icon";
@@ -11,7 +11,7 @@ import { OptionList } from "./components/OptionList.js";
 import { SelectorContent } from "./components/SelectorContent.js";
 import { useSelectOptions } from "./hooks/useSelectOptions.js";
 import { findOption } from "./utils/getOptionsFromChildren.js";
-import { DEFAULT_LIST_HEIGHT, cx, toArray } from "./utils/helpers.js";
+import { DEFAULT_LIST_HEIGHT, toArray, cx } from "./utils/helpers.js";
 const SelectInner = forwardRef((props, ref) => {
   const {
     value,
@@ -60,6 +60,7 @@ const SelectInner = forwardRef((props, ref) => {
     dropdownMatchSelectWidth = true,
     dropdownRender,
     listHeight = DEFAULT_LIST_HEIGHT,
+    listItemHeight,
     notFoundContent = "No data",
     clearIcon,
     clearTooltip,
@@ -88,7 +89,7 @@ const SelectInner = forwardRef((props, ref) => {
   const passthroughAttrs = Object.fromEntries(Object.entries(props).filter(([key]) => key.startsWith("data-") || key.startsWith("aria-")));
   const [internalValue, setInternalValue] = useState(defaultValue);
   const currentValue = value !== void 0 ? value : internalValue;
-  const selectedValues = toArray(currentValue);
+  const selectedValues = useMemo(() => toArray(currentValue), [currentValue]);
   const [internalOpen, setInternalOpen] = useState(!!defaultOpen);
   const isControlledOpen = openProp !== void 0;
   const isOpen = isControlledOpen ? !!openProp : internalOpen;
@@ -100,7 +101,7 @@ const SelectInner = forwardRef((props, ref) => {
   const [activeIndex, setActiveIndex] = useState(-1);
   const baseId = useId();
   const listboxId = `${baseId}-listbox`;
-  const optionDomId = (index) => `${baseId}-option-${index}`;
+  const optionDomId = useCallback((index) => `${baseId}-option-${index}`, [baseId]);
   const {
     resolvedOptions,
     displayedOptions
@@ -157,15 +158,6 @@ const SelectInner = forwardRef((props, ref) => {
     }
     setActiveIndex(firstEnabledIndex());
   }, [effectiveQuery]);
-  useEffect(() => {
-    if (!isOpen || activeIndex < 0) {
-      return;
-    }
-    const activeEl = document.getElementById(optionDomId(activeIndex));
-    activeEl?.scrollIntoView?.({
-      block: "nearest"
-    });
-  }, [activeIndex, isOpen]);
   useEffect(() => {
     if (autoFocus && !hasInput) {
       selectorRef.current?.focus();
@@ -369,7 +361,7 @@ const SelectInner = forwardRef((props, ref) => {
   const hasValue = selectedValues.length > 0;
   const showClear = allowClear && hasValue && !isDisabled;
   const placeholderStr = typeof placeholder === "string" ? placeholder : void 0;
-  const menu = /* @__PURE__ */ jsx(OptionList, { loading, options: displayedOptions, notFoundContent, listHeight, isMultiple, listboxId, selectedValues, activeIndex, rowKey, optionDomId, onOptionActivate: setActiveIndex, onOptionSelect: handleSelect, onPopupScroll });
+  const menu = /* @__PURE__ */ jsx(OptionList, { loading, options: displayedOptions, notFoundContent, listHeight, listItemHeight, isMultiple, listboxId, selectedValues, activeIndex, searchQuery: effectiveQuery, rowKey, optionDomId, onOptionActivate: setActiveIndex, onOptionSelect: handleSelect, onPopupScroll });
   const handleSearchKeyDown = (event) => {
     onInputKeyDown?.(event);
     onKeyDown?.(event);

package/dist/Select.styles.d.ts

@@ -29,7 +29,25 @@ export declare const Arrow: import('styled-components').StyledComponent<"span",
 export declare const ClearWrapper: import('styled-components').StyledComponent<"span", any, {}, never>;
 export declare const DropdownWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
 export declare const ScrollList: import('styled-components').StyledComponent<({ children, onClick, maxToShowItems, texts, ...htmlAttributes }: import('@synerise/ds-list-item').ListWrapperProps) => React.JSX.Element, any, {}, never>;
-export declare const Inner: import('styled-components').StyledComponent<"div", any, {}, never>;
+/**
+ * The listbox. Its only child is the windowed list, styled from here (rather than
+ * via `styled(VariableSizeList)`, which would erase react-window's `itemData`
+ * generic): `height` is a react-window *prop* sizing the render window, not the
+ * box, so the CSS height is handed back to the content — the dropdown shrinks to
+ * fit a short list — while `overflow: unset` leaves scrolling to the surrounding
+ * `Scrollbar`.
+ *
+ * `max-height` does not clip (overflow is visible by design); it keeps the *box*
+ * at `listHeight` so nothing downstream measures a list of 500 rows as a
+ * 16000px-tall element. The rows below it overflow into the `Scrollbar`, whose
+ * scrollable region covers them — which holds only as long as no element between
+ * this one and that scroll node introduces its own `overflow: hidden`.
+ */
+export declare const Inner: import('styled-components').StyledComponent<"div", any, {
+    $maxHeight?: number;
+}, never>;
+/** Row wrapper carrying react-window's absolute offset; height follows content. */
+export declare const VirtualRow: import('styled-components').StyledComponent<"div", any, {}, never>;
 export declare const NotFound: import('styled-components').StyledComponent<"div", any, {}, never>;
 export declare const Loading: import('styled-components').StyledComponent<"div", any, {}, never>;
 export declare const OptionItem: StyledListItem;

package/dist/Select.styles.js

@@ -55,42 +55,46 @@ const ScrollList = /* @__PURE__ */ styled(ListWrapper).withConfig({
 const Inner = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Selectstyles__Inner",
   componentId: "sc-n9lk0v-11"
-})(["padding-right:8px;"]);
+})(["padding-right:8px;> .ds-select-option-list{overflow-x:unset;overflow-y:unset;height:auto !important;", "}"], (props) => props.$maxHeight !== void 0 && css(["max-height:", "px;"], props.$maxHeight));
+const VirtualRow = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "Selectstyles__VirtualRow",
+  componentId: "sc-n9lk0v-12"
+})(["box-sizing:border-box;"]);
 const NotFound = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Selectstyles__NotFound",
-  componentId: "sc-n9lk0v-12"
+  componentId: "sc-n9lk0v-13"
 })(["display:flex;align-items:center;justify-content:center;padding:8px 12px;color:", ";font-weight:normal;"], (props) => props.theme.palette["grey-600"]);
 const Loading = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Selectstyles__Loading",
-  componentId: "sc-n9lk0v-13"
+  componentId: "sc-n9lk0v-14"
 })(["display:flex;align-items:center;justify-content:center;padding:16px;"]);
 const OptionItem = /* @__PURE__ */ styled(DSListItem).withConfig({
   displayName: "Selectstyles__OptionItem",
-  componentId: "sc-n9lk0v-14"
+  componentId: "sc-n9lk0v-15"
 })(["min-width:auto;font-weight:normal;&&:hover:not(.ds-list-item-disabled),&&.ds-select-item-option-active:not(.ds-list-item-disabled){background-color:", ";}"], (props) => props.theme.palette["blue-050"]);
 const SearchInputEl = /* @__PURE__ */ styled.input.withConfig({
   displayName: "Selectstyles__SearchInputEl",
-  componentId: "sc-n9lk0v-15"
+  componentId: "sc-n9lk0v-16"
 })(["flex:1 1 30px;min-width:30px;width:100%;border:none;outline:none;background:transparent;padding:0;margin:0;font-family:inherit;font-size:13px;color:", ";cursor:inherit;&::placeholder{color:", ";}&:disabled{cursor:not-allowed;}", ""], (props) => props.theme.palette["grey-700"], (props) => props.theme.palette["grey-500"], (props) => props.$overlay && css(["position:absolute;top:0;left:0;width:100%;height:100%;flex:none;box-sizing:border-box;padding:0 30px 0 12px;"]));
 const MultiValueArea = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Selectstyles__MultiValueArea",
-  componentId: "sc-n9lk0v-16"
+  componentId: "sc-n9lk0v-17"
 })(["display:flex;flex-wrap:wrap;align-items:center;gap:4px;flex:1;min-width:0;", ""], (props) => props.$responsive && css(["position:relative;flex-wrap:nowrap;overflow:hidden;> .ds-select-selection-item,> .ds-select-selection-overflow{flex:0 0 auto;}> .ds-select-search{flex:1 1 0;min-width:0;}"]));
 const TagMeasureRow = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Selectstyles__TagMeasureRow",
-  componentId: "sc-n9lk0v-17"
+  componentId: "sc-n9lk0v-18"
 })(["position:absolute;top:0;left:0;width:100%;height:0;display:flex;flex-wrap:nowrap;gap:4px;overflow:hidden;visibility:hidden;pointer-events:none;> *{flex:0 0 auto;}"]);
 const Chip = /* @__PURE__ */ styled.span.withConfig({
   displayName: "Selectstyles__Chip",
-  componentId: "sc-n9lk0v-18"
+  componentId: "sc-n9lk0v-19"
 })(["position:relative;display:inline-flex;align-items:center;box-sizing:border-box;width:max-content;max-width:100%;min-height:24px;padding:0 8px;background:", ";border:none;border-radius:3px;font-size:13px;line-height:1;color:", ";&:hover{background:", ";color:", ";}&:hover .ds-select-selection-item-label{max-width:calc(100% - 24px);}&:hover .ds-select-selection-item-remove{display:inline-flex;}"], (props) => props.theme.palette["grey-200"], (props) => props.theme.palette["grey-600"], (props) => props.theme.palette["grey-300"], (props) => props.theme.palette["grey-800"]);
 const ChipLabel = /* @__PURE__ */ styled.span.withConfig({
   displayName: "Selectstyles__ChipLabel",
-  componentId: "sc-n9lk0v-19"
+  componentId: "sc-n9lk0v-20"
 })(["max-width:100%;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"]);
 const ChipRemove = /* @__PURE__ */ styled.span.withConfig({
   displayName: "Selectstyles__ChipRemove",
-  componentId: "sc-n9lk0v-20"
+  componentId: "sc-n9lk0v-21"
 })(["position:absolute;right:4px;top:50%;transform:translateY(-50%);display:none;align-items:center;justify-content:center;width:24px;height:24px;cursor:pointer;color:", ";"], (props) => props.theme.palette["red-600"]);
 export {
   Arrow,
@@ -113,5 +117,6 @@ export {
   SelectionItem,
   Selector,
   SuffixWrapper,
-  TagMeasureRow
+  TagMeasureRow,
+  VirtualRow
 };

package/dist/Select.types.d.ts

@@ -120,7 +120,11 @@ export type SelectProps<VT extends SelectValue = SelectValue> = {
     dropdownRender?: (menu: ReactElement) => ReactNode;
     /** Max dropdown list height (px). */
     listHeight?: number | string;
-    /** antd parity: fixed height per option row (px). Accepted for compatibility (non-virtualised list). */
+    /**
+     * Height (px) of a single option row, used to window the list. Rows that render
+     * taller content are measured and lay out at their real height, so this is the
+     * estimate the window starts from rather than a hard cap. Defaults to 32.
+     */
     listItemHeight?: number;
     notFoundContent?: ReactNode;
     clearIcon?: ReactNode;

package/dist/components/OptionList.d.ts

@@ -6,11 +6,15 @@ type OptionListProps = {
     options: SelectOption[];
     notFoundContent?: ReactNode;
     listHeight?: number | string;
+    /** Estimated height of one option row; measured rows override it. */
+    listItemHeight?: number;
     isMultiple: boolean;
     listboxId: string;
     selectedValues: RawValueType[];
     /** Keyboard-highlighted option index. */
     activeIndex: number;
+    /** Current query — a change scrolls the window back to the top. */
+    searchQuery: string;
     rowKey?: (option: SelectOption) => Key;
     optionDomId: (index: number) => string;
     onOptionActivate: (index: number) => void;
@@ -18,6 +22,6 @@ type OptionListProps = {
     /** antd parity: fired as the option list scrolls (e.g. to page in more options). */
     onPopupScroll?: (event: UIEvent<HTMLDivElement>) => void;
 };
-/** The dropdown overlay: loading / empty / the scrollable listbox of options. */
-export declare const OptionList: ({ loading, options, notFoundContent, listHeight, isMultiple, listboxId, selectedValues, activeIndex, rowKey, optionDomId, onOptionActivate, onOptionSelect, onPopupScroll, }: OptionListProps) => ReactElement;
+/** The dropdown overlay: loading / empty / the windowed listbox of options. */
+export declare const OptionList: ({ loading, options, notFoundContent, listHeight, listItemHeight, isMultiple, listboxId, selectedValues, activeIndex, searchQuery, rowKey, optionDomId, onOptionActivate, onOptionSelect, onPopupScroll, }: OptionListProps) => ReactElement;
 export {};

package/dist/components/OptionList.js

@@ -1,50 +1,223 @@
 import { jsx } from "react/jsx-runtime";
+import { forwardRef, memo, useRef, useLayoutEffect, useCallback, useEffect, useMemo } from "react";
+import { VariableSizeList } from "react-window";
 import Loader from "@synerise/ds-loader";
 import Scrollbar from "@synerise/ds-scrollbar";
-import { DropdownWrapper, Loading, NotFound, ScrollList, Inner, OptionItem } from "../Select.styles.js";
-import { DEFAULT_LIST_HEIGHT, cx } from "../utils/helpers.js";
+import { VirtualRow, OptionItem, DropdownWrapper, Loading, NotFound, ScrollList, Inner } from "../Select.styles.js";
+import { cx, DEFAULT_LIST_ITEM_HEIGHT, MAX_MEASURED_ROWS, DEFAULT_LIST_HEIGHT, OVERSCAN_COUNT } from "../utils/helpers.js";
+const LIST_STYLE = {
+  overflowX: "unset",
+  overflowY: "unset"
+};
+const PresentationDiv = forwardRef((props, ref) => /* @__PURE__ */ jsx("div", { ref, role: "presentation", ...props }));
+PresentationDiv.displayName = "SelectListWrapper";
+const OptionRow = memo(({
+  index,
+  style,
+  data
+}) => {
+  const {
+    options,
+    selectedValues,
+    activeIndex,
+    optionDomId,
+    onOptionActivate,
+    onOptionSelect,
+    measureRow
+  } = data;
+  const option = options[index];
+  const rowRef = useRef(null);
+  useLayoutEffect(() => {
+    const height = rowRef.current?.offsetHeight ?? 0;
+    measureRow(index, height);
+  });
+  useLayoutEffect(() => {
+    const node = rowRef.current;
+    if (!node || typeof ResizeObserver === "undefined") {
+      return void 0;
+    }
+    const observer = new ResizeObserver(() => measureRow(index, node.offsetHeight));
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [index, measureRow]);
+  const isSelected = selectedValues.includes(option.value);
+  const optionAttrs = Object.fromEntries(Object.entries(option).filter(([key]) => key.startsWith("data-") || key.startsWith("aria-")));
+  return /* @__PURE__ */ jsx(
+    VirtualRow,
+    {
+      ref: rowRef,
+      role: "presentation",
+      style: {
+        ...style,
+        height: "auto",
+        minHeight: style.height
+      },
+      children: /* @__PURE__ */ jsx(
+        OptionItem,
+        {
+          id: optionDomId(index),
+          role: "option",
+          className: cx("ds-select-item-option", isSelected && "ds-select-item-option-selected", index === activeIndex && "ds-select-item-option-active"),
+          selected: isSelected,
+          "aria-selected": isSelected,
+          "aria-setsize": options.length,
+          "aria-posinset": index + 1,
+          "data-testid": "select-option",
+          title: typeof option.title === "string" ? option.title : void 0,
+          text: option.children ?? option.label ?? option.value,
+          style: option.style,
+          disabled: option.disabled,
+          onMouseEnter: () => onOptionActivate(index),
+          onClick: () => onOptionSelect(option),
+          ...optionAttrs
+        }
+      )
+    }
+  );
+});
+OptionRow.displayName = "SelectOptionRow";
 const OptionList = ({
   loading,
   options,
   notFoundContent,
   listHeight,
+  listItemHeight,
   isMultiple,
   listboxId,
   selectedValues,
   activeIndex,
+  searchQuery,
   rowKey,
   optionDomId,
   onOptionActivate,
   onOptionSelect,
   onPopupScroll
-}) => /* @__PURE__ */ jsx(DropdownWrapper, { onMouseDown: (event) => {
-  const target = event.target;
-  if (!target.closest('input, textarea, [contenteditable="true"]')) {
-    event.preventDefault();
-  }
-}, children: loading ? /* @__PURE__ */ jsx(Loading, { className: "ds-select-loading", children: /* @__PURE__ */ jsx(Loader, { size: "M" }) }) : options.length === 0 ? /* @__PURE__ */ jsx(NotFound, { className: "ds-select-empty", children: notFoundContent }) : /* @__PURE__ */ jsx(ScrollList, { children: /* @__PURE__ */ jsx(Scrollbar, { absolute: true, maxHeight: Number(listHeight) || DEFAULT_LIST_HEIGHT, onScroll: onPopupScroll ? (event) => onPopupScroll(event) : void 0, children: /* @__PURE__ */ jsx(Inner, { role: "listbox", id: listboxId, "aria-multiselectable": isMultiple || void 0, children: options.map((option, index) => {
-  const isSelected = selectedValues.includes(option.value);
-  const optionAttrs = Object.fromEntries(Object.entries(option).filter(([key]) => key.startsWith("data-") || key.startsWith("aria-")));
-  return /* @__PURE__ */ jsx(
-    OptionItem,
+}) => {
+  const listRef = useRef(null);
+  const scrollRef = useRef(null);
+  const scrollOffsetRef = useRef(0);
+  const sizeCacheRef = useRef(/* @__PURE__ */ new Map());
+  const windowHeight = Number(listHeight) || DEFAULT_LIST_HEIGHT;
+  const rowHeight = listItemHeight && listItemHeight > 0 ? listItemHeight : DEFAULT_LIST_ITEM_HEIGHT;
+  const keyFor = useCallback((option) => rowKey ? rowKey(option) : option.key ?? option.value, [rowKey]);
+  const getItemSize = useCallback((index) => {
+    const option = options[index];
+    if (!option) {
+      return rowHeight;
+    }
+    return sizeCacheRef.current.get(keyFor(option)) ?? rowHeight;
+  }, [options, keyFor, rowHeight]);
+  const measureRow = useCallback((index, height) => {
+    const option = options[index];
+    if (!option || !height) {
+      return;
+    }
+    const key = keyFor(option);
+    if (sizeCacheRef.current.get(key) === height) {
+      return;
+    }
+    sizeCacheRef.current.set(key, height);
+    listRef.current?.resetAfterIndex(index);
+  }, [options, keyFor]);
+  const prevRowHeightRef = useRef(rowHeight);
+  useLayoutEffect(() => {
+    if (prevRowHeightRef.current === rowHeight) {
+      return;
+    }
+    prevRowHeightRef.current = rowHeight;
+    sizeCacheRef.current.clear();
+    listRef.current?.resetAfterIndex(0);
+  }, [rowHeight]);
+  useEffect(() => {
+    const cache = sizeCacheRef.current;
+    if (cache.size > MAX_MEASURED_ROWS) {
+      const live = new Set(options.map(keyFor));
+      cache.forEach((_height, key) => {
+        if (!live.has(key)) {
+          cache.delete(key);
+        }
+      });
+    }
+    listRef.current?.resetAfterIndex(0, false);
+  }, [options, keyFor]);
+  const scrollTo = useCallback((offset) => {
+    scrollOffsetRef.current = offset;
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = offset;
+    }
+    listRef.current?.scrollTo(offset);
+  }, []);
+  const isFirstQuery = useRef(true);
+  useEffect(() => {
+    if (isFirstQuery.current) {
+      isFirstQuery.current = false;
+      return;
+    }
+    scrollTo(0);
+  }, [searchQuery, scrollTo]);
+  useEffect(() => {
+    if (activeIndex < 0 || activeIndex >= options.length) {
+      return;
+    }
+    let top = 0;
+    for (let index = 0; index < activeIndex; index += 1) {
+      top += getItemSize(index);
+    }
+    const bottom = top + getItemSize(activeIndex);
+    const viewport = scrollRef.current?.clientHeight || windowHeight;
+    const current = scrollOffsetRef.current;
+    let next = current;
+    if (top < current) {
+      next = top;
+    } else if (bottom > current + viewport) {
+      next = bottom - viewport;
+    }
+    if (next !== current) {
+      scrollTo(Math.max(0, next));
+    }
+  }, [activeIndex, options, getItemSize, windowHeight, scrollTo]);
+  const handleScroll = useCallback((event) => {
+    const {
+      scrollTop
+    } = event.currentTarget;
+    scrollOffsetRef.current = scrollTop;
+    listRef.current?.scrollTo(scrollTop);
+    onPopupScroll?.(event);
+  }, [onPopupScroll]);
+  const itemData = useMemo(() => ({
+    options,
+    selectedValues,
+    activeIndex,
+    optionDomId,
+    onOptionActivate,
+    onOptionSelect,
+    measureRow
+  }), [options, selectedValues, activeIndex, optionDomId, onOptionActivate, onOptionSelect, measureRow]);
+  return /* @__PURE__ */ jsx(DropdownWrapper, { onMouseDown: (event) => {
+    const target = event.target;
+    if (!target.closest('input, textarea, [contenteditable="true"]')) {
+      event.preventDefault();
+    }
+  }, children: loading ? /* @__PURE__ */ jsx(Loading, { className: "ds-select-loading", children: /* @__PURE__ */ jsx(Loader, { size: "M" }) }) : options.length === 0 ? /* @__PURE__ */ jsx(NotFound, { className: "ds-select-empty", children: notFoundContent }) : /* @__PURE__ */ jsx(ScrollList, { children: /* @__PURE__ */ jsx(Scrollbar, { absolute: true, maxHeight: windowHeight, onScroll: handleScroll, ref: scrollRef, children: /* @__PURE__ */ jsx(Inner, { role: "listbox", id: listboxId, "aria-multiselectable": isMultiple || void 0, $maxHeight: windowHeight, children: /* @__PURE__ */ jsx(
+    VariableSizeList,
     {
-      id: optionDomId(index),
-      role: "option",
-      className: cx("ds-select-item-option", isSelected && "ds-select-item-option-selected", index === activeIndex && "ds-select-item-option-active"),
-      selected: isSelected,
-      "aria-selected": isSelected,
-      "data-testid": "select-option",
-      title: typeof option.title === "string" ? option.title : void 0,
-      text: option.children ?? option.label ?? option.value,
-      style: option.style,
-      disabled: option.disabled,
-      onMouseEnter: () => onOptionActivate(index),
-      onClick: () => onOptionSelect(option),
-      ...optionAttrs
-    },
-    rowKey ? rowKey(option) : option.value
-  );
-}) }) }) }) });
+      ref: listRef,
+      className: "ds-select-option-list",
+      width: "100%",
+      height: windowHeight,
+      itemCount: options.length,
+      itemSize: getItemSize,
+      estimatedItemSize: rowHeight,
+      itemData,
+      itemKey: (index, data) => keyFor(data.options[index]),
+      overscanCount: OVERSCAN_COUNT,
+      outerElementType: PresentationDiv,
+      innerElementType: PresentationDiv,
+      style: LIST_STYLE,
+      children: OptionRow
+    }
+  ) }) }) }) });
+};
 export {
   OptionList
 };

package/dist/hooks/useSelectOptions.js

@@ -1,6 +1,20 @@
-import { useMemo } from "react";
+import { useMemo, useRef } from "react";
+import { areOptionChildrenEqual } from "../utils/areOptionChildrenEqual.js";
 import { getOptionsFromChildren } from "../utils/getOptionsFromChildren.js";
 import { defaultFilter } from "../utils/helpers.js";
+const useOptionsFromChildren = (children) => {
+  const cacheRef = useRef(null);
+  const cached = cacheRef.current;
+  if (cached && areOptionChildrenEqual(cached.children, children)) {
+    return cached.options;
+  }
+  const options = getOptionsFromChildren(children);
+  cacheRef.current = {
+    children,
+    options
+  };
+  return options;
+};
 const useSelectOptions = ({
   options,
   children,
@@ -10,12 +24,9 @@ const useSelectOptions = ({
   isTags,
   selectedValues
 }) => {
-  const resolvedOptions = useMemo(() => {
-    if (options && options.length > 0) {
-      return options;
-    }
-    return getOptionsFromChildren(children);
-  }, [options, children]);
+  const hasOptionsProp = Boolean(options && options.length > 0);
+  const childrenOptions = useOptionsFromChildren(hasOptionsProp ? null : children);
+  const resolvedOptions = hasOptionsProp ? options : childrenOptions;
   const displayedOptions = useMemo(() => {
     let list = resolvedOptions;
     if (filterOption !== false && effectiveQuery) {

package/dist/utils/areOptionChildrenEqual.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+/**
+ * True when two `children` node lists describe the same `<Select.Option>` set.
+ * Lets the option list keep its identity across a parent re-render that did not
+ * actually change the options (see `useSelectOptions`).
+ */
+export declare const areOptionChildrenEqual: (a: ReactNode, b: ReactNode) => boolean;

package/dist/utils/areOptionChildrenEqual.js

@@ -0,0 +1,31 @@
+import { Children, isValidElement } from "react";
+const MAX_DEPTH = 6;
+const isPlainObject = (value) => typeof value === "object" && value !== null && Object.getPrototypeOf(value) === Object.prototype;
+const isEqualValue = (a, b, depth) => {
+  if (Object.is(a, b)) {
+    return true;
+  }
+  if (depth >= MAX_DEPTH) {
+    return false;
+  }
+  if (Array.isArray(a) || Array.isArray(b)) {
+    return Array.isArray(a) && Array.isArray(b) && a.length === b.length && a.every((item, index) => isEqualValue(item, b[index], depth + 1));
+  }
+  if (isValidElement(a) || isValidElement(b)) {
+    return isValidElement(a) && isValidElement(b) && a.type === b.type && a.key === b.key && isEqualValue(a.props, b.props, depth + 1);
+  }
+  if (isPlainObject(a) && isPlainObject(b)) {
+    const keysA = Object.keys(a);
+    const keysB = Object.keys(b);
+    return keysA.length === keysB.length && keysA.every((key) => Object.prototype.hasOwnProperty.call(b, key) && isEqualValue(a[key], b[key], depth + 1));
+  }
+  return false;
+};
+const areOptionChildrenEqual = (a, b) => {
+  const listA = Children.toArray(a);
+  const listB = Children.toArray(b);
+  return listA.length === listB.length && listA.every((child, index) => isEqualValue(child, listB[index], 0));
+};
+export {
+  areOptionChildrenEqual
+};

package/dist/utils/helpers.d.ts

@@ -1,6 +1,20 @@
 import { FilterOptionFn, RawValueType, SelectValue } from '../Select.types';
 /** Default max height (px) of the option list. */
 export declare const DEFAULT_LIST_HEIGHT = 256;
+/**
+ * Default height (px) of a single option row — `ds-list-item`'s `default` size.
+ * Used as the windowing estimate until a row reports its real height.
+ */
+export declare const DEFAULT_LIST_ITEM_HEIGHT = 32;
+/** Rows rendered above/below the visible window so scrolling never shows a gap. */
+export declare const OVERSCAN_COUNT = 8;
+/**
+ * Upper bound on remembered row measurements. Heights are cached per option (not
+ * per index) so filtering a list down and back keeps them usable — which means a
+ * remote-search select accumulates an entry for every option it has ever shown.
+ * Past this many, the cache is pruned to the options currently in the list.
+ */
+export declare const MAX_MEASURED_ROWS = 1000;
 /** Join truthy class names into a single string. */
 export declare const cx: (...classes: (string | false | undefined)[]) => string;
 /** Normalise a `SelectValue` to an array of raw values. */

package/dist/utils/helpers.js

@@ -1,4 +1,7 @@
 const DEFAULT_LIST_HEIGHT = 256;
+const DEFAULT_LIST_ITEM_HEIGHT = 32;
+const OVERSCAN_COUNT = 8;
+const MAX_MEASURED_ROWS = 1e3;
 const cx = (...classes) => classes.filter(Boolean).join(" ");
 const toArray = (value) => {
   if (value === void 0 || value === null) {
@@ -13,6 +16,9 @@ const defaultFilter = (optionFilterProp) => (input, option) => {
 };
 export {
   DEFAULT_LIST_HEIGHT,
+  DEFAULT_LIST_ITEM_HEIGHT,
+  MAX_MEASURED_ROWS,
+  OVERSCAN_COUNT,
   cx,
   defaultFilter,
   toArray

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-select",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "Select UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "synerise/synerise-design",
@@ -42,15 +42,16 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-dropdown": "^2.0.0",
-    "@synerise/ds-form-field": "^2.0.0",
-    "@synerise/ds-icon": "^2.0.0",
-    "@synerise/ds-list-item": "^2.0.0",
+    "@synerise/ds-dropdown": "^2.0.1",
+    "@synerise/ds-form-field": "^2.0.1",
+    "@synerise/ds-icon": "^2.1.0",
+    "@synerise/ds-list-item": "^2.0.1",
     "@synerise/ds-loader": "^2.0.0",
-    "@synerise/ds-scrollbar": "^2.0.0",
-    "@synerise/ds-tooltip": "^2.0.0",
+    "@synerise/ds-scrollbar": "^2.0.1",
+    "@synerise/ds-tooltip": "^2.0.1",
     "@synerise/ds-utils": "^2.0.0",
-    "classnames": "^2.5.1"
+    "classnames": "^2.5.1",
+    "react-window": "^1.8.11"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
@@ -58,5 +59,5 @@
     "styled-components": "^5.3.3",
     "vitest": "4"
   },
-  "gitHead": "033854a18f038079e9a16b0ff250f8401a2287c2"
+  "gitHead": "1dc97a2bae9f1d20c3f35e6672d059d502c90d1a"
 }