@synerise/ds-context-selector 0.6.1 → 0.7.0

package/CHANGELOG.md

@@ -3,6 +3,52 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.7.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-context-selector@0.6.4...@synerise/ds-context-selector@0.7.0) (2021-10-19)
+
+
+### Bug Fixes
+
+* **condition:** performance improvements ([c3f54cf](https://github.com/Synerise/synerise-design/commit/c3f54cffcf2cfcb58da8686b88800fffed5e26ce))
+
+
+### Features
+
+* **context-selector:** adds infinitescroll and virtualization ([dc8592e](https://github.com/Synerise/synerise-design/commit/dc8592e42c161502c44527cbb4a80a25670e95a9))
+* **context-selector:** adds new types, updates readme ([375df69](https://github.com/Synerise/synerise-design/commit/375df69b583948d362fed0f0917870fd9c96f156))
+* **context-selector:** adds virtualization ([7f00e48](https://github.com/Synerise/synerise-design/commit/7f00e48fba72f2f5e5557e92a821b6ea1f23f495))
+* **context-selector:** adds virtualization ([9dba88c](https://github.com/Synerise/synerise-design/commit/9dba88c9598a7a22977a06dba1813f687f714161))
+* **context-selector:** optimization improvements ([28feae6](https://github.com/Synerise/synerise-design/commit/28feae6ebc0e07c37c6c83f5197e80ea7c59347f))
+* **context-selector:** performance improvements ([a1c1fb8](https://github.com/Synerise/synerise-design/commit/a1c1fb834e2c5464cbfd2852da77f9ace3667908))
+* **context-selector:** update styles ([5bdc277](https://github.com/Synerise/synerise-design/commit/5bdc277644da1f6eae9fe1d4aa9da7379bed389f))
+
+
+
+
+
+## [0.6.4](https://github.com/Synerise/synerise-design/compare/@synerise/ds-context-selector@0.6.3...@synerise/ds-context-selector@0.6.4) (2021-09-21)
+
+**Note:** Version bump only for package @synerise/ds-context-selector
+
+
+
+
+
+## [0.6.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-context-selector@0.6.2...@synerise/ds-context-selector@0.6.3) (2021-09-15)
+
+**Note:** Version bump only for package @synerise/ds-context-selector
+
+
+
+
+
+## [0.6.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-context-selector@0.6.1...@synerise/ds-context-selector@0.6.2) (2021-09-09)
+
+**Note:** Version bump only for package @synerise/ds-context-selector
+
+
+
+
+
 ## [0.6.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-context-selector@0.6.0...@synerise/ds-context-selector@0.6.1) (2021-09-09)
 
 **Note:** Version bump only for package @synerise/ds-context-selector

package/README.md

@@ -84,21 +84,25 @@ import ContextSelector from '@synerise/ds-context-selector'
 
 ## API
 
-| Property               | Description                                                | Type                                                   | Default   |
-| ---                    | ---                                                        | ---                                                    | ---       |
-| groups                 | Groups of items                                            | ContextGroup[]                                         | []        |
-| items                  | Array of items                                             | ContextItem[]                                          | []        |
-| onSelectItem           | Callback called when user selects item                     | (item: ContextItem \ ContextGroup \ undefined) => void | -         |
-| opened                 | Whether if dropdown should opens from outside of component | boolean                                                | false     |
-| texts                  | Translations object                                        | ContextSelectorTexts                                   | -         |
-| selectedItem           | Selected item                                              | ContextItem \ undefined                                | undefined |
-| addMode                | If true trigger doesn't change style when value is set     | ContextItem \ undefined                                | undefined |
-| customTriggerComponent | Add custom trigger                                         | React.ReactNode                                        | undefined |
-| trigger                | Add custom trigger to modal                                | 'click' \ 'hover' \ 'contextMenu'                      | 'click    |
-| menuItemHeight         | Set component Menu.Item height                             | 'large' \ 'default'                                    | -         |
-| dropdownWrapperStyles  | Apply custom styles to dropdown wrapper                    | CSSProperties \ undefined                              | -         |
-| onClickOutsideEvents   | Overwrite default events for document listener             | HandledEventsType[] \ undefined                        | -         |
-| onClickOutside         | Callback called when user click outside dropdown           | () => void \ undefined                                 | -         |
+| Property               | Description                                                   | Type                                                   | Default   | 
+| ---                    | ---                                                           | ---                                                    | ---       | 
+| groups                 | Groups of items                                               | ContextGroup[]                                         | []        | 
+| items                  | Array of items                                                | ContextItem[]                                          | []        | 
+| onSelectItem           | Callback called when user selects item                        | (item: ContextItem \ ContextGroup \ undefined) => void | -         | 
+| opened                 | Whether if dropdown should opens from outside of component    | boolean                                                | false     | 
+| texts                  | Translations object                                           | ContextSelectorTexts                                   | -         | 
+| selectedItem           | Selected item                                                 | ContextItem \ undefined                                | undefined | 
+| addMode                | If true trigger doesn't change style when value is set        | ContextItem \ undefined                                | undefined | 
+| customTriggerComponent | Add custom trigger                                            | React.ReactNode                                        | undefined | 
+| trigger                | Add custom trigger to modal                                   | 'click' \ 'hover' \ 'contextMenu'                      | 'click    | 
+| menuItemHeight         | Set component Menu.Item height                                | 'large' \ 'default'                                    | -         | 
+| dropdownWrapperStyles  | Apply custom styles to dropdown wrapper                       | CSSProperties \ undefined                              | -         | 
+| onClickOutsideEvents   | Overwrite default events for document listener                | HandledEventsType[] \ undefined                        | -         | 
+| onClickOutside         | Callback called when user click outside dropdown              | () => void \ undefined                                 | -         | 
+| onSearch               | Callback called when user enter any char in search input      | (query: string) => void                                | -         |
+| onFetchData            | Callback called when user scrolls to the end of dropdown list | () => void                                             | -         | 
+| hasMoreItems           | Whether if onFetchData should be called                       | boolean                                                | -         | 
+
 
 ### ContextGroup
 

package/dist/ContextSelector.js

@@ -16,6 +16,7 @@ import Icon from '@synerise/ds-icon';
 import { AngleDownS, Add3M } from '@synerise/ds-icon/dist/icons';
 import Dropdown from '@synerise/ds-dropdown';
 import Tooltip from '@synerise/ds-tooltip';
+import { getPopupContainer } from '@synerise/ds-utils';
 import ContextSelectorDropdown from './ContextSelectorDropdown/ContextSelectorDropdown';
 import { ItemWrapper } from './ContextSelector.styles';
 
@@ -34,7 +35,12 @@ var ContextSelector = function ContextSelector(_ref) {
       menuItemHeight = _ref.menuItemHeight,
       dropdownWrapperStyles = _ref.dropdownWrapperStyles,
       onClickOutsideEvents = _ref.onClickOutsideEvents,
-      onClickOutside = _ref.onClickOutside;
+      onClickOutside = _ref.onClickOutside,
+      onSearch = _ref.onSearch,
+      hasMoreItems = _ref.hasMoreItems,
+      onFetchData = _ref.onFetchData,
+      onOpen = _ref.onOpen,
+      type = _ref.type;
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -42,6 +48,7 @@ var ContextSelector = function ContextSelector(_ref) {
       setDropdownVisible = _React$useState2[1];
 
   var handleChange = React.useCallback(function (val) {
+    setDropdownVisible(false);
     onSelectItem(val);
   }, [onSelectItem]);
   var handleOnSetGroup = React.useCallback(function (val) {
@@ -56,11 +63,13 @@ var ContextSelector = function ContextSelector(_ref) {
     return selectedItem ? 'two-icons' : 'label-icon';
   }, [selectedItem]);
   var triggerColor = React.useMemo(function () {
-    return selectedItem ? 'green' : 'blue';
-  }, [selectedItem]);
+    if (!selectedItem) return 'blue';
+    return type === 'event' ? 'cyan' : 'green';
+  }, [selectedItem, type]);
   var handleClick = React.useCallback(function () {
+    onOpen && onOpen();
     setDropdownVisible(true);
-  }, []);
+  }, [onOpen]);
   var triggerButton = React.useMemo(function () {
     var buttonLabel = texts.buttonLabel;
     return addMode && !selectedItem ? React.createElement(Button, {
@@ -82,7 +91,10 @@ var ContextSelector = function ContextSelector(_ref) {
       component: React.createElement(AngleDownS, null)
     }));
   }, [addMode, handleClick, texts, triggerColor, triggerMode, selectedItem]);
-  return React.createElement(Dropdown, {
+  return React.createElement("div", {
+    "data-popup-container": true
+  }, React.createElement(Dropdown, {
+    getPopupContainer: getPopupContainer,
     trigger: trigger,
     visible: dropdownVisible,
     overlay: React.createElement(ContextSelectorDropdown, {
@@ -98,9 +110,12 @@ var ContextSelector = function ContextSelector(_ref) {
       menuItemHeight: menuItemHeight,
       dropdownWrapperStyles: dropdownWrapperStyles,
       onClickOutsideEvents: onClickOutsideEvents,
-      onClickOutside: onClickOutside
+      onClickOutside: onClickOutside,
+      onSearch: onSearch,
+      hasMoreItems: hasMoreItems,
+      onFetchData: onFetchData
     })
-  }, customTriggerComponent !== null && customTriggerComponent !== void 0 ? customTriggerComponent : triggerButton);
+  }, customTriggerComponent !== null && customTriggerComponent !== void 0 ? customTriggerComponent : triggerButton));
 };
 
 export default ContextSelector;

package/dist/ContextSelector.styles.d.ts

@@ -6,3 +6,4 @@ export declare const SearchResult: import("styled-components").StyledComponent<"
 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<"div", any, {}, never>;
+export declare const LoaderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/ContextSelector.styles.js

@@ -35,4 +35,8 @@ export var ItemWrapper = styled.div.withConfig({
   componentId: "sc-1tuu6xk-6"
 })(["max-width:200px;overflow:hidden;text-overflow:ellipsis;color:", ";"], function (props) {
   return props.theme.palette.white;
-});
+});
+export var LoaderWrapper = styled.div.withConfig({
+  displayName: "ContextSelectorstyles__LoaderWrapper",
+  componentId: "sc-1tuu6xk-7"
+})(["width:100%;display:flex;align-items:center;justify-content:center;padding:32px 0;"]);

package/dist/ContextSelector.types.d.ts

@@ -49,6 +49,11 @@ export declare type ContextProps = {
     dropdownWrapperStyles?: CSSProperties;
     onClickOutsideEvents?: HandledEventsType[];
     onClickOutside?: () => void;
+    onSearch?: (query: string) => void;
+    onFetchData?: () => void;
+    onOpen?: () => void;
+    hasMoreItems?: boolean;
+    type?: 'default' | 'attribute' | 'event';
 };
 export declare type ContextDropdownProps = {
     setDropdownVisible: (show: boolean) => void;
@@ -64,6 +69,10 @@ export declare type ContextDropdownProps = {
     dropdownWrapperStyles?: CSSProperties;
     onClickOutsideEvents?: HandledEventsType[];
     onClickOutside?: () => void;
+    onSearch?: (query: string) => void;
+    onFetchData?: () => void;
+    hasMoreItems?: boolean;
+    style?: React.CSSProperties;
 };
 export declare type ContextSelectorDropdownItemProps = {
     item: ContextItem | ContextGroup;
@@ -74,4 +83,20 @@ export declare type ContextSelectorDropdownItemProps = {
     selected?: boolean;
     className: string;
     menuItemHeight?: 'large' | 'default';
+    style?: React.CSSProperties;
 };
+export declare type ListItem = {
+    className: string;
+    item: ContextItem | ContextGroup;
+    searchQuery: string;
+    select: (item: ContextItem | ContextGroup) => void;
+    menuItemHeight?: 'large' | 'default';
+    selected?: boolean;
+    clearSearch?: () => void;
+    hideDropdown?: () => void;
+};
+export declare type ListTitle = {
+    title?: string;
+    type?: string;
+};
+export declare type DropdownItemProps = ListTitle | ListItem;

package/dist/ContextSelectorDropdown/ContextSelectorDropdown.js

@@ -1,3 +1,5 @@
+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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -35,10 +37,15 @@ import Scrollbar from '@synerise/ds-scrollbar';
 import Loader from '@synerise/ds-loader';
 import theme from '@synerise/ds-core/dist/js/DSProvider/ThemeProvider/theme';
 import { v4 as uuid } from 'uuid';
+import { FixedSizeList as List } from 'react-window';
 import * as S from '../ContextSelector.styles';
 import ContextSelectorDropdownItem from './ContextSelectorDropdownItem';
 var NO_GROUP_NAME = 'NO_GROUP_NAME';
 
+function isListTitle(element) {
+  return element.title !== undefined;
+}
+
 var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
   var texts = _ref.texts,
       setSelected = _ref.setSelected,
@@ -52,7 +59,15 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
       menuItemHeight = _ref.menuItemHeight,
       dropdownWrapperStyles = _ref.dropdownWrapperStyles,
       onClickOutsideEvents = _ref.onClickOutsideEvents,
-      onClickOutside = _ref.onClickOutside;
+      onClickOutside = _ref.onClickOutside,
+      onSearch = _ref.onSearch,
+      onFetchData = _ref.onFetchData,
+      hasMoreItems = _ref.hasMoreItems;
+  var listRef = React.createRef();
+  var listStyle = {
+    overflowX: 'unset',
+    overflowY: 'unset'
+  };
   var defaultTab = React.useMemo(function () {
     var defaultIndex = groups === null || groups === void 0 ? void 0 : groups.findIndex(function (group) {
       return group.defaultGroup;
@@ -92,76 +107,90 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
     onClickOutside && onClickOutside();
     setDropdownVisible(false);
   }, onClickOutsideEvents);
+  var clearSearch = React.useCallback(function () {
+    setSearchQuery('');
+  }, []);
+  var hideDropdown = React.useCallback(function () {
+    setDropdownVisible(false);
+  }, [setDropdownVisible]);
+  var currentTabItems = React.useMemo(function () {
+    return groups === null || groups === void 0 ? void 0 : groups.find(function (group, index) {
+      return activeTab === index;
+    });
+  }, [groups, activeTab]);
   var groupByGroupName = React.useCallback(function (activeItems) {
-    var groupedItems = activeItems.reduce(function (result, item) {
-      var res = result;
+    var itemsNumber = activeItems.length;
+    var groupedItems = {};
+
+    for (var i = 0; i < itemsNumber; i += 1) {
+      var item = activeItems[i];
       var groupName = item.groupName || NO_GROUP_NAME;
-      res[groupName] = (result[groupName] || []).concat(item);
-      return res;
-    }, {});
+      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(React.createElement(S.Title, null, key));
+        resultItems.push({
+          type: 'title',
+          title: key
+        });
       }
 
       groupedItems[key].forEach(function (item) {
-        var resultItem = item.isGroup ? React.createElement(ContextSelectorDropdownItem, {
+        var resultItem = item.isGroup ? {
           className: classNames,
-          key: item.name + item.id,
           item: item,
           searchQuery: searchQuery,
           select: handleOnSetGroup,
           menuItemHeight: menuItemHeight
-        }) : React.createElement(ContextSelectorDropdownItem, {
+        } : {
           className: classNames,
-          key: item.name + item.id + item.groupId,
           item: item,
           searchQuery: searchQuery,
-          hideDropdown: function hideDropdown() {
-            return setDropdownVisible(false);
-          },
+          hideDropdown: hideDropdown,
           select: setSelected,
           selected: Boolean(value) && item.id === (value === null || value === void 0 ? void 0 : value.id),
           menuItemHeight: menuItemHeight
-        });
+        };
         resultItems.push(resultItem);
       });
     });
     return resultItems;
-  }, [activeGroup, classNames, searchQuery, setSelected, value, setDropdownVisible, handleOnSetGroup, menuItemHeight]);
-  var currentTabItems = React.useMemo(function () {
-    return groups === null || groups === void 0 ? void 0 : groups.find(function (group, index) {
-      return activeTab === index;
-    });
-  }, [groups, activeTab]);
-  var filteredItems = React.useMemo(function () {
-    return items === null || items === void 0 ? void 0 : items.filter(function (item) {
-      return item.name.toLowerCase().includes(searchQuery.toLowerCase());
-    }).map(function (item) {
-      return React.createElement(ContextSelectorDropdownItem, {
-        className: classNames,
-        key: item.name + item.id + item.groupId,
-        item: item,
-        searchQuery: searchQuery,
-        clearSearch: function clearSearch() {
-          return setSearchQuery('');
-        },
-        hideDropdown: function hideDropdown() {
-          return setDropdownVisible(false);
-        },
-        select: setSelected,
-        selected: Boolean(value) && item.id === (value === null || value === void 0 ? void 0 : value.id),
-        menuItemHeight: menuItemHeight
-      });
-    });
-  }, [items, searchQuery, setDropdownVisible, setSelected, value, classNames, menuItemHeight]);
-  var currentItems = React.useMemo(function () {
-    if (searchQuery) {
-      return filteredItems;
+  }, [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 = items[i];
+      var matching = !searchQuery || item.name.toLowerCase().includes(searchQuery.toLowerCase());
+
+      if (matching) {
+        result.push({
+          className: classNames,
+          item: item,
+          searchQuery: searchQuery,
+          clearSearch: clearSearch,
+          hideDropdown: hideDropdown,
+          select: setSelected,
+          selected: Boolean(value) && item.id === (value === null || value === void 0 ? void 0 : value.id),
+          menuItemHeight: menuItemHeight
+        });
+      }
     }
 
-    var hasSubgroups = Boolean(currentTabItems === null || currentTabItems === void 0 ? void 0 : currentTabItems.subGroups);
+    return result;
+  }, [classNames, clearSearch, hideDropdown, items, menuItemHeight, searchQuery, setSelected, value]);
+  var hasSubgroups = React.useMemo(function () {
+    return Boolean(currentTabItems === null || currentTabItems === void 0 ? void 0 : currentTabItems.subGroups);
+  }, [currentTabItems]);
+  var activeItems = React.useMemo(function () {
+    if (!onSearch && searchQuery) {
+      return searchResults;
+    }
 
     if (hasSubgroups && !activeGroup) {
       var _currentTabItems$subG;
@@ -185,17 +214,22 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
 
     if (activeGroup) {
       return groupByGroupName(items === null || items === void 0 ? void 0 : items.filter(function (item) {
-        return item.groupId === activeGroup.id;
+        return activeGroup && item.groupId === activeGroup.id;
       }));
     }
 
-    return groupByGroupName(items === null || items === void 0 ? void 0 : items.filter(function (item) {
-      return item.groupId === groups[activeTab].id;
-    }));
-  }, [currentTabItems, items, groups, searchQuery, activeTab, filteredItems, activeGroup, groupByGroupName]);
+    if (activeTab && groups && groups[activeTab]) {
+      return groupByGroupName(items === null || items === void 0 ? void 0 : items.filter(function (item) {
+        return item.groupId === groups[activeTab].id;
+      }));
+    }
+
+    return groupByGroupName(items);
+  }, [activeGroup, activeTab, currentTabItems, groupByGroupName, groups, hasSubgroups, items, onSearch, searchQuery, searchResults]);
   var handleSearch = React.useCallback(function (val) {
     setSearchQuery(val);
-  }, [setSearchQuery]);
+    onSearch && onSearch(val);
+  }, [onSearch]);
   var getTabs = React.useMemo(function () {
     return (groups === null || groups === void 0 ? void 0 : groups.map(function (group) {
       return {
@@ -204,15 +238,22 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
     })) || [];
   }, [groups]);
   var getNoResultContainer = React.useMemo(function () {
-    return loading ? React.createElement(Loader, {
-      label: texts.loadingResults,
-      labelPosition: "bottom"
-    }) : React.createElement(Result, {
+    return React.createElement(Result, {
       noSearchResults: true,
       type: "no-results",
       description: texts.noResults
     });
-  }, [loading, texts]);
+  }, [texts]);
+
+  var handleScroll = function handleScroll(_ref2) {
+    var currentTarget = _ref2.currentTarget;
+    var scrollTop = currentTarget.scrollTop;
+
+    if (listRef.current !== null) {
+      listRef.current.scrollTo(scrollTop);
+    }
+  };
+
   return React.createElement(Dropdown.Wrapper, {
     style: _objectSpread({
       width: '300px'
@@ -227,11 +268,13 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
   }, React.createElement(Dropdown.SearchInput, {
     onSearchChange: handleSearch,
     onClearInput: function onClearInput() {
-      return handleSearch('');
+      handleSearch('');
+      onSearch && onSearch('');
     },
     placeholder: texts.searchPlaceholder,
     value: searchQuery,
     autofocus: !searchQuery || searchInputCanBeFocused,
+    autofocusDelay: 50,
     iconLeft: React.createElement(Icon, {
       component: React.createElement(SearchM, null),
       color: theme.palette['grey-600']
@@ -250,13 +293,35 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
     onClick: function onClick() {
       return setActiveGroup(undefined);
     }
-  }), React.createElement(S.ItemsList, null, React.createElement(Scrollbar, {
+  }), loading ? React.createElement(S.LoaderWrapper, null, React.createElement(Loader, {
+    label: texts.loadingResults,
+    labelPosition: "bottom"
+  })) : React.createElement(S.ItemsList, null, (activeItems === null || activeItems === void 0 ? void 0 : activeItems.length) ? React.createElement(Scrollbar, {
     absolute: true,
-    maxHeight: 300,
     style: {
       padding: 8
-    }
-  }, (currentItems === null || currentItems === void 0 ? void 0 : currentItems.length) ? currentItems : getNoResultContainer)));
+    },
+    loading: loading,
+    hasMore: hasMoreItems,
+    onYReachEnd: onFetchData,
+    onScroll: handleScroll
+  }, React.createElement(List, {
+    width: "100%",
+    height: 300,
+    itemCount: activeItems.length,
+    itemSize: 32,
+    style: listStyle,
+    ref: listRef
+  }, function (_ref3) {
+    var index = _ref3.index,
+        style = _ref3.style;
+    var item = activeItems[index];
+    return item && isListTitle(item) ? React.createElement(S.Title, {
+      style: style
+    }, item.title) : React.createElement(ContextSelectorDropdownItem, _extends({
+      style: style
+    }, item));
+  })) : getNoResultContainer));
 };
 
 export default ContextSelectorDropdown;

package/dist/ContextSelectorDropdown/ContextSelectorDropdownItem.js

@@ -12,8 +12,10 @@ var ContextSelectorDropdownItem = function ContextSelectorDropdownItem(_ref) {
       select = _ref.select,
       selected = _ref.selected,
       className = _ref.className,
-      menuItemHeight = _ref.menuItemHeight;
+      menuItemHeight = _ref.menuItemHeight,
+      style = _ref.style;
   return React.createElement(Menu.Item, {
+    style: style,
     className: className,
     key: item.name + item.id,
     prefixel: item.useCustomIcon ? item.icon : React.createElement(Icon, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-context-selector",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "ContextSelector UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -26,22 +26,23 @@
     "test:watch": "npm run test -- --watchAll",
     "types": "tsc --noEmit"
   },
-  "gitHead": "fe63783a6671ab0fa99c2c675e7e33486ceed1ec",
+  "gitHead": "1fdb5eb22cd9c4d5f786d33d75531c31eba7ece3",
   "sideEffects": [
     "dist/style/*",
     "*.less"
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^0.13.65",
-    "@synerise/ds-dropdown": "^0.16.24",
-    "@synerise/ds-icon": "^0.44.11",
-    "@synerise/ds-menu": "^0.10.40",
-    "@synerise/ds-result": "^0.5.73",
-    "@synerise/ds-scrollbar": "^0.3.15",
-    "@synerise/ds-tabs": "^0.11.67",
-    "@synerise/ds-utils": "^0.18.0",
-    "classnames": "^2.2.6"
+    "@synerise/ds-button": "^0.13.67",
+    "@synerise/ds-dropdown": "^0.16.28",
+    "@synerise/ds-icon": "^0.45.0",
+    "@synerise/ds-menu": "^0.10.42",
+    "@synerise/ds-result": "^0.5.75",
+    "@synerise/ds-scrollbar": "^0.3.17",
+    "@synerise/ds-tabs": "^0.11.71",
+    "@synerise/ds-utils": "^0.19.0",
+    "classnames": "^2.2.6",
+    "react-window": "1.8.5"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",