@synerise/ds-context-selector 1.3.45 → 1.3.46

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.
 
+## [1.3.46](https://github.com/Synerise/synerise-design/compare/@synerise/ds-context-selector@1.3.45...@synerise/ds-context-selector@1.3.46) (2026-08-11)
+
+### Bug Fixes
+
+- **context-selector:** size virtual list window to visible content height ([7b2ca64](https://github.com/Synerise/synerise-design/commit/7b2ca641e418d396a7e48e21541e045f736e5181))
+
 ## [1.3.45](https://github.com/Synerise/synerise-design/compare/@synerise/ds-context-selector@1.3.44...@synerise/ds-context-selector@1.3.45) (2026-07-24)
 
 **Note:** Version bump only for package @synerise/ds-context-selector

package/CLAUDE.md

@@ -102,6 +102,7 @@ src/
 | `defaultGroup` | `boolean` | No | Marks which tab is active on open |
 | `icon` | `ReactNode` | No | Icon in sub-group list row |
 | `subGroups` | `ContextGroup[]` | No | Enables sub-group navigation within a tab |
+| `topSection` | `ReactNode` | No | Custom content rendered above the list for this tab; scrolls with the list and is hidden during search and sub-group navigation |
 | `description` | `ReactNode` | No | Row description |
 | `tooltip` | `string` | No | Tooltip on the group row |
 | `itemType` / `customSuffix` / `useCustomIcon` | — | No | Same semantics as `ContextItem` |

package/README.md

@@ -120,6 +120,7 @@ import ContextSelector from '@synerise/ds-context-selector'
 | itemType      | Type of items                                                    | string          | -       |
 | name          | Name of group                                                    | string          | -       |
 | subGroups     | Subgroups of groups                                              | ContextGroup[]  | -       |
+| topSection    | Custom content rendered above the list for this tab; scrolls with the list and is hidden during search and sub-group navigation | React.ReactNode | -       |
 | tooltip       | Tooltip text                                                     | string          | -       |
 | useCustomIcon | Use custom icon instead of wrapping it inside Icon component     | boolean         | false   |
 | description   | Set menu item description ( recommended to use with 'large' size | React.ReactNode | -       |

package/dist/ContextSelector.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useState, useEffect, useCallback, useMemo } from "react";
+import { useRef, useState, useEffect, useCallback, useMemo } from "react";
 import Button from "@synerise/ds-button";
 import Dropdown from "@synerise/ds-dropdown";
 import Icon, { AngleDownS, Add3M } from "@synerise/ds-icon";
@@ -45,6 +45,7 @@ const ContextSelector = ({
   dropdownDimensionsConfig
 }) => {
   const allTexts = useTexts(texts);
+  const noListNavigationRef = useRef([]);
   const [dropdownVisible, setDropdownVisible] = useState(defaultDropdownVisibility ?? false);
   const dimensionsConfig = {
     defaultHeight: DROPDOWN_HEIGHT,
@@ -138,6 +139,12 @@ const ContextSelector = ({
       onDeactivate?.();
     }, trigger, open: dropdownVisible, size: "medium", ...dropdownProps, popoverProps: {
       testId: "context-selector",
+      listNavigationConfig: {
+        enabled: false,
+        activeIndex: null,
+        listRef: noListNavigationRef
+      },
+      closeOnFocusOut: false,
       ...dropdownProps?.popoverProps,
       dismissConfig: {
         outsidePress: (event) => getClosest(event.target, ".ds-info-card") === null

package/dist/ContextSelector.types.d.ts

@@ -43,6 +43,7 @@ export type ContextGroup = {
     tooltip?: string;
     subGroups?: ContextGroup[];
     useCustomIcon?: boolean;
+    topSection?: ReactNode;
 };
 export declare const isContextItemsInSubGroup: (item: ContextGroup | ContextItemsInSubGroup) => item is ContextItemsInSubGroup;
 export type ContextItemsInSubGroup = ContextItem & {

package/dist/ContextSelectorDropdown/ContextSelectorDropdown.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo, useRef, useState, useCallback, useEffect } from "react";
+import { useMemo, useRef, useState, useCallback, useLayoutEffect, useEffect } from "react";
 import { VariableSizeList } from "react-window";
 import { v4 } from "uuid";
 import { theme } from "@synerise/ds-core";
@@ -13,18 +13,30 @@ import Tabs from "@synerise/ds-tabs";
 import { getActiveTabGroup, getGroupName, useSearchResults, focusWithArrowKeys } 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, TABS_HEIGHT, SUBGROUP_HEADER_HEIGHT, SEARCH_HEIGHT } from "../constants.js";
+import { NO_GROUP_NAME, DROPDOWN_HEIGHT } from "../constants.js";
 import ContextSelectorDropdownItem from "./ContextSelectorDropdownItem.js";
-import { isGroup, isListTitle } from "./utils.js";
+import { isGroup, getDropdownContentHeight, getListWindowHeight, isListTitle } from "./utils.js";
 const ITEM_SIZE = {
   [itemSizes.LARGE]: 50,
   [itemSizes.DEFAULT]: 32,
   title: 32,
   divider: 16
 };
+const FOCUSABLE_SELECTOR = 'button, [role="button"], a[href], input, select, textarea, [contenteditable="true"], [tabindex]:not([tabindex="-1"])';
 function isDivider(element) {
   return element.type === "divider";
 }
+const VirtualizedRow = ({
+  index,
+  style,
+  data
+}) => {
+  const item = data.items[index];
+  if (item && isDivider(item)) {
+    return /* @__PURE__ */ jsx("div", { style, children: /* @__PURE__ */ jsx(Divider, { marginTop: 8, marginBottom: 8 }) });
+  }
+  return item && isListTitle(item) ? /* @__PURE__ */ jsx(Title, { style, children: item.title }) : /* @__PURE__ */ jsx(ContextSelectorDropdownItem, { style, ...item });
+};
 const ContextSelectorDropdown = ({
   texts,
   setSelected,
@@ -57,11 +69,13 @@ const ContextSelectorDropdown = ({
   const listRef = useRef(null);
   const overlayRef = useRef(null);
   const scrollBarRef = useRef(null);
+  const topSectionRef = useRef(null);
   const [searchInputHandle, setSearchInputHandle] = useState();
   const [searchQuery, setSearchQuery] = useState("");
   const [activeTab, setActiveTab] = useState(defaultTab);
   const [activeGroup, setActiveGroup] = useState(void 0);
   const [searchInputCanBeFocused, setSearchInputFocus] = useState(true);
+  const [topSectionHeight, setTopSectionHeight] = useState(0);
   const classNames = useMemo(() => {
     return `ds-context-item ds-context-item-${v4()}`;
   }, []);
@@ -92,6 +106,22 @@ const ContextSelectorDropdown = ({
   const currentTabItems = useMemo(() => {
     return groups ? getActiveTabGroup(activeTab, groups) : void 0;
   }, [groups, activeTab]);
+  const activeTopSection = !searchQuery && !activeGroup ? currentTabItems?.topSection : void 0;
+  useLayoutEffect(() => {
+    const node = topSectionRef.current;
+    if (!node) {
+      setTopSectionHeight(0);
+      return void 0;
+    }
+    const measure = () => setTopSectionHeight(node.offsetHeight);
+    measure();
+    if (typeof ResizeObserver === "undefined") {
+      return void 0;
+    }
+    const observer = new ResizeObserver(measure);
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [activeTopSection, activeTab]);
   const groupByGroupName = useCallback((dropdownItems, maxItemsInGroup) => {
     const itemsNumber = dropdownItems?.length;
     const groupedItems = {};
@@ -200,6 +230,9 @@ const ContextSelectorDropdown = ({
   useEffect(() => {
     listRef.current?.resetAfterIndex(0, false);
   }, [activeItems, listRef]);
+  const itemData = useMemo(() => ({
+    items: activeItems
+  }), [activeItems]);
   const handleSearch = useCallback((val) => {
     setSearchQuery(val);
     resetList();
@@ -219,7 +252,7 @@ const ContextSelectorDropdown = ({
       scrollTop
     } = currentTarget;
     if (listRef.current !== null) {
-      listRef.current.scrollTo(scrollTop);
+      listRef.current.scrollTo(Math.max(0, scrollTop - topSectionHeight));
     }
   };
   const getItemSize = (index) => {
@@ -233,7 +266,12 @@ const ContextSelectorDropdown = ({
     return menuItemHeight ? ITEM_SIZE[menuItemHeight] : ITEM_SIZE[itemSizes.DEFAULT];
   };
   const dropdownContentHeight = useMemo(() => {
-    return outerHeight - (hasTabs && !searchQuery ? TABS_HEIGHT : 0) - (activeGroup ? SUBGROUP_HEADER_HEIGHT : 0) - SEARCH_HEIGHT;
+    return getDropdownContentHeight({
+      outerHeight,
+      hasTabs,
+      hasSearchQuery: Boolean(searchQuery),
+      hasActiveGroup: Boolean(activeGroup)
+    });
   }, [activeGroup, hasTabs, outerHeight, searchQuery]);
   useEffect(() => {
     if (scrollBarRef.current && listRef.current) {
@@ -243,11 +281,96 @@ const ContextSelectorDropdown = ({
       listRef.current.resetAfterIndex(0);
     }
   }, [searchQuery, activeGroup, activeTab]);
-  return /* @__PURE__ */ jsxs(Dropdown.Wrapper, { style: dropdownWrapperStyles, ref: overlayRef, onKeyDown: (event) => {
-    if (document?.activeElement === searchInputHandle?.current) {
+  const previousTabRef = useRef({
+    activeTab,
+    activeGroup
+  });
+  useEffect(() => {
+    const previous = previousTabRef.current;
+    if (previous.activeTab !== activeTab || previous.activeGroup !== activeGroup) {
+      previousTabRef.current = {
+        activeTab,
+        activeGroup
+      };
+      searchInputHandle?.current?.focus();
+    }
+  }, [activeTab, activeGroup, searchInputHandle]);
+  useEffect(() => {
+    if (!visible) {
+      return void 0;
+    }
+    const recoverLostFocus = (event) => {
+      if (event.key !== "ArrowDown" && event.key !== "ArrowUp") {
+        return;
+      }
+      if (document.activeElement !== document.body) {
+        return;
+      }
+      const overlay = overlayRef.current;
+      if (!overlay) {
+        return;
+      }
+      const navClass = classNames.split(" ")[1];
+      const firstRenderedRow = overlay.querySelector(`.${navClass}`);
+      const target = firstRenderedRow ?? searchInputHandle?.current ?? null;
+      if (target) {
+        event.preventDefault();
+        target.focus();
+      }
+    };
+    document.addEventListener("keydown", recoverLostFocus);
+    return () => document.removeEventListener("keydown", recoverLostFocus);
+  }, [visible, classNames, searchInputHandle]);
+  return /* @__PURE__ */ jsxs(Dropdown.Wrapper, { style: dropdownWrapperStyles, ref: overlayRef, "data-testid": "context-selector-dropdown", onKeyDown: (event) => {
+    const searchInput = searchInputHandle?.current ?? null;
+    if (document?.activeElement === searchInput) {
       setSearchInputFocus(false);
     }
-    searchQuery && focusWithArrowKeys(event, classNames.split(" ")[1], () => {
+    if (event.key === "ArrowUp" && document.activeElement === searchInput) {
+      event.preventDefault();
+      return;
+    }
+    const navClass = classNames.split(" ")[1];
+    const active = document.activeElement;
+    const topSectionItems = topSectionRef.current ? Array.from(topSectionRef.current.querySelectorAll(FOCUSABLE_SELECTOR)) : [];
+    const firstListItem = overlayRef.current?.querySelector(`.${navClass}`) ?? null;
+    const topIndex = active ? topSectionItems.indexOf(active) : -1;
+    const activeIsListItem = Boolean(active?.classList?.contains(navClass));
+    if (topIndex !== -1) {
+      if (event.key === "ArrowRight" || event.key === "ArrowLeft") {
+        event.preventDefault();
+        const nextIndex = event.key === "ArrowRight" ? Math.min(topIndex + 1, topSectionItems.length - 1) : Math.max(topIndex - 1, 0);
+        topSectionItems[nextIndex].focus();
+        return;
+      }
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        setSearchInputFocus(true);
+        searchInput?.focus();
+        return;
+      }
+      if (event.key === "Enter") {
+        event.preventDefault();
+        active?.click();
+        return;
+      }
+    }
+    if (event.key === "ArrowDown" && topIndex === -1 && !activeIsListItem && topSectionItems.length) {
+      event.preventDefault();
+      topSectionItems[0].focus();
+      return;
+    }
+    if (event.key === "ArrowUp" && active === firstListItem) {
+      event.preventDefault();
+      if (topSectionItems.length) {
+        topSectionItems[0].focus();
+      } else {
+        setSearchInputFocus(true);
+        searchInput?.focus();
+      }
+      return;
+    }
+    focusWithArrowKeys(event, navClass, () => {
       setSearchInputFocus(true);
     });
   }, children: [
@@ -262,18 +385,12 @@ const ContextSelectorDropdown = ({
       resetList();
     }, visible }) }),
     activeGroup && /* @__PURE__ */ jsx(Dropdown.BackAction, { label: activeGroup.name, onClick: () => setActiveGroup(void 0) }),
-    loading ? /* @__PURE__ */ jsx(Skeleton, { contentHeight: dropdownContentHeight, size: "M", numberOfSkeletons: 3 }) : /* @__PURE__ */ jsx(ItemsList, { contentHeight: dropdownContentHeight, children: activeItems?.length ? /* @__PURE__ */ jsx(Scrollbar, { absolute: true, style: {
+    loading ? /* @__PURE__ */ jsx(Skeleton, { contentHeight: dropdownContentHeight, size: "M", numberOfSkeletons: 3 }) : /* @__PURE__ */ jsx(ItemsList, { contentHeight: dropdownContentHeight, children: activeItems?.length ? /* @__PURE__ */ jsxs(Scrollbar, { absolute: true, style: {
       padding: 8
-    }, loading, hasMore: hasMoreItems, onYReachEnd: onFetchData, onScroll: handleScroll, ref: scrollBarRef, children: /* @__PURE__ */ jsx(ListContextProvider, { popoverDelay, children: /* @__PURE__ */ jsx(VariableSizeList, { className: "ds-context-selector-list", width: "100%", height: 300, itemCount: activeItems.length, itemSize: getItemSize, style: listStyle, ref: listRef, children: ({
-      index,
-      style
-    }) => {
-      const item = activeItems[index];
-      if (item && isDivider(item)) {
-        return /* @__PURE__ */ jsx("div", { style, children: /* @__PURE__ */ jsx(Divider, { marginTop: 8, marginBottom: 8 }) });
-      }
-      return item && isListTitle(item) ? /* @__PURE__ */ jsx(Title, { style, children: item.title }) : /* @__PURE__ */ jsx(ContextSelectorDropdownItem, { style, ...item });
-    } }, `list-${activeGroup}-${activeTab}`) }) }) : getNoResultContainer })
+    }, loading, hasMore: hasMoreItems, onYReachEnd: onFetchData, onScroll: handleScroll, ref: scrollBarRef, children: [
+      activeTopSection && /* @__PURE__ */ jsx("div", { ref: topSectionRef, children: activeTopSection }),
+      /* @__PURE__ */ jsx(ListContextProvider, { popoverDelay, children: /* @__PURE__ */ jsx(VariableSizeList, { className: "ds-context-selector-list", width: "100%", height: getListWindowHeight(dropdownContentHeight), itemCount: activeItems.length, itemSize: getItemSize, style: listStyle, ref: listRef, overscanCount: 8, itemData, children: VirtualizedRow }, `list-${activeGroup}-${activeTab}`) })
+    ] }) : getNoResultContainer })
   ] });
 };
 export {

package/dist/ContextSelectorDropdown/ContextSelectorDropdown.types.d.ts

@@ -0,0 +1,6 @@
+export type DropdownContentHeightArgs = {
+    outerHeight: number;
+    hasTabs: boolean;
+    hasSearchQuery: boolean;
+    hasActiveGroup: boolean;
+};

package/dist/ContextSelectorDropdown/ContextSelectorDropdown.types.js

@@ -0,0 +1 @@
+

package/dist/ContextSelectorDropdown/utils.d.ts

@@ -1,3 +1,6 @@
 import { ContextGroup, ContextItem, DropdownItemProps, ListTitle } from '../ContextSelector.types';
+import { DropdownContentHeightArgs } from './ContextSelectorDropdown.types';
+export declare const getDropdownContentHeight: ({ outerHeight, hasTabs, hasSearchQuery, hasActiveGroup, }: DropdownContentHeightArgs) => number;
+export declare const getListWindowHeight: (dropdownContentHeight: number) => number;
 export declare const isListTitle: (element: DropdownItemProps) => element is ListTitle;
 export declare const isGroup: (item: ContextItem | ContextGroup) => item is ContextGroup;

package/dist/ContextSelectorDropdown/utils.js

@@ -1,3 +1,11 @@
+import { TABS_HEIGHT, SUBGROUP_HEADER_HEIGHT, SEARCH_HEIGHT, MIN_LIST_WINDOW_HEIGHT } from "../constants.js";
+const getDropdownContentHeight = ({
+  outerHeight,
+  hasTabs,
+  hasSearchQuery,
+  hasActiveGroup
+}) => outerHeight - (hasTabs && !hasSearchQuery ? TABS_HEIGHT : 0) - (hasActiveGroup ? SUBGROUP_HEADER_HEIGHT : 0) - SEARCH_HEIGHT;
+const getListWindowHeight = (dropdownContentHeight) => Math.max(dropdownContentHeight, MIN_LIST_WINDOW_HEIGHT);
 const isListTitle = (element) => {
   return element.title !== void 0;
 };
@@ -5,6 +13,8 @@ const isGroup = (item) => {
   return "isGroup" in item;
 };
 export {
+  getDropdownContentHeight,
+  getListWindowHeight,
   isGroup,
   isListTitle
 };

package/dist/constants.d.ts

@@ -10,3 +10,4 @@ export declare const DROPDOWN_HEIGHT_THRESHOLD = 900;
 export declare const SEARCH_HEIGHT = 53;
 export declare const TABS_HEIGHT = 50;
 export declare const SUBGROUP_HEADER_HEIGHT = 53;
+export declare const MIN_LIST_WINDOW_HEIGHT = 300;

package/dist/constants.js

@@ -11,11 +11,13 @@ const DROPDOWN_HEIGHT_THRESHOLD = 900;
 const SEARCH_HEIGHT = 53;
 const TABS_HEIGHT = 50;
 const SUBGROUP_HEADER_HEIGHT = 53;
+const MIN_LIST_WINDOW_HEIGHT = 300;
 export {
   DROPDOWN_HEIGHT,
   DROPDOWN_HEIGHT_BELOW_THRESHOLD,
   DROPDOWN_HEIGHT_THRESHOLD,
   ITEM_SIZE,
+  MIN_LIST_WINDOW_HEIGHT,
   NO_GROUP_NAME,
   SEARCH_HEIGHT,
   SUBGROUP_HEADER_HEIGHT,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-context-selector",
-  "version": "1.3.45",
+  "version": "1.3.46",
   "description": "ContextSelector UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -36,25 +36,25 @@
     "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": "018414e0d7ffd102a07f8aa35fa2e2d3d4ed19e2",
+  "gitHead": "6df24ed12cd5f276d8eccde730591807982e3385",
   "sideEffects": [
     "dist/style/*",
     "*.less"
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^1.5.35",
-    "@synerise/ds-divider": "^1.3.16",
-    "@synerise/ds-dropdown": "^1.3.21",
-    "@synerise/ds-factors": "^1.12.12",
+    "@synerise/ds-button": "^1.5.36",
+    "@synerise/ds-divider": "^1.3.17",
+    "@synerise/ds-dropdown": "^1.3.22",
+    "@synerise/ds-factors": "^1.12.13",
     "@synerise/ds-icon": "^1.18.5",
-    "@synerise/ds-information-card": "^1.7.9",
-    "@synerise/ds-list-item": "^1.6.2",
-    "@synerise/ds-popover": "^1.6.2",
-    "@synerise/ds-result": "^1.0.66",
+    "@synerise/ds-information-card": "^1.7.10",
+    "@synerise/ds-list-item": "^1.6.3",
+    "@synerise/ds-popover": "^1.6.3",
+    "@synerise/ds-result": "^1.0.67",
     "@synerise/ds-scrollbar": "^1.5.2",
-    "@synerise/ds-skeleton": "^1.0.60",
-    "@synerise/ds-tabs": "^1.2.7",
+    "@synerise/ds-skeleton": "^1.0.61",
+    "@synerise/ds-tabs": "^1.2.8",
     "@synerise/ds-utils": "^1.10.2",
     "react-intl": "^6.8.7",
     "react-window": "1.8.11",