@synerise/ds-dropdown 2.0.2 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dist/components/DropdownMenuList/DropdownMenuList.js +56 -21
  3. package/package.json +12 -12
package/CHANGELOG.md CHANGED
@@ -3,6 +3,16 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [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)
7
+
8
+ ### Features
9
+
10
+ - **list-item:** add content-fitting size="auto" ([e269f0a](https://github.com/synerise/synerise-design/commit/e269f0a48ca7472f4766a50a957e22d7988c5e13))
11
+
12
+ ## [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)
13
+
14
+ **Note:** Version bump only for package @synerise/ds-dropdown
15
+
6
16
  ## [2.0.2](https://github.com/synerise/synerise-design/compare/@synerise/ds-dropdown@2.0.1...@synerise/ds-dropdown@2.0.2) (2026-09-07)
7
17
 
8
18
  **Note:** Version bump only for package @synerise/ds-dropdown
package/dist/components/DropdownMenuList/DropdownMenuList.js CHANGED
@@ -2,10 +2,33 @@ import { jsx, Fragment } from "react/jsx-runtime";
2
2
  import { useCallback, useMemo } from "react";
3
3
  import { VariableSizeList } from "react-window";
4
4
  import { SearchNoResultsL } from "@synerise/ds-icon";
5
- import { LIST_ITEM_SIZE_MAPPING } from "@synerise/ds-list-item";
5
+ import { LIST_ITEM_SIZE_MAPPING, itemTypes, itemSizes } from "@synerise/ds-list-item";
6
6
  import Scrollbar from "@synerise/ds-scrollbar";
7
+ import { useMeasuredRowHeights, useMeasuredRow } from "@synerise/ds-utils";
7
8
  import { MAX_VISIBLE_ITEMS, SCROLLBAR_OFFSET } from "../../Dropdown.const.js";
8
9
  import { ScrollableMenuWrapper, DropdownMenuList as DropdownMenuList$1, DropdownMenuListItem, EmptyStates } from "./DropdownMenuList.styles.js";
10
+ const DIVIDER_HEIGHT = 17;
11
+ const DropdownRow = ({
12
+ index,
13
+ style,
14
+ data
15
+ }) => {
16
+ const {
17
+ dataSource,
18
+ onItemClick,
19
+ measureRow
20
+ } = data;
21
+ const item = dataSource[index];
22
+ const rowRef = useMeasuredRow(index, measureRow);
23
+ return /* @__PURE__ */ jsx("div", { ref: rowRef, style: {
24
+ ...style,
25
+ height: "auto",
26
+ minHeight: style.height
27
+ }, children: item.type === itemTypes.DIVIDER ? /* @__PURE__ */ jsx(DropdownMenuListItem, { ...item }) : /* @__PURE__ */ jsx(DropdownMenuListItem, { ...item, itemKey: item.key, onClick: (itemData) => {
28
+ item.onClick?.(itemData);
29
+ onItemClick();
30
+ } }) });
31
+ };
9
32
  const DropdownMenuList = ({
10
33
  dataSource,
11
34
  maxVisibleItems = MAX_VISIBLE_ITEMS,
@@ -14,9 +37,20 @@ const DropdownMenuList = ({
14
37
  closeOverlay,
15
38
  texts
16
39
  }) => {
17
- const getItemSize = useCallback((index) => {
18
- return dataSource[index].type === "divider" ? 17 : LIST_ITEM_SIZE_MAPPING[dataSource[index].size || "default"];
40
+ const getEstimatedItemSize = useCallback((index) => {
41
+ const item = dataSource[index];
42
+ return item.type === itemTypes.DIVIDER ? DIVIDER_HEIGHT : LIST_ITEM_SIZE_MAPPING[item.size || itemSizes.DEFAULT];
19
43
  }, [dataSource]);
44
+ const rowKeys = useMemo(() => dataSource.map((item, index) => item.key ?? item.itemKey ?? index), [dataSource]);
45
+ const {
46
+ listRef,
47
+ getItemSize,
48
+ measureRow,
49
+ measurementVersion
50
+ } = useMeasuredRowHeights({
51
+ keys: rowKeys,
52
+ estimate: getEstimatedItemSize
53
+ });
20
54
  const handleItemClick = useCallback(() => {
21
55
  if (hideOnItemClick) {
22
56
  setTimeout(() => {
@@ -26,41 +60,42 @@ const DropdownMenuList = ({
26
60
  }, [hideOnItemClick, closeOverlay]);
27
61
  const {
28
62
  listHeight,
29
- listMaxHeight
63
+ listMaxHeight,
64
+ hasAutoItem
30
65
  } = useMemo(() => {
31
66
  let height = 0;
32
67
  let maxHeight = 0;
33
68
  let visibleItems = 0;
69
+ let auto = false;
34
70
  dataSource.forEach((item, index) => {
35
71
  const itemHeight = getItemSize(index);
36
72
  height += itemHeight;
37
73
  if (visibleItems < maxVisibleItems) {
38
74
  maxHeight += itemHeight;
39
75
  }
40
- if (item.type !== "divider") {
76
+ if (item.type !== itemTypes.DIVIDER) {
41
77
  visibleItems += 1;
42
78
  }
79
+ if (item.size === itemSizes.AUTO) {
80
+ auto = true;
81
+ }
43
82
  });
44
83
  return {
45
84
  listHeight: height,
46
- listMaxHeight: maxHeight
85
+ listMaxHeight: maxHeight,
86
+ hasAutoItem: auto
47
87
  };
48
- }, [dataSource, getItemSize, maxVisibleItems]);
49
- 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: {
88
+ }, [dataSource, getItemSize, maxVisibleItems, measurementVersion]);
89
+ const itemData = useMemo(() => ({
90
+ dataSource,
91
+ onItemClick: handleItemClick,
92
+ measureRow
93
+ }), [dataSource, handleItemClick, measureRow]);
94
+ 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: {
50
95
  paddingRight: "8px"
51
- }, children: (listItemData) => {
52
- const {
53
- data,
54
- index
55
- } = listItemData;
56
- const item = data[index];
57
- return item.type === "divider" ? /* @__PURE__ */ jsx(DropdownMenuListItem, { ...item }) : /* @__PURE__ */ jsx(DropdownMenuListItem, { ...item, itemKey: item.key, onClick: (itemData) => {
58
- item.onClick?.(itemData);
59
- handleItemClick();
60
- } });
61
- } }) : /* @__PURE__ */ jsx(Fragment, { children: dataSource.map((item) => {
62
- return item.type === "divider" ? /* @__PURE__ */ jsx(DropdownMenuListItem, { ...item }) : /* @__PURE__ */ jsx(DropdownMenuListItem, { ...item, itemKey: item.key, onClick: (itemData) => {
63
- item.onClick?.(itemData);
96
+ }, children: DropdownRow }) : /* @__PURE__ */ jsx(Fragment, { children: dataSource.map((item) => {
97
+ return item.type === itemTypes.DIVIDER ? /* @__PURE__ */ jsx(DropdownMenuListItem, { ...item }) : /* @__PURE__ */ jsx(DropdownMenuListItem, { ...item, itemKey: item.key, onClick: (clickedItem) => {
98
+ item.onClick?.(clickedItem);
64
99
  handleItemClick();
65
100
  } });
66
101
  }) }) }) }) : /* @__PURE__ */ jsx(EmptyStates, { iconPosition: "top", customIcon: /* @__PURE__ */ jsx(SearchNoResultsL, {}), label: texts.noSearchResults }) });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-dropdown",
3
- "version": "2.0.2",
3
+ "version": "2.1.0",
4
4
  "description": "Dropdown UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "synerise/synerise-design",
@@ -43,16 +43,16 @@
43
43
  "types": "dist/index.d.ts",
44
44
  "dependencies": {
45
45
  "@floating-ui/react": "^0.27.16",
46
- "@synerise/ds-divider": "^2.0.1",
47
- "@synerise/ds-empty-states": "^2.0.1",
48
- "@synerise/ds-icon": "^2.1.0",
49
- "@synerise/ds-list-item": "^2.0.1",
50
- "@synerise/ds-popover": "^2.0.0",
51
- "@synerise/ds-scrollbar": "^2.0.1",
52
- "@synerise/ds-search-bar": "^2.0.2",
53
- "@synerise/ds-tooltip": "^2.0.1",
54
- "@synerise/ds-typography": "^2.0.1",
55
- "@synerise/ds-utils": "^2.0.0",
46
+ "@synerise/ds-divider": "^2.0.3",
47
+ "@synerise/ds-empty-states": "^2.0.2",
48
+ "@synerise/ds-icon": "^2.1.1",
49
+ "@synerise/ds-list-item": "^2.1.0",
50
+ "@synerise/ds-popover": "^2.0.1",
51
+ "@synerise/ds-scrollbar": "^2.0.2",
52
+ "@synerise/ds-search-bar": "^2.0.4",
53
+ "@synerise/ds-tooltip": "^2.0.3",
54
+ "@synerise/ds-typography": "^2.0.3",
55
+ "@synerise/ds-utils": "^2.1.0",
56
56
  "classnames": "^2.5.1",
57
57
  "react-window": "^1.8.11"
58
58
  },
@@ -65,5 +65,5 @@
65
65
  "react-intl": "^6.8.7",
66
66
  "styled-components": "^5.3.3"
67
67
  },
68
- "gitHead": "788eba77544b291f7e938864a3994df4b4d904e2"
68
+ "gitHead": "71f08fdaba8e7b80731e29a03883dc6a33f2b9db"
69
69
  }