@synerise/ds-select 2.0.4 → 2.1.0

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.1.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-select@2.0.4...@synerise/ds-select@2.1.0) (2026-09-16)
+
+### Features
+
+- **list-item:** add content-fitting size="auto" ([e269f0a](https://github.com/synerise/synerise-design/commit/e269f0a48ca7472f4766a50a957e22d7988c5e13))
+
 ## [2.0.4](https://github.com/synerise/synerise-design/compare/@synerise/ds-select@2.0.3...@synerise/ds-select@2.0.4) (2026-09-08)
 
 **Note:** Version bump only for package @synerise/ds-select

package/dist/components/OptionList.js

@@ -1,8 +1,9 @@
 import { jsx } from "react/jsx-runtime";
-import { forwardRef, memo, useRef, useLayoutEffect, useCallback, useEffect, useMemo } from "react";
+import { forwardRef, memo, useRef, useCallback, useMemo, useEffect } from "react";
 import { VariableSizeList } from "react-window";
 import Loader from "@synerise/ds-loader";
 import Scrollbar from "@synerise/ds-scrollbar";
+import { useMeasuredRow, useMeasuredRowHeights } from "@synerise/ds-utils";
 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 = {
@@ -26,20 +27,7 @@ const OptionRow = memo(({
     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 rowRef = useMeasuredRow(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(
@@ -93,60 +81,32 @@ const OptionList = ({
   onOptionSelect,
   onPopupScroll
 }) => {
-  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 rowKeys = useMemo(() => options.map(keyFor), [options, keyFor]);
+  const estimateRowHeight = useCallback(() => rowHeight, [rowHeight]);
+  const {
+    listRef,
+    getItemSize,
+    measureRow
+  } = useMeasuredRowHeights({
+    keys: rowKeys,
+    estimate: estimateRowHeight,
+    // `listItemHeight` can change under a stable option list; every cached
+    // measurement was taken against the old value, so they all have to go.
+    estimateVersion: rowHeight,
+    maxCachedRows: MAX_MEASURED_ROWS
+  });
   const scrollTo = useCallback((offset) => {
     scrollOffsetRef.current = offset;
     if (scrollRef.current) {
       scrollRef.current.scrollTop = offset;
     }
     listRef.current?.scrollTo(offset);
-  }, []);
+  }, [listRef]);
   const isFirstQuery = useRef(true);
   useEffect(() => {
     if (isFirstQuery.current) {
@@ -183,7 +143,7 @@ const OptionList = ({
     scrollOffsetRef.current = scrollTop;
     listRef.current?.scrollTo(scrollTop);
     onPopupScroll?.(event);
-  }, [onPopupScroll]);
+  }, [listRef, onPopupScroll]);
   const itemData = useMemo(() => ({
     options,
     selectedValues,

package/package.json

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