@synerise/ds-context-selector 0.7.3 → 0.8.3

package/CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.8.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-context-selector@0.8.2...@synerise/ds-context-selector@0.8.3) (2021-11-22)
+
+**Note:** Version bump only for package @synerise/ds-context-selector
+
+
+
+
+
+## [0.8.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-context-selector@0.8.1...@synerise/ds-context-selector@0.8.2) (2021-11-16)
+
+**Note:** Version bump only for package @synerise/ds-context-selector
+
+
+
+
+
+## [0.8.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-context-selector@0.7.3...@synerise/ds-context-selector@0.8.1) (2021-11-09)
+
+**Note:** Version bump only for package @synerise/ds-context-selector
+
+
+
+
+
+# [0.8.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-context-selector@0.7.3...@synerise/ds-context-selector@0.8.0) (2021-11-09)
+
+**Note:** Version bump only for package @synerise/ds-context-selector
+
+
+
+
+
 ## [0.7.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-context-selector@0.7.2...@synerise/ds-context-selector@0.7.3) (2021-11-05)
 
 **Note:** Version bump only for package @synerise/ds-context-selector

package/README.md

@@ -84,24 +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                                 | -         | 
-| 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                                                | -         | 
+| 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                                                | -         | 
+| getPopupContainerOverride | Popup container function for child tooltips and dropdowns     | (trigger: HTMLElement | null) => HTMLElement;          | -       |
 
 
 ### ContextGroup

package/dist/ContextSelector.js

@@ -1,19 +1,6 @@
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(n); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 import * as React from 'react';
 import Button from '@synerise/ds-button';
-import Icon from '@synerise/ds-icon';
-import { AngleDownS, Add3M } from '@synerise/ds-icon/dist/icons';
+import Icon, { AngleDownS, Add3M } from '@synerise/ds-icon';
 import Dropdown from '@synerise/ds-dropdown';
 import Tooltip from '@synerise/ds-tooltip';
 import { getPopupContainer } from '@synerise/ds-utils';
@@ -39,13 +26,14 @@ var ContextSelector = function ContextSelector(_ref) {
       onSearch = _ref.onSearch,
       hasMoreItems = _ref.hasMoreItems,
       onFetchData = _ref.onFetchData,
+      onActivate = _ref.onActivate,
       onOpen = _ref.onOpen,
+      getPopupContainerOverride = _ref.getPopupContainerOverride,
       type = _ref.type;
 
   var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      dropdownVisible = _React$useState2[0],
-      setDropdownVisible = _React$useState2[1];
+      dropdownVisible = _React$useState[0],
+      setDropdownVisible = _React$useState[1];
 
   var handleChange = React.useCallback(function (val) {
     setDropdownVisible(false);
@@ -72,32 +60,36 @@ var ContextSelector = function ContextSelector(_ref) {
   }, [onOpen]);
   var triggerButton = React.useMemo(function () {
     var buttonLabel = texts.buttonLabel;
-    return addMode && !selectedItem ? React.createElement(Button, {
+    return addMode && !selectedItem ? /*#__PURE__*/React.createElement(Button, {
       type: "primary",
       mode: "icon-label",
       onClick: handleClick
-    }, React.createElement(Icon, {
-      component: React.createElement(Add3M, null)
-    }), buttonLabel) : React.createElement(Button, {
+    }, /*#__PURE__*/React.createElement(Icon, {
+      component: /*#__PURE__*/React.createElement(Add3M, null)
+    }), buttonLabel) : /*#__PURE__*/React.createElement(Button, {
       type: "custom-color",
       color: triggerColor,
       mode: triggerMode,
       onClick: handleClick
-    }, selectedItem ? React.createElement(Icon, {
+    }, selectedItem ? /*#__PURE__*/React.createElement(Icon, {
       component: selectedItem.icon
-    }) : null, React.createElement(ItemWrapper, null, React.createElement(Tooltip, {
+    }) : null, /*#__PURE__*/React.createElement(ItemWrapper, null, /*#__PURE__*/React.createElement(Tooltip, {
       title: selectedItem ? selectedItem.name : undefined
-    }, selectedItem ? selectedItem.name : buttonLabel)), React.createElement(Icon, {
-      component: React.createElement(AngleDownS, null)
+    }, selectedItem ? selectedItem.name : buttonLabel)), /*#__PURE__*/React.createElement(Icon, {
+      component: /*#__PURE__*/React.createElement(AngleDownS, null)
     }));
   }, [addMode, handleClick, texts, triggerColor, triggerMode, selectedItem]);
-  return React.createElement("div", {
+  var onDropdownVisibilityChange = React.useCallback(function (value) {
+    return value && onActivate && onActivate();
+  }, [onActivate]);
+  return /*#__PURE__*/React.createElement("div", {
     "data-popup-container": true
-  }, React.createElement(Dropdown, {
-    getPopupContainer: getPopupContainer,
+  }, /*#__PURE__*/React.createElement(Dropdown, {
+    getPopupContainer: getPopupContainerOverride || getPopupContainer,
+    onVisibleChange: onDropdownVisibilityChange,
     trigger: trigger,
     visible: dropdownVisible,
-    overlay: React.createElement(ContextSelectorDropdown, {
+    overlay: /*#__PURE__*/React.createElement(ContextSelectorDropdown, {
       value: selectedItem,
       setDropdownVisible: setDropdownVisible,
       setSelected: handleChange,
@@ -115,7 +107,7 @@ var ContextSelector = function ContextSelector(_ref) {
       hasMoreItems: hasMoreItems,
       onFetchData: onFetchData
     })
-  }, customTriggerComponent !== null && customTriggerComponent !== void 0 ? customTriggerComponent : triggerButton));
+  }, customTriggerComponent != null ? customTriggerComponent : triggerButton));
 };
 
 export default ContextSelector;

package/dist/ContextSelector.types.d.ts

@@ -35,10 +35,12 @@ export declare type ContextItemsInSubGroup = ContextItem & {
 };
 export declare type ContextProps = {
     selectedItem?: ContextItem | undefined;
+    onActivate?: () => void;
     onSelectItem: (item: ContextItem | ContextGroup | undefined) => void;
     groups: ContextGroup[];
     items: ContextItem[];
     texts: ContextTexts;
+    getPopupContainerOverride?: (trigger: HTMLElement | null) => HTMLElement;
     onSetGroup?: (item: ContextItem | ContextGroup | undefined) => void;
     opened?: boolean;
     addMode?: boolean;

package/dist/ContextSelector.types.js

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

package/dist/ContextSelectorDropdown/ContextSelectorDropdown.js

@@ -1,35 +1,14 @@
 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."); }
-
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
-
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
 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; }
 
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(n); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 import * as React from 'react';
 import Dropdown from '@synerise/ds-dropdown';
-import Icon from '@synerise/ds-icon';
-import SearchM from '@synerise/ds-icon/dist/icons/SearchM';
+import Icon, { SearchM } from '@synerise/ds-icon';
 import Tabs from '@synerise/ds-tabs';
 import { focusWithArrowKeys, useOnClickOutside } from '@synerise/ds-utils';
 import Result from '@synerise/ds-result';
@@ -69,7 +48,7 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
     overflowY: 'unset'
   };
   var defaultTab = React.useMemo(function () {
-    var defaultIndex = groups === null || groups === void 0 ? void 0 : groups.findIndex(function (group) {
+    var defaultIndex = groups == null ? void 0 : groups.findIndex(function (group) {
       return group.defaultGroup;
     });
     return defaultIndex || 0;
@@ -77,27 +56,23 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
   var overlayRef = React.useRef(null);
 
   var _React$useState = React.useState(''),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      searchQuery = _React$useState2[0],
-      setSearchQuery = _React$useState2[1];
+      searchQuery = _React$useState[0],
+      setSearchQuery = _React$useState[1];
 
-  var _React$useState3 = React.useState(defaultTab),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      activeTab = _React$useState4[0],
-      setActiveTab = _React$useState4[1];
+  var _React$useState2 = React.useState(defaultTab),
+      activeTab = _React$useState2[0],
+      setActiveTab = _React$useState2[1];
 
-  var _React$useState5 = React.useState(undefined),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      activeGroup = _React$useState6[0],
-      setActiveGroup = _React$useState6[1];
+  var _React$useState3 = React.useState(undefined),
+      activeGroup = _React$useState3[0],
+      setActiveGroup = _React$useState3[1];
 
-  var _React$useState7 = React.useState(true),
-      _React$useState8 = _slicedToArray(_React$useState7, 2),
-      searchInputCanBeFocused = _React$useState8[0],
-      setSearchInputFocus = _React$useState8[1];
+  var _React$useState4 = React.useState(true),
+      searchInputCanBeFocused = _React$useState4[0],
+      setSearchInputFocus = _React$useState4[1];
 
   var classNames = React.useMemo(function () {
-    return "ds-context-item ds-context-item-".concat(uuid());
+    return "ds-context-item ds-context-item-" + uuid();
   }, []);
   var handleOnSetGroup = React.useCallback(function (item) {
     onSetGroup && onSetGroup(item);
@@ -114,7 +89,7 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
     setDropdownVisible(false);
   }, [setDropdownVisible]);
   var currentTabItems = React.useMemo(function () {
-    return groups === null || groups === void 0 ? void 0 : groups.find(function (group, index) {
+    return groups == null ? void 0 : groups.find(function (group, index) {
       return activeTab === index;
     });
   }, [groups, activeTab]);
@@ -152,7 +127,7 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
           searchQuery: searchQuery,
           hideDropdown: hideDropdown,
           select: setSelected,
-          selected: Boolean(value) && item.id === (value === null || value === void 0 ? void 0 : value.id),
+          selected: Boolean(value) && item.id === (value == null ? void 0 : value.id),
           menuItemHeight: menuItemHeight
         };
         resultItems.push(resultItem);
@@ -176,7 +151,7 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
           clearSearch: clearSearch,
           hideDropdown: hideDropdown,
           select: setSelected,
-          selected: Boolean(value) && item.id === (value === null || value === void 0 ? void 0 : value.id),
+          selected: Boolean(value) && item.id === (value == null ? void 0 : value.id),
           menuItemHeight: menuItemHeight
         });
       }
@@ -185,7 +160,7 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
     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);
+    return Boolean(currentTabItems == null ? void 0 : currentTabItems.subGroups);
   }, [currentTabItems]);
   var activeItems = React.useMemo(function () {
     if (!onSearch && searchQuery) {
@@ -195,13 +170,13 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
     if (hasSubgroups && !activeGroup) {
       var _currentTabItems$subG;
 
-      var subGroups = (currentTabItems === null || currentTabItems === void 0 ? void 0 : currentTabItems.subGroups) ? currentTabItems === null || currentTabItems === void 0 ? void 0 : (_currentTabItems$subG = currentTabItems.subGroups) === null || _currentTabItems$subG === void 0 ? void 0 : _currentTabItems$subG.map(function (group) {
+      var subGroups = currentTabItems != null && currentTabItems.subGroups ? currentTabItems == null ? void 0 : (_currentTabItems$subG = currentTabItems.subGroups) == null ? void 0 : _currentTabItems$subG.map(function (group) {
         return _objectSpread({}, group, {
           isGroup: true
         });
       }) : [];
-      var subItems = items === null || items === void 0 ? void 0 : items.reduce(function (prev, curr) {
-        if (curr.groupId === (currentTabItems === null || currentTabItems === void 0 ? void 0 : currentTabItems.id)) {
+      var subItems = items == null ? void 0 : items.reduce(function (prev, curr) {
+        if (curr.groupId === (currentTabItems == null ? void 0 : currentTabItems.id)) {
           prev.push(_objectSpread({}, curr, {
             isGroup: false
           }));
@@ -209,17 +184,17 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
 
         return prev;
       }, []);
-      return groupByGroupName([].concat(_toConsumableArray(subGroups), _toConsumableArray(subItems)));
+      return groupByGroupName([].concat(subGroups, subItems));
     }
 
     if (activeGroup) {
-      return groupByGroupName(items === null || items === void 0 ? void 0 : items.filter(function (item) {
+      return groupByGroupName(items == null ? void 0 : items.filter(function (item) {
         return activeGroup && item.groupId === activeGroup.id;
       }));
     }
 
     if (activeTab && groups && groups[activeTab]) {
-      return groupByGroupName(items === null || items === void 0 ? void 0 : items.filter(function (item) {
+      return groupByGroupName(items == null ? void 0 : items.filter(function (item) {
         return item.groupId === groups[activeTab].id;
       }));
     }
@@ -231,14 +206,14 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
     onSearch && onSearch(val);
   }, [onSearch]);
   var getTabs = React.useMemo(function () {
-    return (groups === null || groups === void 0 ? void 0 : groups.map(function (group) {
+    return (groups == null ? void 0 : groups.map(function (group) {
       return {
         label: group.name
       };
     })) || [];
   }, [groups]);
   var getNoResultContainer = React.useMemo(function () {
-    return React.createElement(Result, {
+    return /*#__PURE__*/React.createElement(Result, {
       noSearchResults: true,
       type: "no-results",
       description: texts.noResults
@@ -254,7 +229,7 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
     }
   };
 
-  return React.createElement(Dropdown.Wrapper, {
+  return /*#__PURE__*/React.createElement(Dropdown.Wrapper, {
     style: _objectSpread({
       width: '300px'
     }, dropdownWrapperStyles),
@@ -265,7 +240,7 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
         setSearchInputFocus(true);
       });
     }
-  }, React.createElement(Dropdown.SearchInput, {
+  }, /*#__PURE__*/React.createElement(Dropdown.SearchInput, {
     onSearchChange: handleSearch,
     onClearInput: function onClearInput() {
       handleSearch('');
@@ -275,11 +250,11 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
     value: searchQuery,
     autofocus: !searchQuery || searchInputCanBeFocused,
     autofocusDelay: 50,
-    iconLeft: React.createElement(Icon, {
-      component: React.createElement(SearchM, null),
+    iconLeft: /*#__PURE__*/React.createElement(Icon, {
+      component: /*#__PURE__*/React.createElement(SearchM, null),
       color: theme.palette['grey-600']
     })
-  }), searchQuery === '' && getTabs.length > 1 && React.createElement(S.TabsWrapper, null, React.createElement(Tabs, {
+  }), searchQuery === '' && getTabs.length > 1 && /*#__PURE__*/React.createElement(S.TabsWrapper, null, /*#__PURE__*/React.createElement(Tabs, {
     block: true,
     tabs: getTabs,
     activeTab: activeTab,
@@ -288,15 +263,15 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
       setActiveGroup(undefined);
     },
     visible: visible
-  })), activeGroup && !searchQuery && React.createElement(Dropdown.BackAction, {
+  })), activeGroup && !searchQuery && /*#__PURE__*/React.createElement(Dropdown.BackAction, {
     label: activeGroup.name,
     onClick: function onClick() {
       return setActiveGroup(undefined);
     }
-  }), loading ? React.createElement(S.LoaderWrapper, null, React.createElement(Loader, {
+  }), loading ? /*#__PURE__*/React.createElement(S.LoaderWrapper, null, /*#__PURE__*/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, {
+  })) : /*#__PURE__*/React.createElement(S.ItemsList, null, activeItems != null && activeItems.length ? /*#__PURE__*/React.createElement(Scrollbar, {
     absolute: true,
     style: {
       padding: 8
@@ -305,7 +280,7 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
     hasMore: hasMoreItems,
     onYReachEnd: onFetchData,
     onScroll: handleScroll
-  }, React.createElement(List, {
+  }, /*#__PURE__*/React.createElement(List, {
     width: "100%",
     height: 300,
     itemCount: activeItems.length,
@@ -316,9 +291,9 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
     var index = _ref3.index,
         style = _ref3.style;
     var item = activeItems[index];
-    return item && isListTitle(item) ? React.createElement(S.Title, {
+    return item && isListTitle(item) ? /*#__PURE__*/React.createElement(S.Title, {
       style: style
-    }, item.title) : React.createElement(ContextSelectorDropdownItem, _extends({
+    }, item.title) : /*#__PURE__*/React.createElement(ContextSelectorDropdownItem, _extends({
       style: style
     }, item));
   })) : getNoResultContainer));

package/dist/ContextSelectorDropdown/ContextSelectorDropdownItem.js

@@ -1,8 +1,7 @@
 import * as React from 'react';
-import Icon from '@synerise/ds-icon';
+import Icon, { CheckS } from '@synerise/ds-icon';
 import Menu from '@synerise/ds-menu';
 import theme from '@synerise/ds-core/dist/js/DSProvider/ThemeProvider/theme';
-import { CheckS } from '@synerise/ds-icon/dist/icons';
 
 var ContextSelectorDropdownItem = function ContextSelectorDropdownItem(_ref) {
   var item = _ref.item,
@@ -14,16 +13,16 @@ var ContextSelectorDropdownItem = function ContextSelectorDropdownItem(_ref) {
       className = _ref.className,
       menuItemHeight = _ref.menuItemHeight,
       style = _ref.style;
-  return React.createElement(Menu.Item, {
+  return /*#__PURE__*/React.createElement(Menu.Item, {
     style: style,
     className: className,
     key: item.name + item.id,
-    prefixel: item.useCustomIcon ? item.icon : React.createElement(Icon, {
+    prefixel: item.useCustomIcon ? item.icon : /*#__PURE__*/React.createElement(Icon, {
       component: item.icon
     }),
     highlight: searchQuery,
-    suffixel: (item === null || item === void 0 ? void 0 : item.customSuffix) ? item.customSuffix : selected && React.createElement(Icon, {
-      component: React.createElement(CheckS, null),
+    suffixel: item != null && item.customSuffix ? item.customSuffix : selected && /*#__PURE__*/React.createElement(Icon, {
+      component: /*#__PURE__*/React.createElement(CheckS, null),
       color: theme.palette['green-600']
     }),
     onClick: function onClick() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-context-selector",
-  "version": "0.7.3",
+  "version": "0.8.3",
   "description": "ContextSelector UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -26,20 +26,20 @@
     "test:watch": "npm run test -- --watchAll",
     "types": "tsc --noEmit"
   },
-  "gitHead": "bf865b6d1967c42effb68dc794f34dd18ddebe27",
+  "gitHead": "2468359677783819939fb9f1ef5acc36667ecd1a",
   "sideEffects": [
     "dist/style/*",
     "*.less"
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^0.15.0",
-    "@synerise/ds-dropdown": "^0.16.31",
-    "@synerise/ds-icon": "^0.45.2",
-    "@synerise/ds-menu": "^0.10.45",
-    "@synerise/ds-result": "^0.5.77",
-    "@synerise/ds-scrollbar": "^0.3.19",
-    "@synerise/ds-tabs": "^0.11.74",
+    "@synerise/ds-button": "^0.16.2",
+    "@synerise/ds-dropdown": "^0.17.3",
+    "@synerise/ds-icon": "^0.46.2",
+    "@synerise/ds-menu": "^0.11.2",
+    "@synerise/ds-result": "^0.6.2",
+    "@synerise/ds-scrollbar": "^0.4.2",
+    "@synerise/ds-tabs": "^0.12.3",
     "@synerise/ds-utils": "^0.19.0",
     "classnames": "^2.2.6",
     "react-window": "1.8.5"