@synerise/ds-context-selector 0.24.7 → 0.25.0

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.25.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-context-selector@0.24.8...@synerise/ds-context-selector@0.25.0) (2024-09-13)
+
+
+### Features
+
+* **context-selector:** reset tabs on item select ([34b398a](https://github.com/Synerise/synerise-design/commit/34b398a4e5cdf948031ec1ab311acf712674b2a8))
+
+
+
+
+
+## [0.24.8](https://github.com/Synerise/synerise-design/compare/@synerise/ds-context-selector@0.24.7...@synerise/ds-context-selector@0.24.8) (2024-09-11)
+
+
+### Bug Fixes
+
+* **context-selector:** updated search logic ([dfadc02](https://github.com/Synerise/synerise-design/commit/dfadc02928651905f31c58a374d48368b8375eb3))
+* **factors:** make all dropdowns same fixed height ([40e86d1](https://github.com/Synerise/synerise-design/commit/40e86d183dddb925c2b75c499615c1455b93b7c4))
+
+
+
+
+
 ## [0.24.7](https://github.com/Synerise/synerise-design/compare/@synerise/ds-context-selector@0.24.6...@synerise/ds-context-selector@0.24.7) (2024-09-03)
 
 **Note:** Version bump only for package @synerise/ds-context-selector

package/dist/ContextSelector.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { ContextProps } from './ContextSelector.types';
-declare const ContextSelector: ({ defaultDropdownVisibility, selectedItem, onSelectItem, onSetGroup, groups, items, texts, opened, addMode, loading, customTriggerComponent, trigger, menuItemHeight, dropdownWrapperStyles, onClickOutsideEvents, onClickOutside, onSearch, hideSearchField, hasMoreItems, onFetchData, onActivate, onDeactivate, onOpen, getPopupContainerOverride, type, dropdownProps, disabled, errorText, readOnly, getMenuEntryProps, }: ContextProps) => React.JSX.Element;
+declare const ContextSelector: ({ defaultDropdownVisibility, selectedItem, onSelectItem, onSetGroup, groups, items, texts, opened, addMode, loading, customTriggerComponent, trigger, menuItemHeight, dropdownWrapperStyles, onClickOutsideEvents, onClickOutside, onSearch, hideSearchField, hasMoreItems, onFetchData, onActivate, onDeactivate, onOpen, getPopupContainerOverride, type, dropdownProps, disabled, errorText, readOnly, getMenuEntryProps, dropdownDimensionsConfig, }: ContextProps) => React.JSX.Element;
 export default ContextSelector;

package/dist/ContextSelector.js

@@ -15,6 +15,7 @@ import InformationCard from '@synerise/ds-information-card';
 import { getPopupContainer } from '@synerise/ds-utils';
 import ContextSelectorDropdown from './ContextSelectorDropdown/ContextSelectorDropdown';
 import { ItemWrapper, ErrorWrapper } from './ContextSelector.styles';
+import { DROPDOWN_HEIGHT, DROPDOWN_HEIGHT_BELOW_THRESHOLD, DROPDOWN_HEIGHT_THRESHOLD } from './constants';
 
 var ContextSelector = function ContextSelector(_ref) {
   var defaultDropdownVisibility = _ref.defaultDropdownVisibility,
@@ -49,12 +50,34 @@ var ContextSelector = function ContextSelector(_ref) {
       errorText = _ref.errorText,
       _ref$readOnly = _ref.readOnly,
       readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-      getMenuEntryProps = _ref.getMenuEntryProps;
+      getMenuEntryProps = _ref.getMenuEntryProps,
+      dropdownDimensionsConfig = _ref.dropdownDimensionsConfig;
 
   var _useState = useState(defaultDropdownVisibility != null ? defaultDropdownVisibility : false),
       dropdownVisible = _useState[0],
       setDropdownVisible = _useState[1];
 
+  var dimensionsConfig = _objectSpread({
+    defaultHeight: DROPDOWN_HEIGHT,
+    lowerHeight: DROPDOWN_HEIGHT_BELOW_THRESHOLD,
+    threshold: DROPDOWN_HEIGHT_THRESHOLD
+  }, dropdownDimensionsConfig);
+
+  var _useState2 = useState(dimensionsConfig.defaultHeight),
+      outerHeight = _useState2[0],
+      setOuterHeight = _useState2[1];
+
+  useEffect(function () {
+    var checkViewportHeight = function checkViewportHeight() {
+      return setOuterHeight(window.innerHeight < dimensionsConfig.threshold ? dimensionsConfig.lowerHeight : dimensionsConfig.defaultHeight);
+    };
+
+    checkViewportHeight();
+    window.addEventListener('resize', checkViewportHeight);
+    return function () {
+      window.removeEventListener('resize', checkViewportHeight);
+    };
+  }, [dimensionsConfig.defaultHeight, dimensionsConfig.lowerHeight, dimensionsConfig.threshold]);
   useEffect(function () {
     setDropdownVisible(defaultDropdownVisibility != null ? defaultDropdownVisibility : false);
   }, [defaultDropdownVisibility]);
@@ -169,7 +192,8 @@ var ContextSelector = function ContextSelector(_ref) {
       onSearch: onSearch,
       hideSearchField: hideSearchField,
       hasMoreItems: hasMoreItems,
-      onFetchData: onFetchData
+      onFetchData: onFetchData,
+      outerHeight: outerHeight
     })
   }), customTriggerComponent != null ? customTriggerComponent : triggerButton)), errorText && /*#__PURE__*/React.createElement(ErrorWrapper, null, errorText));
 };

package/dist/ContextSelector.styles.d.ts

@@ -1,8 +1,15 @@
+/// <reference types="react" />
 export declare const TabsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ContentPlaceholder: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ItemsList: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ItemsList: import("styled-components").StyledComponent<"div", any, {
+    contentHeight?: number | undefined;
+}, never>;
 export declare const SearchResult: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const SearchResultHighlight: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const Title: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ItemWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const ShowMoreItem: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ErrorWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Skeleton: import("styled-components").StyledComponent<({ size, numberOfSkeletons, width, height, className }: import("@synerise/ds-skeleton").SkeletonProps) => import("react").JSX.Element, any, {
+    contentHeight?: number | undefined;
+}, never>;

package/dist/ContextSelector.styles.js

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import DropdownSkeleton from '@synerise/ds-skeleton';
 export var TabsWrapper = styled.div.withConfig({
   displayName: "ContextSelectorstyles__TabsWrapper",
   componentId: "sc-1tuu6xk-0"
@@ -10,8 +11,10 @@ export var ContentPlaceholder = styled.div.withConfig({
 export var ItemsList = styled.div.withConfig({
   displayName: "ContextSelectorstyles__ItemsList",
   componentId: "sc-1tuu6xk-2"
-})(["width:100%;background:", ";.ds-context-selector-list{height:auto !important;max-height:300px;}"], function (props) {
+})(["width:100%;background:", ";.ds-context-selector-list{height:auto !important;max-height:300px;}", ""], function (props) {
   return props.theme.palette.white;
+}, function (props) {
+  return props.contentHeight !== undefined && "height: " + props.contentHeight + "px;";
 });
 export var SearchResult = styled.span.withConfig({
   displayName: "ContextSelectorstyles__SearchResult",
@@ -35,9 +38,19 @@ export var ItemWrapper = styled.span.withConfig({
   displayName: "ContextSelectorstyles__ItemWrapper",
   componentId: "sc-1tuu6xk-6"
 })(["max-width:170px;overflow:hidden;text-overflow:ellipsis;"]);
+export var ShowMoreItem = styled.div.withConfig({
+  displayName: "ContextSelectorstyles__ShowMoreItem",
+  componentId: "sc-1tuu6xk-7"
+})(["font-weight:500;"]);
 export var ErrorWrapper = styled.div.withConfig({
   displayName: "ContextSelectorstyles__ErrorWrapper",
-  componentId: "sc-1tuu6xk-7"
+  componentId: "sc-1tuu6xk-8"
 })(["color:", ";margin-top:8px;"], function (props) {
   return props.theme.palette['red-600'];
+});
+export var Skeleton = styled(DropdownSkeleton).withConfig({
+  displayName: "ContextSelectorstyles__Skeleton",
+  componentId: "sc-1tuu6xk-9"
+})(["", ""], function (props) {
+  return props.contentHeight !== undefined && "height: " + props.contentHeight + "px;";
 });

package/dist/ContextSelector.types.d.ts

@@ -1,15 +1,15 @@
-import { CSSProperties, ReactNode, ReactText } from 'react';
-import { HandledEventsType } from '@synerise/ds-utils';
-import { ItemSize } from '@synerise/ds-menu';
-import { DropdownProps } from '@synerise/ds-dropdown/dist/Dropdown';
+import type { CSSProperties, ReactNode, ReactText } from 'react';
+import type { HandledEventsType } from '@synerise/ds-utils';
+import type { DropdownProps } from '@synerise/ds-dropdown';
 import type { FactorsProps } from '@synerise/ds-factors';
-import { InformationCardProps } from '@synerise/ds-information-card';
-import { ListItemProps } from '@synerise/ds-list-item';
+import type { InformationCardProps } from '@synerise/ds-information-card';
+import type { ListItemProps, ItemSize } from '@synerise/ds-list-item';
 export type ContextTexts = {
     buttonLabel: string;
     searchPlaceholder: string;
     loadingResults: string;
     noResults: string;
+    showMore: string;
 };
 export type ContextItem = Pick<ListItemProps, 'renderHoverTooltip' | 'hoverTooltipProps' | 'disabled'> & {
     id: ReactText | null;
@@ -71,6 +71,11 @@ export type ContextProps = {
     dropdownProps?: Omit<DropdownProps, 'trigger' | 'getPopupContainer' | 'onVisibleChange' | 'visible' | 'overlay'>;
     errorText?: ReactNode | string;
     getMenuEntryProps?: FactorsProps['getMenuEntryProps'];
+    dropdownDimensionsConfig?: {
+        defaultHeight?: number;
+        lowerHeight?: number;
+        threshold?: number;
+    };
 };
 export type ContextDropdownProps = {
     setDropdownVisible: (show: boolean) => void;
@@ -91,30 +96,23 @@ export type ContextDropdownProps = {
     onFetchData?: () => void;
     hasMoreItems?: boolean;
     style?: CSSProperties;
+    outerHeight?: number;
+    maxSearchResultsInGroup?: number;
 };
 export type ContextSelectorDropdownItemProps = {
-    item: ContextItem | ContextGroup;
-    searchQuery: string;
+    className: string;
     clearSearch?: () => void;
     hideDropdown?: () => void;
-    select: (item: ContextItem | ContextGroup) => void;
-    selected?: boolean;
-    className: string;
-    menuItemHeight?: ItemSize;
-    style?: CSSProperties;
-};
-export type ListItem = {
-    className: string;
     item: ContextItem | ContextGroup;
-    searchQuery: string;
-    select: (item: ContextItem | ContextGroup) => void;
     menuItemHeight?: ItemSize;
+    searchQuery?: string;
+    select: (item: ContextItem | ContextGroup) => void;
     selected?: boolean;
-    clearSearch?: () => void;
-    hideDropdown?: () => void;
+    style?: CSSProperties;
+    label?: ReactNode;
 };
 export type ListTitle = {
     title?: string;
     type?: string;
 };
-export type DropdownItemProps = ListTitle | ListItem;
+export type DropdownItemProps = ListTitle | ContextSelectorDropdownItemProps;

package/dist/ContextSelectorDropdown/ContextSelectorDropdown.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { ContextDropdownProps } from '../ContextSelector.types';
-declare const ContextSelectorDropdown: React.FC<ContextDropdownProps>;
+declare const ContextSelectorDropdown: ({ texts, setSelected, onSetGroup, groups, items, setDropdownVisible, value, visible, hideSearchField, loading, menuItemHeight, dropdownWrapperStyles, onClickOutsideEvents, onClickOutside, onSearch, onFetchData, hasMoreItems, outerHeight, maxSearchResultsInGroup, }: ContextDropdownProps) => React.JSX.Element;
 export default ContextSelectorDropdown;

package/dist/ContextSelectorDropdown/ContextSelectorDropdown.js

@@ -1,5 +1,3 @@
-var _ITEM_SIZE;
-
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
@@ -8,30 +6,21 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-import * as React from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { v4 as uuid } from 'uuid';
+import { VariableSizeList } from 'react-window';
 import Dropdown from '@synerise/ds-dropdown';
-import Icon, { SearchM } from '@synerise/ds-icon';
+import Icon, { ArrowRightCircleM, SearchM } from '@synerise/ds-icon';
 import Tabs from '@synerise/ds-tabs';
-import { focusWithArrowKeys, getClosest, useOnClickOutside } from '@synerise/ds-utils';
+import { focusWithArrowKeys, getClosest, useOnClickOutside, useSearchResults, getActiveTabGroup, getGroupName } from '@synerise/ds-utils';
 import Result from '@synerise/ds-result';
 import Scrollbar from '@synerise/ds-scrollbar';
 import { theme } from '@synerise/ds-core';
-import { v4 as uuid } from 'uuid';
-import { VariableSizeList as List } from 'react-window';
-import { ItemSize } from '@synerise/ds-menu';
-import DropdownSkeleton from '@synerise/ds-skeleton';
+import { itemSizes } from '@synerise/ds-list-item';
 import * as S from '../ContextSelector.styles';
 import ContextSelectorDropdownItem from './ContextSelectorDropdownItem';
-var NO_GROUP_NAME = 'NO_GROUP_NAME';
-var ITEM_SIZE = (_ITEM_SIZE = {}, _ITEM_SIZE[ItemSize.LARGE] = 50, _ITEM_SIZE[ItemSize.DEFAULT] = 32, _ITEM_SIZE.title = 32, _ITEM_SIZE);
-
-function isListTitle(element) {
-  return element.title !== undefined;
-}
-
-function isGroup(item) {
-  return 'isGroup' in item;
-}
+import { NO_GROUP_NAME, ITEM_SIZE, DROPDOWN_HEIGHT, TABS_HEIGHT, SUBGROUP_HEADER_HEIGHT, SEARCH_HEIGHT } from '../constants';
+import { isGroup, isListTitle } from './utils';
 
 var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
   var texts = _ref.texts,
@@ -51,44 +40,49 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
       onClickOutside = _ref.onClickOutside,
       onSearch = _ref.onSearch,
       onFetchData = _ref.onFetchData,
-      hasMoreItems = _ref.hasMoreItems;
-  var listRef = React.createRef();
+      hasMoreItems = _ref.hasMoreItems,
+      _ref$outerHeight = _ref.outerHeight,
+      outerHeight = _ref$outerHeight === void 0 ? DROPDOWN_HEIGHT : _ref$outerHeight,
+      _ref$maxSearchResults = _ref.maxSearchResultsInGroup,
+      maxSearchResultsInGroup = _ref$maxSearchResults === void 0 ? 4 : _ref$maxSearchResults;
   var listStyle = {
     overflowX: 'unset',
     overflowY: 'unset'
   };
-  var defaultTab = React.useMemo(function () {
+  var defaultTab = useMemo(function () {
     var defaultIndex = groups == null ? void 0 : groups.findIndex(function (group) {
       return group.defaultGroup;
     });
     return defaultIndex || 0;
   }, [groups]);
-  var overlayRef = React.useRef(null);
+  var listRef = useRef(null);
+  var overlayRef = useRef(null);
+  var scrollBarRef = useRef(null);
 
-  var _React$useState = React.useState(),
-      searchInputHandle = _React$useState[0],
-      setSearchInputHandle = _React$useState[1];
+  var _useState = useState(),
+      searchInputHandle = _useState[0],
+      setSearchInputHandle = _useState[1];
 
-  var _React$useState2 = React.useState(''),
-      searchQuery = _React$useState2[0],
-      setSearchQuery = _React$useState2[1];
+  var _useState2 = useState(''),
+      searchQuery = _useState2[0],
+      setSearchQuery = _useState2[1];
 
-  var _React$useState3 = React.useState(defaultTab),
-      activeTab = _React$useState3[0],
-      setActiveTab = _React$useState3[1];
+  var _useState3 = useState(defaultTab),
+      activeTab = _useState3[0],
+      setActiveTab = _useState3[1];
 
-  var _React$useState4 = React.useState(undefined),
-      activeGroup = _React$useState4[0],
-      setActiveGroup = _React$useState4[1];
+  var _useState4 = useState(undefined),
+      activeGroup = _useState4[0],
+      setActiveGroup = _useState4[1];
 
-  var _React$useState5 = React.useState(true),
-      searchInputCanBeFocused = _React$useState5[0],
-      setSearchInputFocus = _React$useState5[1];
+  var _useState5 = useState(true),
+      searchInputCanBeFocused = _useState5[0],
+      setSearchInputFocus = _useState5[1];
 
-  var classNames = React.useMemo(function () {
+  var classNames = useMemo(function () {
     return "ds-context-item ds-context-item-" + uuid();
   }, []);
-  var handleOnSetGroup = React.useCallback(function (item) {
+  var handleOnSetGroup = useCallback(function (item) {
     if (isGroup(item)) {
       onSetGroup && onSetGroup(item);
       setActiveGroup(item);
@@ -100,23 +94,27 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
       setDropdownVisible(false);
     }
   }, onClickOutsideEvents);
-  var clearSearch = React.useCallback(function () {
+  var clearSearch = useCallback(function () {
     setSearchQuery('');
   }, []);
-  var hideDropdown = React.useCallback(function () {
+  var hideDropdown = useCallback(function () {
     setDropdownVisible(false);
   }, [setDropdownVisible]);
-  var currentTabItems = React.useMemo(function () {
-    return groups == null ? void 0 : groups.find(function (group, index) {
-      return activeTab === index;
-    });
+  var handleSelect = useCallback(function (parameter) {
+    setSelected(parameter);
+    setActiveGroup(undefined);
+    setActiveTab(defaultTab);
+  }, [defaultTab, setSelected]);
+  var currentTabItems = useMemo(function () {
+    return groups ? getActiveTabGroup(activeTab, groups) : undefined;
   }, [groups, activeTab]);
-  var groupByGroupName = React.useCallback(function (activeItems) {
-    var itemsNumber = activeItems.length;
+  var groupByGroupName = useCallback(function (dropdownItems, maxItemsInGroup) {
+    var itemsNumber = dropdownItems == null ? void 0 : dropdownItems.length;
     var groupedItems = {};
 
     for (var i = 0; i < itemsNumber; i += 1) {
-      var item = activeItems[i];
+      var item = dropdownItems[i]; // @ts-ignore
+
       var groupName = item.groupName || NO_GROUP_NAME;
       var group = groupedItems[groupName] || [];
       group.push(item);
@@ -132,7 +130,8 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
         });
       }
 
-      groupedItems[key].forEach(function (item) {
+      var groupItems = maxItemsInGroup ? groupedItems[key].slice(0, maxItemsInGroup) : groupedItems[key];
+      groupItems.forEach(function (item) {
         var resultItem = item.isGroup ? {
           className: classNames,
           item: item,
@@ -143,49 +142,41 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
           className: classNames,
           item: item,
           searchQuery: searchQuery,
+          clearSearch: clearSearch,
           hideDropdown: hideDropdown,
-          select: setSelected,
+          select: handleSelect,
           selected: Boolean(value) && item.id === (value == null ? void 0 : value.id),
           menuItemHeight: menuItemHeight
         };
         resultItems.push(resultItem);
       });
-    });
-    return resultItems;
-  }, [activeGroup, classNames, searchQuery, handleOnSetGroup, menuItemHeight, hideDropdown, setSelected, value]);
-  var searchResults = React.useMemo(function () {
-    var result = [];
-    var itemsNumber = items.length;
 
-    for (var i = 0; i < itemsNumber; i += 1) {
-      var _item$name, _item$subtitle;
-
-      var item = items[i];
-      var searchQueryInLowerCase = searchQuery.toLowerCase();
-      var isMatchingName = (_item$name = item.name) == null ? void 0 : _item$name.toLowerCase().includes(searchQueryInLowerCase);
-      var isMatchingSubtitle = (_item$subtitle = item.subtitle) == null ? void 0 : _item$subtitle.toLowerCase().includes(searchQueryInLowerCase);
-      var matching = !searchQuery || isMatchingName || isMatchingSubtitle;
-
-      if (matching) {
-        result.push({
+      if (maxItemsInGroup && groupedItems[key].length > maxItemsInGroup) {
+        var anyItem = groupItems[0];
+        resultItems.push({
           className: classNames,
-          item: item,
-          searchQuery: searchQuery,
-          clearSearch: clearSearch,
-          hideDropdown: hideDropdown,
-          select: setSelected,
-          selected: Boolean(value) && item.id === (value == null ? void 0 : value.id),
-          menuItemHeight: menuItemHeight
+          select: handleOnSetGroup,
+          menuItemHeight: menuItemHeight,
+          label: /*#__PURE__*/React.createElement(S.ShowMoreItem, null, texts.showMore),
+          item: {
+            isGroup: true,
+            id: anyItem.groupId,
+            name: getGroupName(anyItem.groupId, groups) || '',
+            icon: /*#__PURE__*/React.createElement(ArrowRightCircleM, null)
+          }
         });
       }
-    }
+    });
+    return resultItems;
+  }, [activeGroup, classNames, searchQuery, handleOnSetGroup, menuItemHeight, clearSearch, hideDropdown, handleSelect, value, texts.showMore, groups]);
 
-    return result;
-  }, [classNames, clearSearch, hideDropdown, items, menuItemHeight, searchQuery, setSelected, value]);
-  var hasSubgroups = React.useMemo(function () {
+  var _useSearchResults = useSearchResults(items, groups, activeTab, groupByGroupName, activeGroup, searchQuery, maxSearchResultsInGroup),
+      searchResults = _useSearchResults.searchResults;
+
+  var hasSubgroups = useMemo(function () {
     return Boolean(currentTabItems == null ? void 0 : currentTabItems.subGroups);
   }, [currentTabItems]);
-  var activeItems = React.useMemo(function () {
+  var activeItems = useMemo(function () {
     if (!onSearch && searchQuery) {
       return searchResults;
     }
@@ -193,7 +184,7 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
     if (hasSubgroups && !activeGroup) {
       var _currentTabItems$subG;
 
-      var subGroups = currentTabItems != null && currentTabItems.subGroups ? currentTabItems == null || (_currentTabItems$subG = currentTabItems.subGroups) == null ? void 0 : _currentTabItems$subG.map(function (group) {
+      var subGroups = hasSubgroups ? currentTabItems == null || (_currentTabItems$subG = currentTabItems.subGroups) == null ? void 0 : _currentTabItems$subG.map(function (group) {
         return _objectSpread({}, group, {
           isGroup: true
         });
@@ -207,7 +198,7 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
 
         return prev;
       }, []);
-      return groupByGroupName([].concat(subGroups, subItems));
+      return groupByGroupName([].concat(subGroups || [], subItems));
     }
 
     if (activeGroup) {
@@ -223,25 +214,26 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
     }
 
     return groupByGroupName(items);
-  }, [activeGroup, activeTab, currentTabItems, groupByGroupName, groups, hasSubgroups, items, onSearch, searchQuery, searchResults]);
-  React.useEffect(function () {
+  }, [onSearch, searchQuery, hasSubgroups, activeGroup, activeTab, groups, groupByGroupName, items, searchResults, currentTabItems == null ? void 0 : currentTabItems.subGroups, currentTabItems == null ? void 0 : currentTabItems.id]);
+  useEffect(function () {
     var _listRef$current;
 
     // eslint-disable-next-line no-unused-expressions
     (_listRef$current = listRef.current) == null || _listRef$current.resetAfterIndex(0, false);
   }, [activeItems, listRef]);
-  var handleSearch = React.useCallback(function (val) {
+  var handleSearch = useCallback(function (val) {
     setSearchQuery(val);
     onSearch && onSearch(val);
   }, [onSearch]);
-  var getTabs = React.useMemo(function () {
+  var getTabs = useMemo(function () {
     return (groups == null ? void 0 : groups.map(function (group) {
       return {
         label: group.name
       };
     })) || [];
   }, [groups]);
-  var getNoResultContainer = React.useMemo(function () {
+  var hasTabs = getTabs.length > 1;
+  var getNoResultContainer = useMemo(function () {
     return /*#__PURE__*/React.createElement(Result, {
       noSearchResults: true,
       type: "no-results",
@@ -261,22 +253,33 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
   var getItemSize = function getItemSize(index) {
     var item = activeItems[index];
     if (isListTitle(item)) return ITEM_SIZE.title;
-    return menuItemHeight ? ITEM_SIZE[menuItemHeight] : ITEM_SIZE[ItemSize.DEFAULT];
+    return menuItemHeight ? ITEM_SIZE[menuItemHeight] : ITEM_SIZE[itemSizes.DEFAULT];
   };
 
+  var dropdownContentHeight = useMemo(function () {
+    return outerHeight - (hasTabs && !searchQuery ? TABS_HEIGHT : 0) - (activeGroup ? SUBGROUP_HEADER_HEIGHT : 0) - SEARCH_HEIGHT;
+  }, [activeGroup, hasTabs, outerHeight, searchQuery]);
+  useEffect(function () {
+    if (scrollBarRef.current && listRef.current) {
+      scrollBarRef.current.scrollTo({
+        top: 0
+      });
+      listRef.current.resetAfterIndex(0);
+    }
+  }, [searchQuery, activeGroup, activeTab]);
   return /*#__PURE__*/React.createElement(Dropdown.Wrapper, {
     style: _objectSpread({
       width: '300px'
     }, dropdownWrapperStyles),
     ref: overlayRef,
-    onKeyDown: function onKeyDown(e) {
+    onKeyDown: function onKeyDown(event) {
       var _document;
 
       if (((_document = document) == null ? void 0 : _document.activeElement) === (searchInputHandle == null ? void 0 : searchInputHandle.current)) {
         setSearchInputFocus(false);
       }
 
-      searchQuery && focusWithArrowKeys(e, classNames.split(' ')[1], function () {
+      searchQuery && focusWithArrowKeys(event, classNames.split(' ')[1], function () {
         setSearchInputFocus(true);
       });
     }
@@ -297,7 +300,7 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
       component: /*#__PURE__*/React.createElement(SearchM, null),
       color: theme.palette['grey-600']
     })
-  }), searchQuery === '' && getTabs.length > 1 && /*#__PURE__*/React.createElement(S.TabsWrapper, null, /*#__PURE__*/React.createElement(Tabs, {
+  }), hasTabs && /*#__PURE__*/React.createElement(S.TabsWrapper, null, /*#__PURE__*/React.createElement(Tabs, {
     block: true,
     tabs: getTabs,
     activeTab: activeTab,
@@ -306,14 +309,18 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
       setActiveGroup(undefined);
     },
     visible: visible
-  })), activeGroup && !searchQuery && /*#__PURE__*/React.createElement(Dropdown.BackAction, {
+  })), activeGroup && /*#__PURE__*/React.createElement(Dropdown.BackAction, {
     label: activeGroup.name,
     onClick: function onClick() {
       return setActiveGroup(undefined);
     }
-  }), loading ? /*#__PURE__*/React.createElement(DropdownSkeleton, {
-    size: "M"
-  }) : /*#__PURE__*/React.createElement(S.ItemsList, null, activeItems != null && activeItems.length ? /*#__PURE__*/React.createElement(Scrollbar, {
+  }), loading ? /*#__PURE__*/React.createElement(S.Skeleton, {
+    contentHeight: dropdownContentHeight,
+    size: "M",
+    numberOfSkeletons: 3
+  }) : /*#__PURE__*/React.createElement(S.ItemsList, {
+    contentHeight: dropdownContentHeight
+  }, activeItems != null && activeItems.length ? /*#__PURE__*/React.createElement(Scrollbar, {
     absolute: true,
     style: {
       padding: 8
@@ -321,8 +328,9 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
     loading: loading,
     hasMore: hasMoreItems,
     onYReachEnd: onFetchData,
-    onScroll: handleScroll
-  }, /*#__PURE__*/React.createElement(List, {
+    onScroll: handleScroll,
+    ref: scrollBarRef
+  }, /*#__PURE__*/React.createElement(VariableSizeList, {
     className: "ds-context-selector-list",
     key: "list-" + activeGroup + "-" + activeTab,
     width: "100%",

package/dist/ContextSelectorDropdown/ContextSelectorDropdownItem.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { ContextSelectorDropdownItemProps } from '../ContextSelector.types';
-declare const ContextSelectorDropdownItem: ({ item, clearSearch, searchQuery, hideDropdown, select, selected, className, menuItemHeight, style, }: ContextSelectorDropdownItemProps) => React.JSX.Element;
+declare const ContextSelectorDropdownItem: ({ item, clearSearch, searchQuery, hideDropdown, select, selected, className, menuItemHeight, style, label, }: ContextSelectorDropdownItemProps) => React.JSX.Element;
 export default ContextSelectorDropdownItem;

package/dist/ContextSelectorDropdown/ContextSelectorDropdownItem.js

@@ -18,7 +18,8 @@ var ContextSelectorDropdownItem = function ContextSelectorDropdownItem(_ref) {
       selected = _ref.selected,
       className = _ref.className,
       menuItemHeight = _ref.menuItemHeight,
-      style = _ref.style;
+      style = _ref.style,
+      label = _ref.label;
 
   var id = item.id,
       _ = item.icon,
@@ -43,7 +44,7 @@ var ContextSelectorDropdownItem = function ContextSelectorDropdownItem(_ref) {
     },
     size: menuItemHeight,
     description: item.description
-  }, itemProps), item.name);
+  }, itemProps), label || item.name);
 };
 
 export default ContextSelectorDropdownItem;

package/dist/ContextSelectorDropdown/utils.d.ts

@@ -0,0 +1,3 @@
+import type { ContextGroup, ContextItem, DropdownItemProps, ListTitle } from '../ContextSelector.types';
+export declare const isListTitle: (element: DropdownItemProps) => element is ListTitle;
+export declare const isGroup: (item: ContextItem | ContextGroup) => item is ContextGroup;

package/dist/ContextSelectorDropdown/utils.js

@@ -0,0 +1,6 @@
+export var isListTitle = function isListTitle(element) {
+  return element.title !== undefined;
+};
+export var isGroup = function isGroup(item) {
+  return 'isGroup' in item;
+};

package/dist/constants.d.ts

@@ -0,0 +1,12 @@
+export declare const NO_GROUP_NAME = "NO_GROUP_NAME";
+export declare const ITEM_SIZE: {
+    large: number;
+    default: number;
+    title: number;
+};
+export declare const DROPDOWN_HEIGHT = 420;
+export declare const DROPDOWN_HEIGHT_BELOW_THRESHOLD = 350;
+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;

package/dist/constants.js

@@ -0,0 +1,11 @@
+var _ITEM_SIZE;
+
+import { ItemSize } from '@synerise/ds-menu';
+export var NO_GROUP_NAME = 'NO_GROUP_NAME';
+export var ITEM_SIZE = (_ITEM_SIZE = {}, _ITEM_SIZE[ItemSize.LARGE] = 50, _ITEM_SIZE[ItemSize.DEFAULT] = 32, _ITEM_SIZE.title = 32, _ITEM_SIZE);
+export var DROPDOWN_HEIGHT = 420;
+export var DROPDOWN_HEIGHT_BELOW_THRESHOLD = 350;
+export var DROPDOWN_HEIGHT_THRESHOLD = 900;
+export var SEARCH_HEIGHT = 53;
+export var TABS_HEIGHT = 50;
+export var SUBGROUP_HEADER_HEIGHT = 53;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-context-selector",
-  "version": "0.24.7",
+  "version": "0.25.0",
   "description": "ContextSelector UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -27,25 +27,25 @@
     "test:watch": "npm run test -- --watchAll",
     "types": "tsc --noEmit"
   },
-  "gitHead": "6fe94d574f25c5267c7593dec9399527f441b23a",
+  "gitHead": "6f3231e4a9e0720ffee61b748488cecd590da6e6",
   "sideEffects": [
     "dist/style/*",
     "*.less"
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^0.21.8",
-    "@synerise/ds-dropdown": "^0.18.12",
-    "@synerise/ds-factors": "^0.25.0",
-    "@synerise/ds-icon": "^0.65.3",
-    "@synerise/ds-information-card": "^0.5.6",
-    "@synerise/ds-list-item": "^0.4.8",
-    "@synerise/ds-menu": "^0.19.12",
-    "@synerise/ds-result": "^0.7.2",
-    "@synerise/ds-scrollbar": "^0.11.8",
-    "@synerise/ds-skeleton": "^0.6.6",
-    "@synerise/ds-tabs": "^0.15.5",
-    "@synerise/ds-utils": "^0.29.0",
+    "@synerise/ds-button": "^0.21.10",
+    "@synerise/ds-dropdown": "^0.18.14",
+    "@synerise/ds-factors": "^0.25.2",
+    "@synerise/ds-icon": "^0.65.5",
+    "@synerise/ds-information-card": "^0.5.8",
+    "@synerise/ds-list-item": "^0.4.10",
+    "@synerise/ds-menu": "^0.19.14",
+    "@synerise/ds-result": "^0.7.4",
+    "@synerise/ds-scrollbar": "^0.11.10",
+    "@synerise/ds-skeleton": "^0.6.8",
+    "@synerise/ds-tabs": "^0.16.0",
+    "@synerise/ds-utils": "^0.29.2",
     "react-window": "1.8.5",
     "uuid": "^8.3.2"
   },