@synerise/ds-context-selector 2.0.4 → 2.1.0

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.1.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-context-selector@2.0.5...@synerise/ds-context-selector@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.5](https://github.com/Synerise/synerise-design/compare/@synerise/ds-context-selector@2.0.4...@synerise/ds-context-selector@2.0.5) (2026-09-10)
+
+**Note:** Version bump only for package @synerise/ds-context-selector
+
 ## [2.0.4](https://github.com/Synerise/synerise-design/compare/@synerise/ds-context-selector@2.0.3...@synerise/ds-context-selector@2.0.4) (2026-09-08)
 
 **Note:** Version bump only for package @synerise/ds-context-selector

package/dist/ContextSelectorDropdown/ContextSelectorDropdown.js

@@ -10,15 +10,16 @@ import { itemSizes, ListContextProvider } from "@synerise/ds-list-item";
 import Result from "@synerise/ds-result";
 import Scrollbar from "@synerise/ds-scrollbar";
 import Tabs from "@synerise/ds-tabs";
-import { getActiveTabGroup, getGroupName, useSearchResults, focusWithArrowKeys } from "@synerise/ds-utils";
+import { getActiveTabGroup, getGroupName, useSearchResults, useMeasuredRowHeights, focusWithArrowKeys, useMeasuredRow } from "@synerise/ds-utils";
 import { ShowMoreItem, TabsWrapper, Skeleton, ItemsList, Title } from "../ContextSelector.styles.js";
 import { isContextItemsInSubGroup } from "../ContextSelector.types.js";
 import { NO_GROUP_NAME, DROPDOWN_HEIGHT } from "../constants.js";
 import ContextSelectorDropdownItem from "./ContextSelectorDropdownItem.js";
-import { isGroup, getDropdownContentHeight, getListWindowHeight, isListTitle } from "./utils.js";
+import { isGroup, isListTitle, getDropdownContentHeight, getListWindowHeight } from "./utils.js";
 const ITEM_SIZE = {
   [itemSizes.LARGE]: 50,
   [itemSizes.DEFAULT]: 32,
+  [itemSizes.AUTO]: 32,
   title: 32,
   divider: 16
 };
@@ -32,10 +33,16 @@ const VirtualizedRow = ({
   data
 }) => {
   const item = data.items[index];
+  const rowRef = useMeasuredRow(index, data.measureRow);
+  const rowStyle = {
+    ...style,
+    height: "auto",
+    minHeight: style.height
+  };
   if (item && isDivider(item)) {
-    return /* @__PURE__ */ jsx("div", { style, children: /* @__PURE__ */ jsx(Divider, { marginTop: 8, marginBottom: 8 }) });
+    return /* @__PURE__ */ jsx("div", { ref: rowRef, style: rowStyle, children: /* @__PURE__ */ jsx(Divider, { marginTop: 8, marginBottom: 8 }) });
   }
-  return item && isListTitle(item) ? /* @__PURE__ */ jsx(Title, { style, children: item.title }) : /* @__PURE__ */ jsx(ContextSelectorDropdownItem, { style, ...item });
+  return /* @__PURE__ */ jsx("div", { ref: rowRef, style: rowStyle, children: item && isListTitle(item) ? /* @__PURE__ */ jsx(Title, { children: item.title }) : /* @__PURE__ */ jsx(ContextSelectorDropdownItem, { ...item }) });
 };
 const ContextSelectorDropdown = ({
   texts,
@@ -66,8 +73,8 @@ const ContextSelectorDropdown = ({
     const defaultIndex = groups?.findIndex((group) => group.defaultGroup);
     return defaultIndex || 0;
   }, [groups]);
-  const listRef = useRef(null);
   const overlayRef = useRef(null);
+  const listRef = useRef(null);
   const scrollBarRef = useRef(null);
   const topSectionRef = useRef(null);
   const [searchInputHandle, setSearchInputHandle] = useState();
@@ -231,9 +238,39 @@ const ContextSelectorDropdown = ({
   useEffect(() => {
     listRef.current?.resetAfterIndex(0, false);
   }, [activeItems, listRef]);
-  const itemData = useMemo(() => ({
-    items: activeItems
+  const getEstimatedItemSize = useCallback((index) => {
+    const item = activeItems[index];
+    if (isListTitle(item)) {
+      return ITEM_SIZE.title;
+    }
+    if (isDivider(item)) {
+      return ITEM_SIZE.divider;
+    }
+    return menuItemHeight ? ITEM_SIZE[menuItemHeight] : ITEM_SIZE[itemSizes.DEFAULT];
+  }, [activeItems, menuItemHeight]);
+  const rowKeys = useMemo(() => activeItems.map((item, index) => {
+    if (isListTitle(item)) {
+      return `title-${item.title}`;
+    }
+    if (isDivider(item)) {
+      return `divider-${index}`;
+    }
+    return `${item.item.name}-${item.item.id}`;
   }), [activeItems]);
+  const {
+    getItemSize,
+    measureRow
+  } = useMeasuredRowHeights({
+    listRef,
+    keys: rowKeys,
+    estimate: getEstimatedItemSize,
+    // A changed `menuItemHeight` invalidates every measurement taken against the old one.
+    estimateVersion: menuItemHeight
+  });
+  const itemData = useMemo(() => ({
+    items: activeItems,
+    measureRow
+  }), [activeItems, measureRow]);
   const handleSearch = useCallback((val) => {
     setSearchQuery(val);
     resetList();
@@ -256,16 +293,6 @@ const ContextSelectorDropdown = ({
       listRef.current.scrollTo(Math.max(0, scrollTop - topSectionHeight));
     }
   };
-  const getItemSize = (index) => {
-    const item = activeItems[index];
-    if (isListTitle(item)) {
-      return ITEM_SIZE.title;
-    }
-    if (isDivider(item)) {
-      return ITEM_SIZE.divider;
-    }
-    return menuItemHeight ? ITEM_SIZE[menuItemHeight] : ITEM_SIZE[itemSizes.DEFAULT];
-  };
   const dropdownContentHeight = useMemo(() => {
     return getDropdownContentHeight({
       outerHeight,

package/dist/constants.d.ts

@@ -1,7 +1,11 @@
+import { ItemSize } from '@synerise/ds-list-item';
 export declare const NO_GROUP_NAME = "NO_GROUP_NAME";
-export declare const ITEM_SIZE: {
-    large: number;
-    default: number;
+/**
+ * Row height estimates. Typed exhaustively over `ItemSize` on purpose: a new size must fail
+ * the build here rather than silently yield an undefined row offset. `auto` has no fixed
+ * height — 32 is its `min-height` floor, and the real height is measured.
+ */
+export declare const ITEM_SIZE: Record<ItemSize, number> & {
     title: number;
 };
 export declare const DROPDOWN_HEIGHT = 420;

package/dist/constants.js

@@ -3,6 +3,7 @@ const NO_GROUP_NAME = "NO_GROUP_NAME";
 const ITEM_SIZE = {
   [itemSizes.LARGE]: 50,
   [itemSizes.DEFAULT]: 32,
+  [itemSizes.AUTO]: 32,
   title: 32
 };
 const DROPDOWN_HEIGHT = 420;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-context-selector",
-  "version": "2.0.4",
+  "version": "2.1.0",
   "description": "ContextSelector UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -36,26 +36,26 @@
     "check:circular-dependencies": "madge --circular --extensions ts,tsx,js,jsx --ts-config tsconfig.json src/ --exclude '/dist/'",
     "upgrade:ds": "ncu -f \"@synerise/ds-*\" -u"
   },
-  "gitHead": "e0dced8fd3a1194eff2fafc1b7e385b29238af88",
+  "gitHead": "71f08fdaba8e7b80731e29a03883dc6a33f2b9db",
   "sideEffects": [
     "dist/style/*",
     "*.less"
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^2.0.2",
-    "@synerise/ds-divider": "^2.0.2",
-    "@synerise/ds-dropdown": "^2.0.3",
-    "@synerise/ds-factors": "^2.0.4",
-    "@synerise/ds-icon": "^2.1.0",
-    "@synerise/ds-information-card": "^2.0.4",
-    "@synerise/ds-list-item": "^2.0.2",
+    "@synerise/ds-button": "^2.0.3",
+    "@synerise/ds-divider": "^2.0.3",
+    "@synerise/ds-dropdown": "^2.1.0",
+    "@synerise/ds-factors": "^2.1.0",
+    "@synerise/ds-icon": "^2.1.1",
+    "@synerise/ds-information-card": "^2.0.6",
+    "@synerise/ds-list-item": "^2.1.0",
     "@synerise/ds-popover": "^2.0.1",
-    "@synerise/ds-result": "^2.0.2",
-    "@synerise/ds-scrollbar": "^2.0.1",
-    "@synerise/ds-skeleton": "^2.0.2",
-    "@synerise/ds-tabs": "^2.0.3",
-    "@synerise/ds-utils": "^2.0.0",
+    "@synerise/ds-result": "^2.0.3",
+    "@synerise/ds-scrollbar": "^2.0.2",
+    "@synerise/ds-skeleton": "^2.0.3",
+    "@synerise/ds-tabs": "^2.0.4",
+    "@synerise/ds-utils": "^2.1.0",
     "react-intl": "^6.8.7",
     "react-window": "1.8.11",
     "uuid": "^8.3.2"