@synerise/ds-context-selector 1.3.16 → 1.3.17

package/dist/ContextSelectorDropdown/ContextSelectorDropdown.js

@@ -1,254 +1,229 @@
-var _ITEM_SIZE;
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { VariableSizeList } from 'react-window';
-import { v4 as uuid } from 'uuid';
-import { theme } from '@synerise/ds-core';
-import Divider from '@synerise/ds-divider';
-import Dropdown from '@synerise/ds-dropdown';
-import Icon, { ArrowRightCircleM, SearchM } from '@synerise/ds-icon';
-import { ListContextProvider, itemSizes } from '@synerise/ds-list-item';
-import Result from '@synerise/ds-result';
-import Scrollbar from '@synerise/ds-scrollbar';
-import Tabs from '@synerise/ds-tabs';
-import { focusWithArrowKeys, getActiveTabGroup, getGroupName, useSearchResults } from '@synerise/ds-utils';
-import * as S from '../ContextSelector.styles';
-import { isContextItemsInSubGroup } from '../ContextSelector.types';
-import { DROPDOWN_HEIGHT, NO_GROUP_NAME, SEARCH_HEIGHT, SUBGROUP_HEADER_HEIGHT, TABS_HEIGHT } from '../constants';
-import ContextSelectorDropdownItem from './ContextSelectorDropdownItem';
-import { isGroup, isListTitle } from './utils';
-var ITEM_SIZE = (_ITEM_SIZE = {}, _ITEM_SIZE[itemSizes.LARGE] = 50, _ITEM_SIZE[itemSizes.DEFAULT] = 32, _ITEM_SIZE.title = 32, _ITEM_SIZE.divider = 16, _ITEM_SIZE);
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useState, useCallback, useEffect } from "react";
+import { VariableSizeList } from "react-window";
+import { v4 } from "uuid";
+import { theme } from "@synerise/ds-core";
+import Divider from "@synerise/ds-divider";
+import Dropdown from "@synerise/ds-dropdown";
+import Icon, { ArrowRightCircleM, SearchM } from "@synerise/ds-icon";
+import { itemSizes, ListContextProvider } from "@synerise/ds-list-item";
+import Result from "@synerise/ds-result";
+import Scrollbar from "@synerise/ds-scrollbar";
+import Tabs from "@synerise/ds-tabs";
+import { getActiveTabGroup, getGroupName, useSearchResults, focusWithArrowKeys } from "@synerise/ds-utils";
+import { ShowMoreItem, TabsWrapper, Skeleton, ItemsList, Title } from "../ContextSelector.styles.js";
+import { isContextItemsInSubGroup } from "../ContextSelector.types.js";
+import { NO_GROUP_NAME, DROPDOWN_HEIGHT, TABS_HEIGHT, SUBGROUP_HEADER_HEIGHT, SEARCH_HEIGHT } from "../constants.js";
+import ContextSelectorDropdownItem from "./ContextSelectorDropdownItem.js";
+import { isGroup, isListTitle } from "./utils.js";
+const ITEM_SIZE = {
+  [itemSizes.LARGE]: 50,
+  [itemSizes.DEFAULT]: 32,
+  title: 32,
+  divider: 16
+};
 function isDivider(element) {
-  return element.type === 'divider';
+  return element.type === "divider";
 }
-var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
-  var texts = _ref.texts,
-    setSelected = _ref.setSelected,
-    onSetGroup = _ref.onSetGroup,
-    groups = _ref.groups,
-    items = _ref.items,
-    recentItems = _ref.recentItems,
-    setDropdownVisible = _ref.setDropdownVisible,
-    value = _ref.value,
-    visible = _ref.visible,
-    _ref$hideSearchField = _ref.hideSearchField,
-    hideSearchField = _ref$hideSearchField === void 0 ? false : _ref$hideSearchField,
-    loading = _ref.loading,
-    menuItemHeight = _ref.menuItemHeight,
-    dropdownWrapperStyles = _ref.dropdownWrapperStyles,
-    onSearch = _ref.onSearch,
-    onFetchData = _ref.onFetchData,
-    hasMoreItems = _ref.hasMoreItems,
-    _ref$outerHeight = _ref.outerHeight,
-    outerHeight = _ref$outerHeight === void 0 ? DROPDOWN_HEIGHT : _ref$outerHeight,
-    popoverDelay = _ref.popoverDelay,
-    _ref$maxSearchResults = _ref.maxSearchResultsInGroup,
-    maxSearchResultsInGroup = _ref$maxSearchResults === void 0 ? 4 : _ref$maxSearchResults;
-  var listStyle = {
-    overflowX: 'unset',
-    overflowY: 'unset'
+const ContextSelectorDropdown = ({
+  texts,
+  setSelected,
+  onSetGroup,
+  groups,
+  items,
+  recentItems,
+  setDropdownVisible,
+  value,
+  visible,
+  hideSearchField = false,
+  loading,
+  menuItemHeight,
+  dropdownWrapperStyles,
+  onSearch,
+  onFetchData,
+  hasMoreItems,
+  outerHeight = DROPDOWN_HEIGHT,
+  popoverDelay,
+  maxSearchResultsInGroup = 4
+}) => {
+  const listStyle = {
+    overflowX: "unset",
+    overflowY: "unset"
   };
-  var defaultTab = useMemo(function () {
-    var defaultIndex = groups == null ? void 0 : groups.findIndex(function (group) {
-      return group.defaultGroup;
-    });
+  const defaultTab = useMemo(() => {
+    const defaultIndex = groups?.findIndex((group) => group.defaultGroup);
     return defaultIndex || 0;
   }, [groups]);
-  var listRef = useRef(null);
-  var overlayRef = useRef(null);
-  var scrollBarRef = useRef(null);
-  var _useState = useState(),
-    searchInputHandle = _useState[0],
-    setSearchInputHandle = _useState[1];
-  var _useState2 = useState(''),
-    searchQuery = _useState2[0],
-    setSearchQuery = _useState2[1];
-  var _useState3 = useState(defaultTab),
-    activeTab = _useState3[0],
-    setActiveTab = _useState3[1];
-  var _useState4 = useState(undefined),
-    activeGroup = _useState4[0],
-    setActiveGroup = _useState4[1];
-  var _useState5 = useState(true),
-    searchInputCanBeFocused = _useState5[0],
-    setSearchInputFocus = _useState5[1];
-  var classNames = useMemo(function () {
-    return "ds-context-item ds-context-item-" + uuid();
+  const listRef = useRef(null);
+  const overlayRef = useRef(null);
+  const scrollBarRef = useRef(null);
+  const [searchInputHandle, setSearchInputHandle] = useState();
+  const [searchQuery, setSearchQuery] = useState("");
+  const [activeTab, setActiveTab] = useState(defaultTab);
+  const [activeGroup, setActiveGroup] = useState(void 0);
+  const [searchInputCanBeFocused, setSearchInputFocus] = useState(true);
+  const classNames = useMemo(() => {
+    return `ds-context-item ds-context-item-${v4()}`;
   }, []);
-  var resetList = useCallback(function () {
+  const resetList = useCallback(() => {
     if (listRef.current) {
       listRef.current.resetAfterIndex(0, false);
     }
   }, [listRef]);
-  var handleOnSetGroup = useCallback(function (item) {
+  const handleOnSetGroup = useCallback((item) => {
     if (isGroup(item)) {
       onSetGroup && onSetGroup(item);
       setActiveGroup(item);
       resetList();
     }
   }, [onSetGroup, setActiveGroup, resetList]);
-  var clearSearch = useCallback(function () {
-    setSearchQuery('');
+  const clearSearch = useCallback(() => {
+    setSearchQuery("");
     resetList();
   }, [setSearchQuery, resetList]);
-  var hideDropdown = useCallback(function () {
+  const hideDropdown = useCallback(() => {
     setDropdownVisible(false);
   }, [setDropdownVisible]);
-  var handleSelect = useCallback(function (parameter) {
+  const handleSelect = useCallback((parameter) => {
     setSelected(parameter);
-    setActiveGroup(undefined);
+    setActiveGroup(void 0);
     setActiveTab(defaultTab);
   }, [defaultTab, setSelected]);
-  var currentTabItems = useMemo(function () {
-    return groups ? getActiveTabGroup(activeTab, groups) : undefined;
+  const currentTabItems = useMemo(() => {
+    return groups ? getActiveTabGroup(activeTab, groups) : void 0;
   }, [groups, activeTab]);
-  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-expect-error Property 'groupName' does not exist on type 'ContextGroup
-      var groupName = item.groupName || NO_GROUP_NAME;
-      var group = groupedItems[groupName] || [];
+  const groupByGroupName = useCallback((dropdownItems, maxItemsInGroup) => {
+    const itemsNumber = dropdownItems?.length;
+    const groupedItems = {};
+    for (let i = 0; i < itemsNumber; i += 1) {
+      const item = dropdownItems[i];
+      const groupName = item.groupName || NO_GROUP_NAME;
+      const group = groupedItems[groupName] || [];
       group.push(item);
       groupedItems[groupName] = group;
     }
-    var resultItems = [];
-    Object.keys(groupedItems).forEach(function (key, index) {
+    const resultItems = [];
+    Object.keys(groupedItems).forEach((key, index) => {
       if (index > 0) {
         resultItems.push({
-          type: 'divider'
+          type: "divider"
         });
       }
       if (key !== NO_GROUP_NAME && !activeGroup) {
         resultItems.push({
-          type: 'title',
+          type: "title",
           title: key
         });
       }
-      var groupItems = maxItemsInGroup ? groupedItems[key].slice(0, maxItemsInGroup) : groupedItems[key];
-      groupItems.forEach(function (item) {
-        var resultItem = isContextItemsInSubGroup(item) ? {
+      const groupItems = maxItemsInGroup ? groupedItems[key].slice(0, maxItemsInGroup) : groupedItems[key];
+      groupItems.forEach((item) => {
+        const resultItem = isContextItemsInSubGroup(item) ? {
           className: classNames,
-          item: item,
-          searchQuery: searchQuery,
+          item,
+          searchQuery,
           select: handleOnSetGroup,
-          menuItemHeight: menuItemHeight
+          menuItemHeight
         } : {
           className: classNames,
-          item: item,
-          searchQuery: searchQuery,
-          clearSearch: clearSearch,
-          hideDropdown: hideDropdown,
+          item,
+          searchQuery,
+          clearSearch,
+          hideDropdown,
           select: handleSelect,
-          selected: Boolean(value) && item.id === (value == null ? void 0 : value.id),
-          menuItemHeight: menuItemHeight
+          selected: Boolean(value) && item.id === value?.id,
+          menuItemHeight
         };
         resultItems.push(resultItem);
       });
       if (maxItemsInGroup && groupedItems[key].length > maxItemsInGroup) {
-        var anyItem = groupItems[0];
+        const anyItem = groupItems[0];
         resultItems.push({
           className: classNames,
           select: handleOnSetGroup,
-          menuItemHeight: menuItemHeight,
-          label: /*#__PURE__*/React.createElement(S.ShowMoreItem, null, texts.showMore),
+          menuItemHeight,
+          label: /* @__PURE__ */ jsx(ShowMoreItem, { children: texts.showMore }),
           item: {
             isGroup: true,
             id: anyItem.groupId,
-            name: getGroupName(anyItem.groupId, groups) || '',
-            icon: /*#__PURE__*/React.createElement(ArrowRightCircleM, null)
+            name: getGroupName(anyItem.groupId, groups) || "",
+            icon: /* @__PURE__ */ jsx(ArrowRightCircleM, {})
           }
         });
       }
     });
     return resultItems;
   }, [activeGroup, classNames, searchQuery, handleOnSetGroup, menuItemHeight, clearSearch, hideDropdown, handleSelect, value, texts.showMore, groups]);
-  var _useSearchResults = useSearchResults(items, groups, activeTab, groupByGroupName, activeGroup, searchQuery, maxSearchResultsInGroup),
-    searchResults = _useSearchResults.searchResults;
-  var hasSubgroups = useMemo(function () {
-    return Boolean(currentTabItems == null ? void 0 : currentTabItems.subGroups);
-  }, [currentTabItems]);
-  var activeItems = useMemo(function () {
+  const {
+    searchResults
+  } = useSearchResults(items, groups, activeTab, groupByGroupName, activeGroup, searchQuery, maxSearchResultsInGroup);
+  const hasSubgroups = useMemo(() => Boolean(currentTabItems?.subGroups), [currentTabItems]);
+  const activeItems = useMemo(() => {
     if (!onSearch && searchQuery) {
       return searchResults;
     }
     if (hasSubgroups && !activeGroup) {
-      var _currentTabItems$subG;
-      var subGroups = hasSubgroups ? currentTabItems == null || (_currentTabItems$subG = currentTabItems.subGroups) == null ? void 0 : _currentTabItems$subG.map(function (group) {
-        return _extends({}, group, {
-          isGroup: true
-        });
-      }) : [];
-      var subItems = items == null ? void 0 : items.reduce(function (prev, curr) {
-        if (curr.groupId === (currentTabItems == null ? void 0 : currentTabItems.id)) {
-          prev.push(_extends({}, curr, {
+      const subGroups = hasSubgroups ? currentTabItems?.subGroups?.map((group) => ({
+        ...group,
+        isGroup: true
+      })) : [];
+      const subItems = items?.reduce((prev, curr) => {
+        if (curr.groupId === currentTabItems?.id) {
+          prev.push({
+            ...curr,
             isGroup: false
-          }));
+          });
         }
         return prev;
       }, []);
-      return groupByGroupName([].concat(subGroups || [], subItems));
+      return groupByGroupName([...subGroups || [], ...subItems]);
     }
     if (activeGroup) {
-      return groupByGroupName(items == null ? void 0 : items.filter(function (item) {
-        return activeGroup && item.groupId === activeGroup.id;
-      }));
+      return groupByGroupName(items?.filter((item) => activeGroup && item.groupId === activeGroup.id));
     }
     if (activeTab && groups && groups[activeTab]) {
-      return groupByGroupName(items == null ? void 0 : items.filter(function (item) {
-        return item.groupId === groups[activeTab].id;
-      }));
+      return groupByGroupName(items?.filter((item) => item.groupId === groups[activeTab].id));
     }
     if ((recentItems || []).length > 0) {
-      var recentItemsWithGroup = (recentItems || []).map(function (item) {
-        return _extends({}, item, {
-          groupName: texts.recentItemsGroupName
-        });
-      });
-      var itemsWithAllGroup = (items || []).map(function (item) {
-        return _extends({}, item, {
-          groupName: texts.allItemsGroupName
-        });
-      });
-      var result = groupByGroupName(recentItemsWithGroup.concat(itemsWithAllGroup));
+      const recentItemsWithGroup = (recentItems || []).map((item) => ({
+        ...item,
+        groupName: texts.recentItemsGroupName
+      }));
+      const itemsWithAllGroup = (items || []).map((item) => ({
+        ...item,
+        groupName: texts.allItemsGroupName
+      }));
+      const result = groupByGroupName(recentItemsWithGroup.concat(itemsWithAllGroup));
       return result;
     }
     return groupByGroupName(items);
-  }, [onSearch, searchQuery, hasSubgroups, activeGroup, activeTab, groups, groupByGroupName, items, searchResults, currentTabItems == null ? void 0 : currentTabItems.subGroups, currentTabItems == null ? void 0 : currentTabItems.id, recentItems, texts.recentItemsGroupName, texts.allItemsGroupName]);
-  useEffect(function () {
-    var _listRef$current;
-    (_listRef$current = listRef.current) == null || _listRef$current.resetAfterIndex(0, false);
+  }, [onSearch, searchQuery, hasSubgroups, activeGroup, activeTab, groups, groupByGroupName, items, searchResults, currentTabItems?.subGroups, currentTabItems?.id, recentItems, texts.recentItemsGroupName, texts.allItemsGroupName]);
+  useEffect(() => {
+    listRef.current?.resetAfterIndex(0, false);
   }, [activeItems, listRef]);
-  var handleSearch = useCallback(function (val) {
+  const handleSearch = useCallback((val) => {
     setSearchQuery(val);
     resetList();
     onSearch && onSearch(val);
   }, [setSearchQuery, resetList, onSearch]);
-  var getTabs = useMemo(function () {
-    return (groups == null ? void 0 : groups.map(function (group) {
-      return {
-        label: group.name
-      };
+  const getTabs = useMemo(() => {
+    return groups?.map((group) => ({
+      label: group.name
     })) || [];
   }, [groups]);
-  var hasTabs = getTabs.length > 1;
-  var getNoResultContainer = useMemo(function () {
-    return /*#__PURE__*/React.createElement(Result, {
-      noSearchResults: true,
-      type: "no-results",
-      description: texts.noResults
-    });
-  }, [texts]);
-  var handleScroll = function handleScroll(_ref2) {
-    var currentTarget = _ref2.currentTarget;
-    var scrollTop = currentTarget.scrollTop;
+  const hasTabs = getTabs.length > 1;
+  const getNoResultContainer = useMemo(() => /* @__PURE__ */ jsx(Result, { noSearchResults: true, type: "no-results", description: texts.noResults }), [texts]);
+  const handleScroll = ({
+    currentTarget
+  }) => {
+    const {
+      scrollTop
+    } = currentTarget;
     if (listRef.current !== null) {
       listRef.current.scrollTo(scrollTop);
     }
   };
-  var getItemSize = function getItemSize(index) {
-    var item = activeItems[index];
+  const getItemSize = (index) => {
+    const item = activeItems[index];
     if (isListTitle(item)) {
       return ITEM_SIZE.title;
     }
@@ -257,10 +232,10 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
     }
     return menuItemHeight ? ITEM_SIZE[menuItemHeight] : ITEM_SIZE[itemSizes.DEFAULT];
   };
-  var dropdownContentHeight = useMemo(function () {
+  const dropdownContentHeight = useMemo(() => {
     return outerHeight - (hasTabs && !searchQuery ? TABS_HEIGHT : 0) - (activeGroup ? SUBGROUP_HEADER_HEIGHT : 0) - SEARCH_HEIGHT;
   }, [activeGroup, hasTabs, outerHeight, searchQuery]);
-  useEffect(function () {
+  useEffect(() => {
     if (scrollBarRef.current && listRef.current) {
       scrollBarRef.current.scrollTo({
         top: 0
@@ -268,93 +243,39 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
       listRef.current.resetAfterIndex(0);
     }
   }, [searchQuery, activeGroup, activeTab]);
-  return /*#__PURE__*/React.createElement(Dropdown.Wrapper, {
-    style: dropdownWrapperStyles,
-    ref: overlayRef,
-    onKeyDown: function onKeyDown(event) {
-      var _document;
-      if (((_document = document) == null ? void 0 : _document.activeElement) === (searchInputHandle == null ? void 0 : searchInputHandle.current)) {
-        setSearchInputFocus(false);
-      }
-      searchQuery && focusWithArrowKeys(event, classNames.split(' ')[1], function () {
-        setSearchInputFocus(true);
-      });
+  return /* @__PURE__ */ jsxs(Dropdown.Wrapper, { style: dropdownWrapperStyles, ref: overlayRef, onKeyDown: (event) => {
+    if (document?.activeElement === searchInputHandle?.current) {
+      setSearchInputFocus(false);
     }
-  }, !hideSearchField && /*#__PURE__*/React.createElement(Dropdown.SearchInput, {
-    onSearchChange: handleSearch,
-    onClearInput: function onClearInput() {
-      handleSearch('');
-      onSearch && onSearch('');
+    searchQuery && focusWithArrowKeys(event, classNames.split(" ")[1], () => {
+      setSearchInputFocus(true);
+    });
+  }, children: [
+    !hideSearchField && /* @__PURE__ */ jsx(Dropdown.SearchInput, { onSearchChange: handleSearch, onClearInput: () => {
+      handleSearch("");
+      onSearch && onSearch("");
       resetList();
-    },
-    placeholder: texts.searchPlaceholder,
-    value: searchQuery,
-    autofocus: !searchQuery || searchInputCanBeFocused,
-    autofocusDelay: 50,
-    handleInputRef: setSearchInputHandle,
-    iconLeft: /*#__PURE__*/React.createElement(Icon, {
-      component: /*#__PURE__*/React.createElement(SearchM, null),
-      color: theme.palette['grey-600']
-    })
-  }), hasTabs && /*#__PURE__*/React.createElement(S.TabsWrapper, null, /*#__PURE__*/React.createElement(Tabs, {
-    block: true,
-    tabs: getTabs,
-    activeTab: activeTab,
-    handleTabClick: function handleTabClick(index) {
+    }, placeholder: texts.searchPlaceholder, value: searchQuery, autofocus: !searchQuery || searchInputCanBeFocused, autofocusDelay: 50, handleInputRef: setSearchInputHandle, iconLeft: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(SearchM, {}), color: theme.palette["grey-600"] }) }),
+    hasTabs && /* @__PURE__ */ jsx(TabsWrapper, { children: /* @__PURE__ */ jsx(Tabs, { block: true, tabs: getTabs, activeTab, handleTabClick: (index) => {
       setActiveTab(index);
-      setActiveGroup(undefined);
+      setActiveGroup(void 0);
       resetList();
-    },
-    visible: visible
-  })), activeGroup && /*#__PURE__*/React.createElement(Dropdown.BackAction, {
-    label: activeGroup.name,
-    onClick: function onClick() {
-      return setActiveGroup(undefined);
-    }
-  }), loading ? /*#__PURE__*/React.createElement(S.Skeleton, {
-    contentHeight: dropdownContentHeight,
-    size: "M",
-    numberOfSkeletons: 3
-  }) : /*#__PURE__*/React.createElement(S.ItemsList, {
-    contentHeight: dropdownContentHeight
-  }, activeItems != null && activeItems.length ? /*#__PURE__*/React.createElement(Scrollbar, {
-    absolute: true,
-    style: {
+    }, visible }) }),
+    activeGroup && /* @__PURE__ */ jsx(Dropdown.BackAction, { label: activeGroup.name, onClick: () => setActiveGroup(void 0) }),
+    loading ? /* @__PURE__ */ jsx(Skeleton, { contentHeight: dropdownContentHeight, size: "M", numberOfSkeletons: 3 }) : /* @__PURE__ */ jsx(ItemsList, { contentHeight: dropdownContentHeight, children: activeItems?.length ? /* @__PURE__ */ jsx(Scrollbar, { absolute: true, style: {
       padding: 8
-    },
-    loading: loading,
-    hasMore: hasMoreItems,
-    onYReachEnd: onFetchData,
-    onScroll: handleScroll,
-    ref: scrollBarRef
-  }, /*#__PURE__*/React.createElement(ListContextProvider, {
-    popoverDelay: popoverDelay
-  }, /*#__PURE__*/React.createElement(VariableSizeList, {
-    className: "ds-context-selector-list",
-    key: "list-" + activeGroup + "-" + activeTab,
-    width: "100%",
-    height: 300,
-    itemCount: activeItems.length,
-    itemSize: getItemSize,
-    style: listStyle,
-    ref: listRef
-  }, function (_ref3) {
-    var index = _ref3.index,
-      style = _ref3.style;
-    var item = activeItems[index];
-    if (item && isDivider(item)) {
-      return /*#__PURE__*/React.createElement("div", {
-        style: style
-      }, /*#__PURE__*/React.createElement(Divider, {
-        marginTop: 8,
-        marginBottom: 8
-      }));
-    }
-    return item && isListTitle(item) ? /*#__PURE__*/React.createElement(S.Title, {
-      style: style
-    }, item.title) : /*#__PURE__*/React.createElement(ContextSelectorDropdownItem, _extends({
-      style: style
-    }, item));
-  }))) : getNoResultContainer));
+    }, loading, hasMore: hasMoreItems, onYReachEnd: onFetchData, onScroll: handleScroll, ref: scrollBarRef, children: /* @__PURE__ */ jsx(ListContextProvider, { popoverDelay, children: /* @__PURE__ */ jsx(VariableSizeList, { className: "ds-context-selector-list", width: "100%", height: 300, itemCount: activeItems.length, itemSize: getItemSize, style: listStyle, ref: listRef, children: ({
+      index,
+      style
+    }) => {
+      const item = activeItems[index];
+      if (item && isDivider(item)) {
+        return /* @__PURE__ */ jsx("div", { style, children: /* @__PURE__ */ jsx(Divider, { marginTop: 8, marginBottom: 8 }) });
+      }
+      return item && isListTitle(item) ? /* @__PURE__ */ jsx(Title, { style, children: item.title }) : /* @__PURE__ */ jsx(ContextSelectorDropdownItem, { style, ...item });
+    } }, `list-${activeGroup}-${activeTab}`) }) }) : getNoResultContainer })
+  ] });
+};
+export {
+  ContextSelectorDropdown as default
 };
-export default ContextSelectorDropdown;

package/dist/ContextSelectorDropdown/ContextSelectorDropdownItem.d.ts

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

package/dist/ContextSelectorDropdown/ContextSelectorDropdownItem.js

@@ -1,43 +1,30 @@
-var _excluded = ["id", "icon"];
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React from 'react';
-import { theme } from '@synerise/ds-core';
-import Icon, { CheckS } from '@synerise/ds-icon';
-import ListItem from '@synerise/ds-list-item';
-var ContextSelectorDropdownItem = function ContextSelectorDropdownItem(_ref) {
-  var item = _ref.item,
-    clearSearch = _ref.clearSearch,
-    searchQuery = _ref.searchQuery,
-    hideDropdown = _ref.hideDropdown,
-    select = _ref.select,
-    selected = _ref.selected,
-    className = _ref.className,
-    menuItemHeight = _ref.menuItemHeight,
-    style = _ref.style,
-    label = _ref.label;
-  var id = item.id,
-    _ = item.icon,
-    itemProps = _objectWithoutPropertiesLoose(item, _excluded);
-  return /*#__PURE__*/React.createElement(ListItem, _extends({
-    style: style,
-    className: className,
-    key: item.name + item.id,
-    prefixel: item.useCustomIcon ? item.icon : /*#__PURE__*/React.createElement(Icon, {
-      component: item.icon
-    }),
-    highlight: searchQuery,
-    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() {
-      clearSearch && clearSearch();
-      hideDropdown && hideDropdown();
-      select && select(item);
-    },
-    size: menuItemHeight,
-    description: item.description
-  }, itemProps), label || item.name);
+import { jsx } from "react/jsx-runtime";
+import { theme } from "@synerise/ds-core";
+import Icon, { CheckS } from "@synerise/ds-icon";
+import ListItem from "@synerise/ds-list-item";
+const ContextSelectorDropdownItem = ({
+  item,
+  clearSearch,
+  searchQuery,
+  hideDropdown,
+  select,
+  selected,
+  className,
+  menuItemHeight,
+  style,
+  label
+}) => {
+  const {
+    id,
+    icon: _,
+    ...itemProps
+  } = item;
+  return /* @__PURE__ */ jsx(ListItem, { style, className, prefixel: item.useCustomIcon ? item.icon : /* @__PURE__ */ jsx(Icon, { component: item.icon }), highlight: searchQuery, suffixel: item?.customSuffix ? item.customSuffix : selected && /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(CheckS, {}), color: theme.palette["green-600"] }), onClick: () => {
+    clearSearch && clearSearch();
+    hideDropdown && hideDropdown();
+    select && select(item);
+  }, size: menuItemHeight, description: item.description, ...itemProps, children: label || item.name }, item.name + item.id);
+};
+export {
+  ContextSelectorDropdownItem as default
 };
-export default ContextSelectorDropdownItem;

package/dist/ContextSelectorDropdown/utils.d.ts

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

package/dist/ContextSelectorDropdown/utils.js

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