@synerise/ds-item-picker 2.0.5 → 2.1.1

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.1.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-item-picker@2.1.0...@synerise/ds-item-picker@2.1.1) (2026-09-18)
+
+**Note:** Version bump only for package @synerise/ds-item-picker
+
+
+
+
+
+# [2.1.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-item-picker@2.0.5...@synerise/ds-item-picker@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-item-picker@2.0.4...@synerise/ds-item-picker@2.0.5) (2026-09-10)
 
 **Note:** Version bump only for package @synerise/ds-item-picker

package/dist/components/ItemPickerList/ItemPickerList.js

@@ -7,12 +7,12 @@ import Dropdown from "@synerise/ds-dropdown";
 import Icon, { ArrowLeftM } from "@synerise/ds-icon";
 import { itemSizes, ListContextProvider } from "@synerise/ds-list-item";
 import { Text } from "@synerise/ds-typography";
-import { useCombinedRefs, useScrollContain, useKeyboardShortcuts, focusWithArrowKeys } from "@synerise/ds-utils";
+import { useCombinedRefs, useScrollContain, useMeasuredRowHeights, useKeyboardShortcuts, focusWithArrowKeys } from "@synerise/ds-utils";
 import { useDefaultTexts } from "../../hooks/useDefaultTexts.js";
-import { StyledScrollbar, ScrollContent, StyledList, ListContainer, ListWrapper } from "./ItemPickerList.styles.js";
 import { EmptyListMessage } from "./components/EmptyListMessage.js";
 import { ErrorMessage } from "./components/ErrorMessage.js";
 import "@synerise/ds-inline-alert";
+import { StyledScrollbar, ScrollContent, StyledList, ListContainer, ListWrapper } from "./ItemPickerList.styles.js";
 import { ItemPickerListFooter } from "./components/ItemPickerListFooter.js";
 import { ItemPickerListRow } from "./components/ItemPickerListRow.js";
 import { ItemPickerListSkeleton } from "./components/ItemPickerListSkeleton.js";
@@ -20,9 +20,9 @@ import { ListSearchInput } from "./components/ListSearchInput.js";
 import { ITEM_SIZE, LIST_STYLE, SECTION_HEADER_HEIGHT, LIST_INNER_PADDING } from "./constants.js";
 import { useItemsInSections } from "./hooks/useItemsInSections.js";
 import { useListHeight } from "./hooks/useListHeight.js";
-import { isTitle } from "./utils/typeguards.utils.js";
-import { isNavKey } from "./utils/isNavKey.js";
 import { findSectionById } from "./utils/findSectionById.js";
+import { isNavKey } from "./utils/isNavKey.js";
+import { isTitle } from "./utils/typeguards.utils.js";
 const ItemPickerListInner = ({
   items,
   recents,
@@ -52,7 +52,6 @@ const ItemPickerListInner = ({
 }, forwardedRef) => {
   const theme = useTheme();
   const [searchQuery, setSearchQuery] = useState("");
-  const listRef = useRef(null);
   const scrollBarRef = useRef(null);
   const containerRef = useRef(null);
   const refs = [containerRef];
@@ -150,24 +149,34 @@ const ItemPickerListInner = ({
       });
     }
   };
-  const getItemSize = useCallback((index) => {
+  const getEstimatedItemSize = useCallback((index) => {
     const item = mergedItemsList && mergedItemsList[index];
     if (isTitle(item)) {
       return ITEM_SIZE.title;
     }
     return ITEM_SIZE[item.size || itemSizes.DEFAULT];
   }, [mergedItemsList]);
+  const rowKeys = useMemo(() => mergedItemsList.map((item, index) => isTitle(item) ? `title-${index}` : item.itemKey ?? item.key ?? index), [mergedItemsList]);
+  const {
+    listRef,
+    getItemSize,
+    measureRow
+  } = useMeasuredRowHeights({
+    keys: rowKeys,
+    estimate: getEstimatedItemSize
+  });
   const itemData = useMemo(() => ({
     dataSource: mergedItemsList,
     classNames,
     getItemSize,
+    measureRow,
     texts: allTexts,
     infiniteScroll: {
       isLoading: isLoadingMore,
       hasMore: !isLoadedAll,
       hasError: isLoadingMoreError
     }
-  }), [mergedItemsList, classNames, getItemSize, allTexts, isLoadingMore, isLoadedAll, isLoadingMoreError]);
+  }), [mergedItemsList, classNames, getItemSize, measureRow, allTexts, isLoadingMore, isLoadedAll, isLoadingMoreError]);
   const handleRefresh = onRefresh || refreshItems ? () => {
     changeSearchQuery("");
     setSearchByParamConfig(void 0);

package/dist/components/ItemPickerList/components/ItemPickerListRow.d.ts

@@ -9,6 +9,7 @@ export type ItemPickerListRowProps = {
         dataSource: Array<ListItemProps | TitleListItemProps>;
         classNames: string;
         getItemSize: (index: number) => number;
+        measureRow: (index: number, height: number) => void;
         texts: ItemPickerListTexts;
         infiniteScroll?: {
             isLoading: boolean;
@@ -17,4 +18,4 @@ export type ItemPickerListRowProps = {
         };
     };
 };
-export declare const ItemPickerListRow: ({ index, style, data: { dataSource, classNames, getItemSize, infiniteScroll, texts }, }: PropsWithChildren<ItemPickerListRowProps>) => React.JSX.Element;
+export declare const ItemPickerListRow: ({ index, style, data: { dataSource, classNames, getItemSize, measureRow, infiniteScroll, texts, }, }: PropsWithChildren<ItemPickerListRowProps>) => React.JSX.Element;

package/dist/components/ItemPickerList/components/ItemPickerListRow.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useCallback } from "react";
 import DSListItem from "@synerise/ds-list-item";
+import { useMeasuredRow } from "@synerise/ds-utils";
 import { InfiniteLoaderItemWrapper, Title } from "../ItemPickerList.styles.js";
 import { isTitle } from "../utils/typeguards.utils.js";
 import { InfiniteLoaderItem } from "./InfiniteLoaderItem.js";
@@ -12,11 +13,18 @@ const ItemPickerListRow = ({
     dataSource,
     classNames,
     getItemSize,
+    measureRow,
     infiniteScroll,
     texts
   }
 }) => {
   const listItem = dataSource[index];
+  const rowRef = useMeasuredRow(index, measureRow);
+  const rowStyle = {
+    ...style,
+    height: "auto",
+    minHeight: style.height
+  };
   const lastItemHeight = getItemSize(dataSource.length - 1);
   const infiniteLoaderItem = useCallback(() => {
     if (infiniteScroll) {
@@ -38,10 +46,10 @@ const ItemPickerListRow = ({
     return null;
   }, [infiniteScroll, lastItemHeight, style, texts]);
   if (isTitle(listItem)) {
-    return /* @__PURE__ */ jsx(Title, { style, children: listItem.text });
+    return /* @__PURE__ */ jsx("div", { ref: rowRef, style: rowStyle, children: /* @__PURE__ */ jsx(Title, { children: listItem.text }) });
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(DSListItem, { ...listItem, style, className: classNames }),
+    /* @__PURE__ */ jsx("div", { ref: rowRef, style: rowStyle, children: /* @__PURE__ */ jsx(DSListItem, { ...listItem, className: classNames }) }),
     index === dataSource.length - 1 && infiniteLoaderItem()
   ] });
 };

package/dist/components/ItemPickerList/constants.d.ts

@@ -1,9 +1,14 @@
 import { CSSProperties } from 'react';
+import { ItemSize } from '@synerise/ds-list-item';
 import { BaseItemType } from '../ItemPickerNew/types/baseItemSectionType.types';
 export declare const LIST_STYLE: CSSProperties;
-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 (see
+ * `useMeasuredRowHeights` in `ItemPickerList`).
+ */
+export declare const ITEM_SIZE: Record<ItemSize, number> & {
     title: number;
 };
 export declare const DEFAULT_HEIGHT = 420;

package/dist/components/ItemPickerList/constants.js

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

package/dist/components/ItemPickerList/hooks/index.d.ts

@@ -1,3 +1,3 @@
+export * from './useFlattenFolders';
 export * from './useItemsInSections';
 export * from './useListHeight';
-export * from './useFlattenFolders';

package/dist/components/ItemPickerList/hooks/index.js

@@ -1,6 +1,6 @@
+import { useFlattenFolders } from "./useFlattenFolders.js";
 import { useItemsInSections } from "./useItemsInSections.js";
 import { useListHeight } from "./useListHeight.js";
-import { useFlattenFolders } from "./useFlattenFolders.js";
 export {
   useFlattenFolders,
   useItemsInSections,

package/dist/components/ItemPickerList/hooks/useItemsInSections.utils.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import Icon, { FolderM, ArrowRightCircleM } from "@synerise/ds-icon";
 import InformationCard from "@synerise/ds-information-card";
-import "../../ItemPickerNew/types/actions.types.js";
 import { createTitleFromTitlePath } from "../utils/createTitleFromTitlePath.js";
+import "../../ItemPickerNew/types/actions.types.js";
 const getFolderItem = (item, onClick) => {
   return {
     prefixel: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(FolderM, {}) }),

package/dist/components/ItemPickerList/utils/actionItemsUtils.js

@@ -1,7 +1,7 @@
 import { ACTION_TYPES } from "../../ItemPickerNew/types/actions.types.js";
 import { getTitleItem, matchesSearchQuery } from "../hooks/useItemsInSections.utils.js";
-import { isSearchInAction, isSearchByAction, isTruthy } from "./typeguards.utils.js";
 import "../constants.js";
+import { isSearchInAction, isSearchByAction, isTruthy } from "./typeguards.utils.js";
 import { getContextAwareActions } from "./getContextAwareActions.js";
 const getActionItem = (action, searchQuery) => {
   return {

package/dist/components/ItemPickerList/utils/index.d.ts

@@ -1,4 +1,4 @@
-export * from './typeguards.utils';
-export * from './isNavKey';
 export * from './createTitleFromTitlePath';
 export * from './findSectionById';
+export * from './isNavKey';
+export * from './typeguards.utils';

package/dist/components/ItemPickerList/utils/index.js

@@ -1,7 +1,7 @@
-import { isItems, isItemsConfig, isSearchByAction, isSearchInAction, isTitle, isTruthy, isWithOutSections } from "./typeguards.utils.js";
-import { isNavKey } from "./isNavKey.js";
 import { createTitleFromTitlePath } from "./createTitleFromTitlePath.js";
 import { findSectionById } from "./findSectionById.js";
+import { isNavKey } from "./isNavKey.js";
+import { isItems, isItemsConfig, isSearchByAction, isSearchInAction, isTitle, isTruthy, isWithOutSections } from "./typeguards.utils.js";
 export {
   createTitleFromTitlePath,
   findSectionById,

package/dist/components/ItemPickerNew/ItemPickerNew.js

@@ -2,8 +2,8 @@ import { jsx } from "react/jsx-runtime";
 import { forwardRef, useState, useEffect, useMemo } from "react";
 import Dropdown from "@synerise/ds-dropdown";
 import FormField from "@synerise/ds-form-field";
-import { ItemPickerWrapper } from "../../ItemPicker.styles.js";
 import { useDefaultTexts } from "../../hooks/useDefaultTexts.js";
+import { ItemPickerWrapper } from "../../ItemPicker.styles.js";
 import { ItemPickerList } from "../ItemPickerList/ItemPickerList.js";
 import Trigger from "../ItemPickerTrigger/Trigger.js";
 const ItemPickerNewInner = ({

package/dist/index.d.ts

@@ -1,12 +1,12 @@
-export { default } from './ItemPicker';
-export type { ItemPickerProps } from './components/ItemPickerLegacy/ItemPickerLegacy.types';
 export { default as ItemPickerLegacy } from './components/ItemPickerLegacy/ItemPickerLegacy';
-export { default as ItemPickerTrigger } from './components/ItemPickerTrigger/Trigger';
+export type { ItemPickerProps } from './components/ItemPickerLegacy/ItemPickerLegacy.types';
 export { ItemPickerList } from './components/ItemPickerList/ItemPickerList';
+export type { ItemPickerListAPI, ItemSelectHandler, } from './components/ItemPickerList/ItemPickerList.types';
+export { findSectionById } from './components/ItemPickerList/utils/findSectionById';
 export { ItemPickerNew } from './components/ItemPickerNew/ItemPickerNew';
-export type { ItemSelectHandler, ItemPickerListAPI, } from './components/ItemPickerList/ItemPickerList.types';
-export type { ItemPickerProps as ItemPickerPropsNew, ItemLoaderConfig, ItemLoaderResponse, LoaderProps, OnLoadedData, ItemPickerListProps, } from './components/ItemPickerNew/ItemPickerNew.types';
-export type { BaseSectionTypeWithFolders, BaseSectionType, BaseItemType, } from './components/ItemPickerNew/types/baseItemSectionType.types';
-export type { ItemPickerListTexts } from './components/ItemPickerNew/types/itemPickerListTexts.types';
+export type { ItemLoaderConfig, ItemLoaderResponse, ItemPickerListProps, ItemPickerProps as ItemPickerPropsNew, LoaderProps, OnLoadedData, } from './components/ItemPickerNew/ItemPickerNew.types';
 export type { Action } from './components/ItemPickerNew/types/actions.types';
-export { findSectionById } from './components/ItemPickerList/utils/findSectionById';
+export type { BaseItemType, BaseSectionType, BaseSectionTypeWithFolders, } from './components/ItemPickerNew/types/baseItemSectionType.types';
+export type { ItemPickerListTexts } from './components/ItemPickerNew/types/itemPickerListTexts.types';
+export { default as ItemPickerTrigger } from './components/ItemPickerTrigger/Trigger';
+export { default } from './ItemPicker';

package/dist/index.js

@@ -1,14 +1,14 @@
-import { default as default2 } from "./ItemPicker.js";
-import { default as default3 } from "./components/ItemPickerLegacy/ItemPickerLegacy.js";
-import { default as default4 } from "./components/ItemPickerTrigger/Trigger.js";
+import { default as default2 } from "./components/ItemPickerLegacy/ItemPickerLegacy.js";
 import { ItemPickerList } from "./components/ItemPickerList/ItemPickerList.js";
-import { ItemPickerNew } from "./components/ItemPickerNew/ItemPickerNew.js";
 import { findSectionById } from "./components/ItemPickerList/utils/findSectionById.js";
+import { ItemPickerNew } from "./components/ItemPickerNew/ItemPickerNew.js";
+import { default as default3 } from "./components/ItemPickerTrigger/Trigger.js";
+import { default as default4 } from "./ItemPicker.js";
 export {
-  default3 as ItemPickerLegacy,
+  default2 as ItemPickerLegacy,
   ItemPickerList,
   ItemPickerNew,
-  default4 as ItemPickerTrigger,
-  default2 as default,
+  default3 as ItemPickerTrigger,
+  default4 as default,
   findSectionById
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-item-picker",
-  "version": "2.0.5",
+  "version": "2.1.1",
   "description": "ItemPicker UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -42,27 +42,27 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-avatar": "^2.0.2",
-    "@synerise/ds-button": "^2.0.2",
-    "@synerise/ds-dropdown": "^2.0.3",
-    "@synerise/ds-empty-states": "^2.0.1",
-    "@synerise/ds-flag": "^2.0.0",
-    "@synerise/ds-form-field": "^2.0.2",
-    "@synerise/ds-icon": "^2.1.0",
-    "@synerise/ds-information-card": "^2.0.5",
-    "@synerise/ds-inline-alert": "^2.0.1",
-    "@synerise/ds-list-item": "^2.0.2",
-    "@synerise/ds-loader": "^2.0.0",
-    "@synerise/ds-popconfirm": "^2.0.2",
-    "@synerise/ds-result": "^2.0.2",
-    "@synerise/ds-scrollbar": "^2.0.1",
-    "@synerise/ds-search": "^2.0.2",
-    "@synerise/ds-search-bar": "^2.0.3",
-    "@synerise/ds-short-cuts": "^2.0.2",
-    "@synerise/ds-skeleton": "^2.0.2",
-    "@synerise/ds-tooltip": "^2.0.2",
-    "@synerise/ds-typography": "^2.0.2",
-    "@synerise/ds-utils": "^2.0.0",
+    "@synerise/ds-avatar": "^2.0.4",
+    "@synerise/ds-button": "^2.0.4",
+    "@synerise/ds-dropdown": "^2.1.1",
+    "@synerise/ds-empty-states": "^2.0.3",
+    "@synerise/ds-flag": "^2.0.1",
+    "@synerise/ds-form-field": "^2.0.4",
+    "@synerise/ds-icon": "^2.1.2",
+    "@synerise/ds-information-card": "^2.0.7",
+    "@synerise/ds-inline-alert": "^2.0.3",
+    "@synerise/ds-list-item": "^2.1.1",
+    "@synerise/ds-loader": "^2.0.1",
+    "@synerise/ds-popconfirm": "^2.0.4",
+    "@synerise/ds-result": "^2.0.4",
+    "@synerise/ds-scrollbar": "^2.0.3",
+    "@synerise/ds-search": "^2.0.4",
+    "@synerise/ds-search-bar": "^2.0.5",
+    "@synerise/ds-short-cuts": "^2.0.4",
+    "@synerise/ds-skeleton": "^2.0.4",
+    "@synerise/ds-tooltip": "^2.0.4",
+    "@synerise/ds-typography": "^2.0.4",
+    "@synerise/ds-utils": "^2.1.1",
     "lodash.debounce": "^4.0.8",
     "react-window": "^1.8.11",
     "uuid": "^8.3.2"
@@ -77,5 +77,5 @@
     "styled-components": "^5.3.3",
     "vitest": "4"
   },
-  "gitHead": "a49acd96b6f71f5617548ae5ce6126cb9b0985dc"
+  "gitHead": "b1d905617dfb186b5d80966d63ce55bf29df743d"
 }