@synerise/ds-dropdown 2.0.3 → 2.1.1

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 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-dropdown@2.1.0...@synerise/ds-dropdown@2.1.1) (2026-09-18)
+
+
+### Bug Fixes
+
+* **dropdown:** clear the item-click close timer when the list unmounts ([07f32bb](https://github.com/synerise/synerise-design/commit/07f32bb9308955886b57739cfcb84f99f71914bc))
+
+
+
+
+
+# [2.1.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-dropdown@2.0.3...@synerise/ds-dropdown@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.3](https://github.com/synerise/synerise-design/compare/@synerise/ds-dropdown@2.0.2...@synerise/ds-dropdown@2.0.3) (2026-09-08)
 
 **Note:** Version bump only for package @synerise/ds-dropdown

package/dist/Dropdown.d.ts

@@ -1,11 +1,11 @@
 import { ComponentType } from 'react';
 import { default as SearchBar } from '@synerise/ds-search-bar';
-import { Wrapper } from './Dropdown.styles';
-import { DropdownProps } from './Dropdown.types';
 import { BackAction } from './components/BackAction/BackAction';
 import { BottomAction } from './components/BottomAction/BottomAction';
 import { MenuWrapper } from './components/DropdownMenuList/DropdownMenuList.styles';
 import { TextTrigger } from './components/TextTrigger/TextTrigger';
+import { Wrapper } from './Dropdown.styles';
+import { DropdownProps } from './Dropdown.types';
 type SubComponents = {
     Wrapper: typeof Wrapper;
     MenuWrapper: typeof MenuWrapper;

package/dist/Dropdown.js

@@ -2,13 +2,13 @@ import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { useState, useMemo } from "react";
 import SearchBar from "@synerise/ds-search-bar";
 import { getPopupContainer } from "@synerise/ds-utils";
-import { Wrapper } from "./Dropdown.styles.js";
 import { BackAction } from "./components/BackAction/BackAction.js";
 import { BottomAction } from "./components/BottomAction/BottomAction.js";
 import { DropdownFooter } from "./components/DropdownFooter/DropdownFooter.js";
 import { MenuWrapper } from "./components/DropdownMenuList/DropdownMenuList.styles.js";
 import { DropdownPopover } from "./components/DropdownPopover/DropdownPopover.js";
 import { TextTrigger } from "./components/TextTrigger/TextTrigger.js";
+import { Wrapper } from "./Dropdown.styles.js";
 import { useDropdownVisibility } from "./hooks/useDropdownVisibility.js";
 const Dropdown = ({
   hideOnItemClick,

package/dist/Dropdown.types.d.ts

@@ -1,5 +1,5 @@
-import { CSSProperties, HTMLAttributes, ReactNode } from 'react';
 import { OpenChangeReason } from '@floating-ui/react';
+import { CSSProperties, HTMLAttributes, ReactNode } from 'react';
 import { LegacyDropdownPlacement, PopoverOptions, PopoverTriggerType } from '@synerise/ds-popover';
 import { WithHTMLAttributes } from '@synerise/ds-utils';
 export type DropdownProps = Omit<WithHTMLAttributes<HTMLDivElement, DropdownSharedProps & {

package/dist/components/DropdownMenuList/DropdownMenuList.js

@@ -1,11 +1,35 @@
 import { jsx, Fragment } from "react/jsx-runtime";
-import { useCallback, useMemo } from "react";
+import { useCallback, useMemo, useRef, useEffect } from "react";
 import { VariableSizeList } from "react-window";
 import { SearchNoResultsL } from "@synerise/ds-icon";
-import { LIST_ITEM_SIZE_MAPPING } from "@synerise/ds-list-item";
+import { LIST_ITEM_SIZE_MAPPING, itemTypes, itemSizes } from "@synerise/ds-list-item";
 import Scrollbar from "@synerise/ds-scrollbar";
+import { useMeasuredRowHeights, useMeasuredRow } from "@synerise/ds-utils";
 import { MAX_VISIBLE_ITEMS, SCROLLBAR_OFFSET } from "../../Dropdown.const.js";
 import { ScrollableMenuWrapper, DropdownMenuList as DropdownMenuList$1, DropdownMenuListItem, EmptyStates } from "./DropdownMenuList.styles.js";
+const DIVIDER_HEIGHT = 17;
+const CLOSE_DELAY = 10;
+const DropdownRow = ({
+  index,
+  style,
+  data
+}) => {
+  const {
+    dataSource,
+    onItemClick,
+    measureRow
+  } = data;
+  const item = dataSource[index];
+  const rowRef = useMeasuredRow(index, measureRow);
+  return /* @__PURE__ */ jsx("div", { ref: rowRef, style: {
+    ...style,
+    height: "auto",
+    minHeight: style.height
+  }, children: item.type === itemTypes.DIVIDER ? /* @__PURE__ */ jsx(DropdownMenuListItem, { ...item }) : /* @__PURE__ */ jsx(DropdownMenuListItem, { ...item, itemKey: item.key, onClick: (itemData) => {
+    item.onClick?.(itemData);
+    onItemClick();
+  } }) });
+};
 const DropdownMenuList = ({
   dataSource,
   maxVisibleItems = MAX_VISIBLE_ITEMS,
@@ -14,53 +38,68 @@ const DropdownMenuList = ({
   closeOverlay,
   texts
 }) => {
-  const getItemSize = useCallback((index) => {
-    return dataSource[index].type === "divider" ? 17 : LIST_ITEM_SIZE_MAPPING[dataSource[index].size || "default"];
+  const getEstimatedItemSize = useCallback((index) => {
+    const item = dataSource[index];
+    return item.type === itemTypes.DIVIDER ? DIVIDER_HEIGHT : LIST_ITEM_SIZE_MAPPING[item.size || itemSizes.DEFAULT];
   }, [dataSource]);
+  const rowKeys = useMemo(() => dataSource.map((item, index) => item.key ?? item.itemKey ?? index), [dataSource]);
+  const {
+    listRef,
+    getItemSize,
+    measureRow,
+    measurementVersion
+  } = useMeasuredRowHeights({
+    keys: rowKeys,
+    estimate: getEstimatedItemSize
+  });
+  const closeTimeoutRef = useRef();
   const handleItemClick = useCallback(() => {
     if (hideOnItemClick) {
-      setTimeout(() => {
+      clearTimeout(closeTimeoutRef.current);
+      closeTimeoutRef.current = setTimeout(() => {
         closeOverlay();
-      }, 10);
+      }, CLOSE_DELAY);
     }
   }, [hideOnItemClick, closeOverlay]);
+  useEffect(() => () => clearTimeout(closeTimeoutRef.current), []);
   const {
     listHeight,
-    listMaxHeight
+    listMaxHeight,
+    hasAutoItem
   } = useMemo(() => {
     let height = 0;
     let maxHeight = 0;
     let visibleItems = 0;
+    let auto = false;
     dataSource.forEach((item, index) => {
       const itemHeight = getItemSize(index);
       height += itemHeight;
       if (visibleItems < maxVisibleItems) {
         maxHeight += itemHeight;
       }
-      if (item.type !== "divider") {
+      if (item.type !== itemTypes.DIVIDER) {
         visibleItems += 1;
       }
+      if (item.size === itemSizes.AUTO) {
+        auto = true;
+      }
     });
     return {
       listHeight: height,
-      listMaxHeight: maxHeight
+      listMaxHeight: maxHeight,
+      hasAutoItem: auto
     };
-  }, [dataSource, getItemSize, maxVisibleItems]);
-  return /* @__PURE__ */ jsx(ScrollableMenuWrapper, { children: dataSource.length ? /* @__PURE__ */ jsx(Scrollbar, { absolute: true, maxHeight: listMaxHeight + SCROLLBAR_OFFSET, children: /* @__PURE__ */ jsx(DropdownMenuList$1, { children: virtualised ? /* @__PURE__ */ jsx(VariableSizeList, { height: listHeight, itemData: dataSource, itemCount: dataSource.length, itemSize: getItemSize, width: "100%", style: {
+  }, [dataSource, getItemSize, maxVisibleItems, measurementVersion]);
+  const itemData = useMemo(() => ({
+    dataSource,
+    onItemClick: handleItemClick,
+    measureRow
+  }), [dataSource, handleItemClick, measureRow]);
+  return /* @__PURE__ */ jsx(ScrollableMenuWrapper, { children: dataSource.length ? /* @__PURE__ */ jsx(Scrollbar, { absolute: true, maxHeight: !virtualised && hasAutoItem ? void 0 : listMaxHeight + SCROLLBAR_OFFSET, children: /* @__PURE__ */ jsx(DropdownMenuList$1, { children: virtualised ? /* @__PURE__ */ jsx(VariableSizeList, { ref: listRef, height: listHeight, itemData, itemCount: dataSource.length, itemSize: getItemSize, itemKey: (index) => rowKeys[index], estimatedItemSize: getEstimatedItemSize(0), width: "100%", style: {
     paddingRight: "8px"
-  }, children: (listItemData) => {
-    const {
-      data,
-      index
-    } = listItemData;
-    const item = data[index];
-    return item.type === "divider" ? /* @__PURE__ */ jsx(DropdownMenuListItem, { ...item }) : /* @__PURE__ */ jsx(DropdownMenuListItem, { ...item, itemKey: item.key, onClick: (itemData) => {
-      item.onClick?.(itemData);
-      handleItemClick();
-    } });
-  } }) : /* @__PURE__ */ jsx(Fragment, { children: dataSource.map((item) => {
-    return item.type === "divider" ? /* @__PURE__ */ jsx(DropdownMenuListItem, { ...item }) : /* @__PURE__ */ jsx(DropdownMenuListItem, { ...item, itemKey: item.key, onClick: (itemData) => {
-      item.onClick?.(itemData);
+  }, children: DropdownRow }) : /* @__PURE__ */ jsx(Fragment, { children: dataSource.map((item) => {
+    return item.type === itemTypes.DIVIDER ? /* @__PURE__ */ jsx(DropdownMenuListItem, { ...item }) : /* @__PURE__ */ jsx(DropdownMenuListItem, { ...item, itemKey: item.key, onClick: (clickedItem) => {
+      item.onClick?.(clickedItem);
       handleItemClick();
     } });
   }) }) }) }) : /* @__PURE__ */ jsx(EmptyStates, { iconPosition: "top", customIcon: /* @__PURE__ */ jsx(SearchNoResultsL, {}), label: texts.noSearchResults }) });

package/dist/components/DropdownOverlay/DropdownOverlay.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
+import { useMergeRefs } from "@floating-ui/react";
 import classnames from "classnames";
 import { forwardRef, useRef, useState, useEffect } from "react";
-import { useMergeRefs } from "@floating-ui/react";
 import { getDropdownWidth } from "../../utils/getDropdownWidth.js";
 import { OverlayWrapper } from "./DropdownOverlay.styles.js";
 const DropdownOverlay = forwardRef(({

package/dist/components/DropdownPopover/DropdownPopover.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useRef } from "react";
 import { FloatingList } from "@floating-ui/react";
+import { useRef } from "react";
 import { DropdownContextProvider } from "@synerise/ds-core";
 import { getPlacement, Popover, PopoverTrigger, PopoverContent } from "@synerise/ds-popover";
 import { POPOVER_SHIFT_CONFIG, POPOVER_FLIP_CONFIG, POPOVER_OFFSET_CONFIG, POPOVER_TRANSITION_DURATION } from "../../Dropdown.const.js";

package/dist/index.d.ts

@@ -1,9 +1,9 @@
-export { default, Dropdown } from './Dropdown';
+export { BackAction } from './components/BackAction/BackAction';
+export { BottomAction } from './components/BottomAction/BottomAction';
 export { DropdownMenu } from './components/DropdownMenu/DropdownMenu';
+export type { DropdownMenuProps } from './components/DropdownMenu/DropdownMenu.types';
+export type { DropdownMenuListItemProps } from './components/DropdownMenuList/DropdownMenuList.types';
 export { DropdownOverlay } from './components/DropdownOverlay/DropdownOverlay';
 export { TextTrigger } from './components/TextTrigger/TextTrigger';
-export { BackAction } from './components/BackAction/BackAction';
-export { BottomAction } from './components/BottomAction/BottomAction';
+export { Dropdown, default } from './Dropdown';
 export type { DropdownPlacement, DropdownProps, DropdownSharedProps, DropdownSize, } from './Dropdown.types';
-export { type DropdownMenuProps } from './components/DropdownMenu/DropdownMenu.types';
-export { type DropdownMenuListItemProps } from './components/DropdownMenuList/DropdownMenuList.types';

package/dist/index.js

@@ -1,9 +1,9 @@
-import { Dropdown, Dropdown as Dropdown2 } from "./Dropdown.js";
+import { BackAction } from "./components/BackAction/BackAction.js";
+import { BottomAction } from "./components/BottomAction/BottomAction.js";
 import { DropdownMenu } from "./components/DropdownMenu/DropdownMenu.js";
 import { DropdownOverlay } from "./components/DropdownOverlay/DropdownOverlay.js";
 import { TextTrigger } from "./components/TextTrigger/TextTrigger.js";
-import { BackAction } from "./components/BackAction/BackAction.js";
-import { BottomAction } from "./components/BottomAction/BottomAction.js";
+import { Dropdown, Dropdown as Dropdown2 } from "./Dropdown.js";
 export {
   BackAction,
   BottomAction,

package/dist/utils/index.d.ts

@@ -1,3 +1,3 @@
+export * from './getDropdownWidth';
 export * from './getTransitionConfig';
 export * from './isSplitFooter';
-export * from './getDropdownWidth';

package/dist/utils/index.js

@@ -1,6 +1,6 @@
+import { getDropdownWidth } from "./getDropdownWidth.js";
 import { getTransitionConfig } from "./getTransitionConfig.js";
 import { isSplitFooter } from "./isSplitFooter.js";
-import { getDropdownWidth } from "./getDropdownWidth.js";
 export {
   getDropdownWidth,
   getTransitionConfig,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-dropdown",
-  "version": "2.0.3",
+  "version": "2.1.1",
   "description": "Dropdown UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "synerise/synerise-design",
@@ -43,16 +43,16 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@floating-ui/react": "^0.27.16",
-    "@synerise/ds-divider": "^2.0.2",
-    "@synerise/ds-empty-states": "^2.0.1",
-    "@synerise/ds-icon": "^2.1.0",
-    "@synerise/ds-list-item": "^2.0.2",
-    "@synerise/ds-popover": "^2.0.1",
-    "@synerise/ds-scrollbar": "^2.0.1",
-    "@synerise/ds-search-bar": "^2.0.3",
-    "@synerise/ds-tooltip": "^2.0.2",
-    "@synerise/ds-typography": "^2.0.2",
-    "@synerise/ds-utils": "^2.0.0",
+    "@synerise/ds-divider": "^2.0.4",
+    "@synerise/ds-empty-states": "^2.0.3",
+    "@synerise/ds-icon": "^2.1.2",
+    "@synerise/ds-list-item": "^2.1.1",
+    "@synerise/ds-popover": "^2.0.2",
+    "@synerise/ds-scrollbar": "^2.0.3",
+    "@synerise/ds-search-bar": "^2.0.5",
+    "@synerise/ds-tooltip": "^2.0.4",
+    "@synerise/ds-typography": "^2.0.4",
+    "@synerise/ds-utils": "^2.1.1",
     "classnames": "^2.5.1",
     "react-window": "^1.8.11"
   },
@@ -65,5 +65,5 @@
     "react-intl": "^6.8.7",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "e0dced8fd3a1194eff2fafc1b7e385b29238af88"
+  "gitHead": "b1d905617dfb186b5d80966d63ce55bf29df743d"
 }