@synerise/ds-factors 0.25.0 → 0.25.1

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.25.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-factors@0.25.0...@synerise/ds-factors@0.25.1) (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.25.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-factors@0.24.0...@synerise/ds-factors@0.25.0) (2024-09-03)
 
 

package/README.md

@@ -33,6 +33,7 @@ import Factors from '@synerise/ds-factors'
       groups: [{
                   name: 'Recent',
                   id: 1,
+                  allowEmpty: true,
                   defaultGroup: true,
                 },{
                   name: 'All',
@@ -151,10 +152,11 @@ Type of value depends on current factor type and can contain values: `string` \
 
 ### ParameterOptions
 
-| Property              | Description                                                | Type                     | Default |
-|-----------------------|------------------------------------------------------------|--------------------------|---------|
-| buttonIcon            | Icon in button                                             | React.ReactNode          | -       |
-| buttonLabel           | Label of button                                            | string \ React.ReactNode | -       |
-| groups                | Array of parameter groups                                  | ParameterGroup[]         | -       |
-| items                 | Array of parameters                                        | ParameterItem[]          | -       |
-| selectedButtonColored | Whether to use green custom color if parameter is selected | boolean                  | -       |
+| Property                | Description                                                | Type                     | Default |
+|-------------------------|------------------------------------------------------------|--------------------------|---------|
+| buttonIcon              | Icon in button                                             | React.ReactNode          | -       |
+| buttonLabel             | Label of button                                            | string \ React.ReactNode | -       |
+| groups                  | Array of parameter groups                                  | ParameterGroup[]         | -       |
+| items                   | Array of parameters                                        | ParameterItem[]          | -       |
+| selectedButtonColored   | Whether to use green custom color if parameter is selected | boolean                  | -       |
+| maxSearchResultsInGroup | How many search results should be shown per group          | number                   | 4       |

package/dist/FactorValue/DateRange/DateRange.js

@@ -24,7 +24,6 @@ var DateRangeInput = function DateRangeInput(_ref) {
   return /*#__PURE__*/React.createElement(DateRangePicker, {
     intl: intl,
     onApply: changeHandler,
-    onValueChange: changeHandler,
     showTime: true,
     getPopupContainer: getPopupContainerOverride || getPopupContainer,
     showFilter: true,

package/dist/FactorValue/Parameter/Parameter.constants.d.ts

@@ -0,0 +1,14 @@
+import { CSSProperties } from 'react';
+export declare const LIST_STYLE: CSSProperties;
+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 = 800;
+export declare const SEARCH_HEGIHT = 53;
+export declare const TABS_HEIGHT = 50;
+export declare const SUBGROUP_HEADER_HEIGHT = 53;

package/dist/FactorValue/Parameter/Parameter.constants.js

@@ -0,0 +1,15 @@
+var _ITEM_SIZE;
+
+import { itemSizes } from '@synerise/ds-list-item';
+export var LIST_STYLE = {
+  overflowX: 'unset',
+  overflowY: 'unset'
+};
+export var NO_GROUP_NAME = 'NO_GROUP_NAME';
+export var ITEM_SIZE = (_ITEM_SIZE = {}, _ITEM_SIZE[itemSizes.LARGE] = 50, _ITEM_SIZE[itemSizes.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 = 800;
+export var SEARCH_HEGIHT = 53;
+export var TABS_HEIGHT = 50;
+export var SUBGROUP_HEADER_HEIGHT = 53;

package/dist/FactorValue/Parameter/Parameter.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { InputProps } from '../../Factors.types';
-declare const ParameterInput: ({ value, onChange, onParamsClick, parameters, texts, opened, preventAutoloadData, getPopupContainerOverride, onActivate, onDeactivate, readOnly, error, getMenuEntryProps, }: InputProps) => React.JSX.Element;
+declare const ParameterInput: ({ value, onChange, onParamsClick, parameters, texts, opened, preventAutoloadData, getPopupContainerOverride, onActivate, onDeactivate, readOnly, error, loading, getMenuEntryProps, }: InputProps) => React.JSX.Element;
 export default ParameterInput;

package/dist/FactorValue/Parameter/Parameter.js

@@ -1,4 +1,4 @@
-var _excluded = ["buttonIcon", "buttonLabel", "selectedButtonColored", "loading"];
+var _excluded = ["buttonIcon", "buttonLabel", "selectedButtonColored", "dropdownDimensionsConfig"];
 
 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); }
 
@@ -19,6 +19,7 @@ import { getPopupContainer } from '@synerise/ds-utils';
 import InformationCard from '@synerise/ds-information-card';
 import { Value } from './Parameter.style';
 import ParameterDropdown from './ParameterDropdown';
+import { DROPDOWN_HEIGHT, DROPDOWN_HEIGHT_BELOW_THRESHOLD, DROPDOWN_HEIGHT_THRESHOLD } from './Parameter.constants';
 
 var ParameterInput = function ParameterInput(_ref) {
   var value = _ref.value,
@@ -34,19 +35,30 @@ var ParameterInput = function ParameterInput(_ref) {
       _ref$readOnly = _ref.readOnly,
       readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
       error = _ref.error,
+      loading = _ref.loading,
       getMenuEntryProps = _ref.getMenuEntryProps;
 
   // @ts-ignore
   var buttonIcon = parameters.buttonIcon,
       buttonLabel = parameters.buttonLabel,
       selectedButtonColored = parameters.selectedButtonColored,
-      loading = parameters.loading,
+      dropdownDimensionsConfig = parameters.dropdownDimensionsConfig,
       restParameters = _objectWithoutPropertiesLoose(parameters, _excluded);
 
+  var dimensionsConfig = _objectSpread({
+    defaultHeight: DROPDOWN_HEIGHT,
+    lowerHeight: DROPDOWN_HEIGHT_BELOW_THRESHOLD,
+    threshold: DROPDOWN_HEIGHT_THRESHOLD
+  }, dropdownDimensionsConfig);
+
   var _useState = useState(false),
       dropdownVisible = _useState[0],
       setDropdownVisible = _useState[1];
 
+  var _useState2 = useState(dimensionsConfig.defaultHeight),
+      outerHeight = _useState2[0],
+      setOuterHeight = _useState2[1];
+
   var parameter = useMemo(function () {
     return value;
   }, [value]);
@@ -135,6 +147,17 @@ var ParameterInput = function ParameterInput(_ref) {
       } : undefined
     }, getMenuEntryProps == null ? void 0 : getMenuEntryProps(parameter))]
   });
+  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]);
   return readOnly ? trigger : /*#__PURE__*/React.createElement("div", {
     "data-popup-container": true,
     "data-testid": "ds-factors-parameter"
@@ -147,7 +170,9 @@ var ParameterInput = function ParameterInput(_ref) {
       setSelected: handleChange
     }, restParameters, {
       texts: texts,
-      loading: loading
+      loading: loading,
+      outerHeight: outerHeight,
+      value: isSelected ? parameter : undefined
     }))
   }, trigger));
 };

package/dist/FactorValue/Parameter/Parameter.style.d.ts

@@ -1,8 +1,16 @@
-import { FixedSizeList } from 'react-window';
+/// <reference types="react" />
+import { VariableSizeList } from 'react-window';
 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 Value: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const StyledList: import("styled-components").StyledComponent<typeof FixedSizeList, any, {}, never>;
+export declare const StyledList: import("styled-components").StyledComponent<typeof VariableSizeList, 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>;
+export declare const Title: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ShowMoreItem: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/FactorValue/Parameter/Parameter.style.js

@@ -1,5 +1,6 @@
 import styled from 'styled-components';
-import { FixedSizeList } from 'react-window';
+import DropdownSkeleton from '@synerise/ds-skeleton';
+import { VariableSizeList } from 'react-window';
 export var TabsWrapper = styled.div.withConfig({
   displayName: "Parameterstyle__TabsWrapper",
   componentId: "u2uvgh-0"
@@ -11,7 +12,9 @@ export var ContentPlaceholder = styled.div.withConfig({
 export var ItemsList = styled.div.withConfig({
   displayName: "Parameterstyle__ItemsList",
   componentId: "u2uvgh-2"
-})(["width:100%;"]);
+})(["width:100%;", ""], function (props) {
+  return props.contentHeight !== undefined && "height: " + props.contentHeight + "px;";
+});
 export var SearchResult = styled.span.withConfig({
   displayName: "Parameterstyle__SearchResult",
   componentId: "u2uvgh-3"
@@ -28,7 +31,23 @@ export var Value = styled.span.withConfig({
   displayName: "Parameterstyle__Value",
   componentId: "u2uvgh-5"
 })(["max-width:110px;text-overflow:ellipsis;overflow:hidden;"]);
-export var StyledList = styled(FixedSizeList).withConfig({
+export var StyledList = styled(VariableSizeList).withConfig({
   displayName: "Parameterstyle__StyledList",
   componentId: "u2uvgh-6"
-})(["overflowx:unset;overflowy:unset;height:auto !important;max-height:300px;"]);
+})(["overflowx:unset;overflowy:unset;height:auto !important;max-height:300px;"]);
+export var Skeleton = styled(DropdownSkeleton).withConfig({
+  displayName: "Parameterstyle__Skeleton",
+  componentId: "u2uvgh-7"
+})(["", ""], function (props) {
+  return props.contentHeight !== undefined && "height: " + props.contentHeight + "px;";
+});
+export var Title = styled.div.withConfig({
+  displayName: "Parameterstyle__Title",
+  componentId: "u2uvgh-8"
+})(["font-size:10px;line-height:1.6;font-weight:500;text-transform:uppercase;color:", ";padding:8px 12px;"], function (props) {
+  return props.theme.palette['grey-500'];
+});
+export var ShowMoreItem = styled.div.withConfig({
+  displayName: "Parameterstyle__ShowMoreItem",
+  componentId: "u2uvgh-9"
+})(["font-weight:500;"]);

package/dist/FactorValue/Parameter/Parameter.types.d.ts

@@ -0,0 +1,18 @@
+import { CSSProperties, ReactNode } from 'react';
+import type { ParameterItem, ParameterGroup } from '../../Factors.types';
+export type DropdownItem<ItemType extends ParameterItem | ParameterGroup> = {
+    item: ItemType;
+    searchQuery: string;
+    clearSearch?: () => void;
+    hideDropdown?: () => void;
+    select: (item: ItemType) => void;
+    className: string;
+    style?: CSSProperties;
+    label?: ReactNode;
+};
+export type DropdownItemProps<ItemType extends ParameterItem | ParameterGroup> = ParameterDropdownTitleProps | DropdownItem<ItemType>;
+export type ParameterDropdownTitleProps = {
+    title?: string;
+    type?: string;
+};
+export type MixedDropdownItemProps = DropdownItemProps<ParameterItem> | DropdownItemProps<ParameterGroup>;

package/dist/FactorValue/Parameter/Parameter.types.js

@@ -0,0 +1 @@
+export {};

package/dist/FactorValue/Parameter/ParameterDropdown.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { ParameterDropdownProps } from '../../Factors.types';
-declare const ParameterDropdown: ({ setSelected, texts, groups, items, setDropdownVisible, loading, onFetchData, hasMoreItems, }: ParameterDropdownProps) => React.JSX.Element;
+declare const ParameterDropdown: ({ setSelected, texts, groups, items, setDropdownVisible, loading, onFetchData, hasMoreItems, outerHeight, value, renderEmptyGroups, maxSearchResultsInGroup, }: ParameterDropdownProps) => React.JSX.Element;
 export default ParameterDropdown;

package/dist/FactorValue/Parameter/ParameterDropdown.js

@@ -1,20 +1,22 @@
 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); }
 
-import React, { createRef, useRef, useState, useMemo, useCallback } from 'react';
+import React, { useRef, useState, useMemo, useCallback, useEffect } from 'react';
+import { v4 as uuid } from 'uuid';
 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, useOnClickOutside, getClosest } from '@synerise/ds-utils';
+import { useSearchResults, getGroupName, focusWithArrowKeys, useOnClickOutside, getClosest } from '@synerise/ds-utils';
 import Result from '@synerise/ds-result';
 import { theme } from '@synerise/ds-core';
 import Scrollbar from '@synerise/ds-scrollbar';
-import { v4 as uuid } from 'uuid';
-import DropdownSkeleton from '@synerise/ds-skeleton';
+import { itemSizes } from '@synerise/ds-list-item';
 import * as S from './Parameter.style';
 import ParameterDropdownItem from './ParameterDropdownItem';
-var LIST_STYLE = {
-  overflowX: 'unset',
-  overflowY: 'unset'
+import { useGroups } from './useGroups';
+import { DROPDOWN_HEIGHT, SEARCH_HEGIHT, TABS_HEIGHT, SUBGROUP_HEADER_HEIGHT, ITEM_SIZE, LIST_STYLE, NO_GROUP_NAME } from './Parameter.constants';
+
+var isListTitle = function isListTitle(element) {
+  return element.title !== undefined;
 };
 
 var ParameterDropdown = function ParameterDropdown(_ref) {
@@ -25,15 +27,22 @@ var ParameterDropdown = function ParameterDropdown(_ref) {
       setDropdownVisible = _ref.setDropdownVisible,
       loading = _ref.loading,
       onFetchData = _ref.onFetchData,
-      hasMoreItems = _ref.hasMoreItems;
-  var listRef = createRef();
-  var defaultTab = useMemo(function () {
-    var defaultIndex = groups == null ? void 0 : groups.findIndex(function (group) {
-      return group.defaultGroup;
-    });
-    return defaultIndex || 0;
-  }, [groups]);
+      hasMoreItems = _ref.hasMoreItems,
+      _ref$outerHeight = _ref.outerHeight,
+      outerHeight = _ref$outerHeight === void 0 ? DROPDOWN_HEIGHT : _ref$outerHeight,
+      value = _ref.value,
+      _ref$renderEmptyGroup = _ref.renderEmptyGroups,
+      renderEmptyGroups = _ref$renderEmptyGroup === void 0 ? false : _ref$renderEmptyGroup,
+      _ref$maxSearchResults = _ref.maxSearchResultsInGroup,
+      maxSearchResultsInGroup = _ref$maxSearchResults === void 0 ? 4 : _ref$maxSearchResults;
+  var listRef = useRef(null);
   var overlayRef = useRef(null);
+  var scrollBarRef = useRef(null);
+
+  var _useGroups = useGroups(items, groups, renderEmptyGroups),
+      visibleGroups = _useGroups.visibleGroups,
+      tabs = _useGroups.tabs,
+      defaultTab = _useGroups.defaultTab;
 
   var _useState = useState(''),
       searchQuery = _useState[0],
@@ -60,33 +69,85 @@ var ParameterDropdown = function ParameterDropdown(_ref) {
     }
   });
   var currentTabItems = useMemo(function () {
-    return groups == null ? void 0 : groups.find(function (group, index) {
+    return visibleGroups == null ? void 0 : visibleGroups.find(function (_group, index) {
       return activeTab === index;
     });
-  }, [groups, activeTab]);
-  var handleClearSearch = useCallback(function () {
+  }, [visibleGroups, activeTab]);
+  var clearSearch = useCallback(function () {
     setSearchQuery('');
   }, []);
-  var handleHideDropdown = useCallback(function () {
+  var handleOnSetGroup = useCallback(function (item) {
+    setActiveGroup(item);
+  }, []);
+  var hideDropdown = useCallback(function () {
     setDropdownVisible(false);
   }, [setDropdownVisible]);
-  var filteredItems = useMemo(function () {
-    return items == null ? void 0 : items.filter(function (item) {
-      return item.name.toLowerCase().includes(searchQuery.toLowerCase());
-    }).map(function (item) {
-      return {
-        className: classNames,
-        item: item,
-        searchQuery: searchQuery,
-        clearSearch: handleClearSearch,
-        hideDropdown: handleHideDropdown,
-        select: setSelected
-      };
+  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 = dropdownItems[i]; // @ts-ignore
+
+      var groupName = _item.groupName || NO_GROUP_NAME;
+      var group = groupedItems[groupName] || [];
+      group.push(_item);
+      groupedItems[groupName] = group;
+    }
+
+    var resultItems = [];
+    Object.keys(groupedItems).forEach(function (key) {
+      if (key !== NO_GROUP_NAME && !activeGroup) {
+        resultItems.push({
+          type: 'title',
+          title: key
+        });
+      }
+
+      var groupItems = maxItemsInGroup ? groupedItems[key].slice(0, maxItemsInGroup) : groupedItems[key];
+      groupItems.forEach(function (item) {
+        var resultItem = !item.groupId ? {
+          className: classNames,
+          item: item,
+          searchQuery: searchQuery,
+          select: handleOnSetGroup
+        } : {
+          className: classNames,
+          item: item,
+          searchQuery: searchQuery,
+          clearSearch: clearSearch,
+          hideDropdown: hideDropdown,
+          select: setSelected,
+          selected: value && item.id === (value == null ? void 0 : value.id)
+        };
+        resultItems.push(resultItem);
+      });
+
+      if (maxItemsInGroup && groupedItems[key].length > maxItemsInGroup) {
+        var anyItem = groupItems[0];
+        resultItems.push({
+          className: classNames,
+          select: handleOnSetGroup,
+          searchQuery: searchQuery,
+          label: /*#__PURE__*/React.createElement(S.ShowMoreItem, null, texts.parameter.showMore),
+          item: {
+            isGroup: true,
+            id: anyItem.groupId,
+            name: getGroupName(anyItem.groupId, groups || []) || '',
+            icon: /*#__PURE__*/React.createElement(ArrowRightCircleM, null)
+          }
+        });
+      }
     });
-  }, [items, searchQuery, classNames, handleClearSearch, handleHideDropdown, setSelected]);
+    return resultItems;
+  }, [activeGroup, classNames, searchQuery, handleOnSetGroup, clearSearch, hideDropdown, setSelected, value, texts.parameter.showMore, groups]);
+
+  var _useSearchResults = useSearchResults(items || [], groups || [], activeTab, groupByGroupName, activeGroup, searchQuery, maxSearchResultsInGroup),
+      searchResults = _useSearchResults.searchResults;
+
   var currentItems = useMemo(function () {
     if (searchQuery) {
-      return filteredItems;
+      return searchResults;
     }
 
     var hasSubgroups = Boolean(currentTabItems == null ? void 0 : currentTabItems.subGroups);
@@ -112,21 +173,21 @@ var ParameterDropdown = function ParameterDropdown(_ref) {
           className: classNames,
           item: item,
           searchQuery: searchQuery,
-          hideDropdown: handleHideDropdown,
+          hideDropdown: hideDropdown,
           select: setSelected
         };
       });
     }
 
-    if (activeTab && groups && groups[activeTab]) {
+    if (activeTab && visibleGroups && visibleGroups[activeTab]) {
       return items == null ? void 0 : items.filter(function (item) {
-        return item.groupId === groups[activeTab].id;
+        return item.groupId === visibleGroups[activeTab].id;
       }).map(function (item) {
         return {
           className: classNames,
           item: item,
           searchQuery: searchQuery,
-          hideDropdown: handleHideDropdown,
+          hideDropdown: hideDropdown,
           select: setSelected
         };
       });
@@ -137,22 +198,14 @@ var ParameterDropdown = function ParameterDropdown(_ref) {
         className: classNames,
         item: item,
         searchQuery: searchQuery,
-        hideDropdown: handleHideDropdown,
+        hideDropdown: hideDropdown,
         select: setSelected
       };
     });
-  }, [searchQuery, currentTabItems, activeGroup, groups, items, filteredItems, classNames, handleHideDropdown, setSelected, activeTab]);
-  var handleSearch = useCallback(function (value) {
-    setSearchQuery(value);
+  }, [searchQuery, currentTabItems, activeGroup, visibleGroups, items, searchResults, classNames, hideDropdown, setSelected, activeTab]);
+  var handleSearch = useCallback(function (newSearchQuery) {
+    setSearchQuery(newSearchQuery);
   }, [setSearchQuery]);
-  var getTabs = useMemo(function () {
-    return (groups == null ? void 0 : groups.map(function (group) {
-      return {
-        label: group.name,
-        icon: group.icon
-      };
-    })) || [];
-  }, [groups]);
   var getNoResultContainer = useMemo(function () {
     return /*#__PURE__*/React.createElement(Result, {
       noSearchResults: true,
@@ -165,21 +218,42 @@ var ParameterDropdown = function ParameterDropdown(_ref) {
     var currentTarget = _ref2.currentTarget;
     var scrollTop = currentTarget.scrollTop;
 
-    if (listRef.current !== null) {
+    if (listRef.current) {
       listRef.current.scrollTo(scrollTop);
     }
   };
 
+  useEffect(function () {
+    if (scrollBarRef.current && listRef.current) {
+      scrollBarRef.current.scrollTo({
+        top: 0
+      });
+      listRef.current.resetAfterIndex(0);
+    }
+  }, [searchQuery, activeGroup, activeTab]);
+
+  var getItemSize = function getItemSize(index) {
+    var item = currentItems && currentItems[index];
+    if (isListTitle(item)) return ITEM_SIZE.title;
+    return ITEM_SIZE[itemSizes.DEFAULT];
+  };
+
+  var hasTabs = tabs.length > 1;
+  var hasSearch = Boolean(searchQuery);
+  var dropdownContentHeight = useMemo(function () {
+    var fixedContentHeight = SEARCH_HEGIHT + (!hasSearch && hasTabs ? TABS_HEIGHT : 0) + (activeGroup ? SUBGROUP_HEADER_HEIGHT : 0);
+    return outerHeight - fixedContentHeight;
+  }, [activeGroup, hasSearch, hasTabs, outerHeight]);
   return /*#__PURE__*/React.createElement(Dropdown.Wrapper, {
     "data-testid": "ds-factors-parameter-dropdown-wrapper",
     style: {
       width: '300px'
     },
     ref: overlayRef,
-    onKeyDown: function onKeyDown(e) {
+    onKeyDown: function onKeyDown(event) {
       setSearchInputFocus(false); // eslint-disable-next-line @typescript-eslint/no-empty-function
 
-      searchQuery && focusWithArrowKeys(e, classNames.split(' ')[1], function () {
+      searchQuery && focusWithArrowKeys(event, classNames.split(' ')[1], function () {
         setSearchInputFocus(true);
       });
     }
@@ -196,9 +270,9 @@ var ParameterDropdown = function ParameterDropdown(_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, {
+  }), tabs.length > 1 && /*#__PURE__*/React.createElement(S.TabsWrapper, null, /*#__PURE__*/React.createElement(Tabs, {
     block: true,
-    tabs: getTabs,
+    tabs: tabs,
     activeTab: activeTab,
     handleTabClick: function handleTabClick(index) {
       setActiveTab(index);
@@ -209,9 +283,13 @@ var ParameterDropdown = function ParameterDropdown(_ref) {
     onClick: function onClick() {
       return setActiveGroup(undefined);
     }
-  }), loading ? /*#__PURE__*/React.createElement(DropdownSkeleton, {
-    size: "M"
-  }) : /*#__PURE__*/React.createElement(S.ItemsList, null, currentItems != null && currentItems.length ? /*#__PURE__*/React.createElement(Scrollbar, {
+  }), loading ? /*#__PURE__*/React.createElement(S.Skeleton, {
+    contentHeight: dropdownContentHeight,
+    size: "M",
+    numberOfSkeletons: 3
+  }) : /*#__PURE__*/React.createElement(S.ItemsList, {
+    contentHeight: dropdownContentHeight
+  }, currentItems != null && currentItems.length ? /*#__PURE__*/React.createElement(Scrollbar, {
     absolute: true,
     style: {
       padding: 8
@@ -219,20 +297,30 @@ var ParameterDropdown = function ParameterDropdown(_ref) {
     loading: loading,
     hasMore: hasMoreItems,
     onYReachEnd: onFetchData,
-    onScroll: handleScroll
+    onScroll: handleScroll,
+    maxHeight: dropdownContentHeight,
+    ref: scrollBarRef
   }, /*#__PURE__*/React.createElement(S.StyledList, {
     width: "100%",
     height: 300,
     itemCount: currentItems.length,
-    itemSize: 32,
+    itemSize: getItemSize,
     style: LIST_STYLE,
     ref: listRef
   }, function (_ref3) {
     var index = _ref3.index,
         style = _ref3.style;
+    var listItem = currentItems[index];
+
+    if (isListTitle(listItem)) {
+      return /*#__PURE__*/React.createElement(S.Title, {
+        style: style
+      }, listItem.title);
+    }
+
     return /*#__PURE__*/React.createElement(ParameterDropdownItem, _extends({
       style: style
-    }, currentItems[index]));
+    }, listItem));
   })) : getNoResultContainer));
 };
 

package/dist/FactorValue/Parameter/ParameterDropdownItem.d.ts

@@ -1,13 +1,5 @@
-import React, { CSSProperties } from 'react';
+import React from 'react';
 import { ParameterGroup, ParameterItem } from '../../Factors.types';
-export type DropdownItem = {
-    item: ParameterItem | ParameterGroup;
-    searchQuery: string;
-    clearSearch?: () => void;
-    hideDropdown?: () => void;
-    select: (item: ParameterItem | ParameterGroup) => void;
-    className: string;
-    style?: CSSProperties;
-};
-declare const ParameterDropdownItem: ({ item, clearSearch, searchQuery, hideDropdown, select, className, style, }: DropdownItem) => React.JSX.Element;
+import { DropdownItem } from './Parameter.types';
+declare const ParameterDropdownItem: <ItemType extends ParameterGroup | ParameterItem>({ item, clearSearch, searchQuery, hideDropdown, select, className, style, label, }: DropdownItem<ItemType>) => React.JSX.Element;
 export default ParameterDropdownItem;

package/dist/FactorValue/Parameter/ParameterDropdownItem.js

@@ -15,7 +15,8 @@ var ParameterDropdownItem = function ParameterDropdownItem(_ref) {
       hideDropdown = _ref.hideDropdown,
       select = _ref.select,
       className = _ref.className,
-      style = _ref.style;
+      style = _ref.style,
+      label = _ref.label;
 
   var id = item.id,
       icon = item.icon,
@@ -34,7 +35,7 @@ var ParameterDropdownItem = function ParameterDropdownItem(_ref) {
       hideDropdown && hideDropdown();
       select && select(item);
     }
-  }), item.name);
+  }), label || item.name);
 };
 
 export default ParameterDropdownItem;

package/dist/FactorValue/Parameter/useGroups.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { ParameterItem, ParameterGroup } from '../../Factors.types';
+export declare const useGroups: (items?: ParameterItem[], groups?: ParameterGroup[], renderEmptyGroups?: boolean) => {
+    visibleGroups: ParameterGroup[] | undefined;
+    tabs: {
+        label: string;
+        icon: import("react").ReactNode;
+    }[];
+    defaultTab: number;
+};

package/dist/FactorValue/Parameter/useGroups.js

@@ -0,0 +1,76 @@
+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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+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 { useMemo } from 'react';
+
+var itemIsParameterGroup = function itemIsParameterGroup(item) {
+  return Boolean(item);
+};
+
+export var useGroups = function useGroups(items, groups, renderEmptyGroups) {
+  var defaultTab = useMemo(function () {
+    var defaultIndex = groups == null ? void 0 : groups.findIndex(function (group) {
+      return group.defaultGroup;
+    });
+    return defaultIndex || 0;
+  }, [groups]);
+  var visibleGroups = useMemo(function () {
+    if (renderEmptyGroups) {
+      return groups;
+    }
+
+    var groupIds = groups == null ? void 0 : groups.map(function (group) {
+      return group.subGroups || group;
+    }).flat().filter(function (group, index) {
+      return !(group.allowEmpty || index === 0);
+    }).map(function (group) {
+      return group.id;
+    });
+    var groupsToSkip = groupIds == null ? void 0 : groupIds.filter(function (groupId) {
+      return !(items != null && items.find(function (item) {
+        return item.groupId === groupId;
+      }));
+    });
+    var cleanGroups = groups == null ? void 0 : groups.map(function (group) {
+      if (group.subGroups && group.subGroups.length) {
+        var filteredSubGroups = group.subGroups.filter(function (subGroup) {
+          return !(groupsToSkip != null && groupsToSkip.includes(subGroup.id));
+        });
+
+        switch (filteredSubGroups.length) {
+          case 0:
+            return undefined;
+
+          case 1:
+            return _objectSpread({}, filteredSubGroups[0], {
+              icon: undefined
+            });
+
+          default:
+            return _objectSpread({}, group, {
+              subGroups: filteredSubGroups
+            });
+        }
+      }
+
+      return groupsToSkip != null && groupsToSkip.includes(group.id) ? undefined : group;
+    }).filter(itemIsParameterGroup);
+    return cleanGroups;
+  }, [groups, items, renderEmptyGroups]);
+  var tabs = useMemo(function () {
+    return (visibleGroups == null ? void 0 : visibleGroups.map(function (group) {
+      return {
+        label: group.name,
+        icon: group.icon
+      };
+    })) || [];
+  }, [visibleGroups]);
+  return {
+    visibleGroups: visibleGroups,
+    tabs: tabs,
+    defaultTab: defaultTab
+  };
+};

package/dist/Factors.d.ts

@@ -14,12 +14,12 @@ export declare const factorTypes: {
     parameter: {
         icon: React.JSX.Element;
         name: string;
-        input: ({ value, onChange, onParamsClick, parameters, texts, opened, preventAutoloadData, getPopupContainerOverride, onActivate, onDeactivate, readOnly, error, getMenuEntryProps, }: import("./Factors.types").InputProps) => React.JSX.Element;
+        input: ({ value, onChange, onParamsClick, parameters, texts, opened, preventAutoloadData, getPopupContainerOverride, onActivate, onDeactivate, readOnly, error, loading, getMenuEntryProps, }: import("./Factors.types").InputProps) => React.JSX.Element;
     };
     contextParameter: {
         icon: React.JSX.Element;
         name: string;
-        input: ({ value, onChange, onParamsClick, parameters, texts, opened, preventAutoloadData, getPopupContainerOverride, onActivate, onDeactivate, readOnly, error, getMenuEntryProps, }: import("./Factors.types").InputProps) => React.JSX.Element;
+        input: ({ value, onChange, onParamsClick, parameters, texts, opened, preventAutoloadData, getPopupContainerOverride, onActivate, onDeactivate, readOnly, error, loading, getMenuEntryProps, }: import("./Factors.types").InputProps) => React.JSX.Element;
     };
     dynamicKey: {
         icon: React.JSX.Element;

package/dist/Factors.js

@@ -371,6 +371,10 @@ var Factors = function Factors(_ref) {
         loadingParameter: formatMessage({
           id: 'DS.FACTORS.PARAMETER.LOADING_PARAMETERS',
           defaultMessage: 'Loading parameters'
+        }),
+        showMore: formatMessage({
+          id: 'DS.FACTORS.PARAMETER.SHOW_MORE',
+          defaultMessage: 'Show more'
         })
       },
       valuePlaceholder: formatMessage({

package/dist/Factors.types.d.ts

@@ -30,6 +30,7 @@ export type ParameterGroup = {
     name: string;
     defaultGroup?: boolean;
     icon?: ReactNode;
+    allowEmpty?: boolean;
     subGroups?: ParameterGroup[];
 };
 export type ParameterItem = {
@@ -65,6 +66,7 @@ export type FactorsTexts = {
         searchPlaceholder: string;
         noResults: string;
         loadingParameter: string;
+        showMore: string;
     };
     valuePlaceholder: string;
     modalApply: string;
@@ -100,7 +102,13 @@ export type FactorsProps = {
         selectedButtonColored?: boolean;
         groups?: ParameterGroup[];
         items: ParameterItem[];
+        renderEmptyGroups?: boolean;
         showAllGroup?: boolean;
+        dropdownDimensionsConfig?: {
+            defaultHeight?: number;
+            lowerHeight?: number;
+            threshold?: number;
+        };
     };
     onParamsClick?: () => void;
     formulaEditor?: ReactNode;
@@ -145,10 +153,14 @@ export type ParameterDropdownProps = {
     setSelected: (val: ParameterItem) => void;
     groups?: ParameterGroup[];
     items?: ParameterItem[];
+    value?: ParameterValueType;
     texts: FactorsTexts;
     loading?: boolean;
     onFetchData?: () => void;
     hasMoreItems?: boolean;
+    outerHeight?: number;
+    renderEmptyGroups?: boolean;
+    maxSearchResultsInGroup?: number;
 };
 export type FormulaModalProps = {
     value: FormulaValueType;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-factors",
-  "version": "0.25.0",
+  "version": "0.25.1",
   "description": "Factors UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -33,26 +33,26 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-autocomplete": "^0.8.16",
-    "@synerise/ds-badge": "^0.8.7",
-    "@synerise/ds-button": "^0.21.8",
-    "@synerise/ds-date-picker": "^0.11.14",
-    "@synerise/ds-date-range-picker": "^0.29.9",
-    "@synerise/ds-dropdown": "^0.18.12",
-    "@synerise/ds-icon": "^0.65.3",
-    "@synerise/ds-information-card": "^0.5.6",
-    "@synerise/ds-inline-edit": "^0.8.8",
-    "@synerise/ds-input": "^0.24.2",
-    "@synerise/ds-input-number": "^0.10.3",
-    "@synerise/ds-list-item": "^0.4.8",
-    "@synerise/ds-menu": "^0.19.12",
-    "@synerise/ds-modal": "^0.17.39",
-    "@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-tooltip": "^0.14.38",
-    "@synerise/ds-utils": "^0.29.0",
+    "@synerise/ds-autocomplete": "^0.8.17",
+    "@synerise/ds-badge": "^0.8.8",
+    "@synerise/ds-button": "^0.21.9",
+    "@synerise/ds-date-picker": "^0.11.15",
+    "@synerise/ds-date-range-picker": "^0.29.10",
+    "@synerise/ds-dropdown": "^0.18.13",
+    "@synerise/ds-icon": "^0.65.4",
+    "@synerise/ds-information-card": "^0.5.7",
+    "@synerise/ds-inline-edit": "^0.8.9",
+    "@synerise/ds-input": "^0.24.3",
+    "@synerise/ds-input-number": "^0.10.4",
+    "@synerise/ds-list-item": "^0.4.9",
+    "@synerise/ds-menu": "^0.19.13",
+    "@synerise/ds-modal": "^0.17.40",
+    "@synerise/ds-result": "^0.7.3",
+    "@synerise/ds-scrollbar": "^0.11.9",
+    "@synerise/ds-skeleton": "^0.6.7",
+    "@synerise/ds-tabs": "^0.15.6",
+    "@synerise/ds-tooltip": "^0.14.39",
+    "@synerise/ds-utils": "^0.29.1",
     "lodash": "^4.17.19",
     "react-intl": "3.12.0",
     "react-window": "1.8.5",
@@ -64,5 +64,5 @@
     "react": ">=16.9.0 <= 17.0.2",
     "styled-components": "5.0.1"
   },
-  "gitHead": "6fe94d574f25c5267c7593dec9399527f441b23a"
+  "gitHead": "fcf3fa64e906cf9fefb37a61ee28218c8eed9b73"
 }