@synerise/ds-context-selector 0.25.9 → 0.25.11

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.25.11](https://github.com/Synerise/synerise-design/compare/@synerise/ds-context-selector@0.25.10...@synerise/ds-context-selector@0.25.11) (2024-10-28)
+
+**Note:** Version bump only for package @synerise/ds-context-selector
+
+
+
+
+
+## [0.25.10](https://github.com/Synerise/synerise-design/compare/@synerise/ds-context-selector@0.25.9...@synerise/ds-context-selector@0.25.10) (2024-10-24)
+
+**Note:** Version bump only for package @synerise/ds-context-selector
+
+
+
+
+
 ## [0.25.9](https://github.com/Synerise/synerise-design/compare/@synerise/ds-context-selector@0.25.8...@synerise/ds-context-selector@0.25.9) (2024-10-23)
 
 **Note:** Version bump only for package @synerise/ds-context-selector

package/dist/ContextSelector.types.d.ts

@@ -24,6 +24,8 @@ export type ContextItem = Pick<ListItemProps, 'renderHoverTooltip' | 'hoverToolt
     subGroups?: ContextGroup[];
     useCustomIcon?: boolean;
     subtitle?: string;
+    value?: ReactText | null;
+    excludeFromSearchResults?: boolean;
     informationCardProps?: Partial<InformationCardProps>;
     renderAdditionalDescription?: () => ReactNode;
 };
@@ -119,4 +121,7 @@ export type ListTitle = {
     title?: string;
     type?: string;
 };
+export type ListDivider = {
+    type: 'divider';
+};
 export type DropdownItemProps = ListTitle | ContextSelectorDropdownItemProps;

package/dist/ContextSelectorDropdown/ContextSelectorDropdown.js

@@ -1,3 +1,5 @@
+var _ITEM_SIZE;
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
@@ -15,12 +17,18 @@ import Tabs from '@synerise/ds-tabs';
 import { focusWithArrowKeys, getClosest, useOnClickOutside, useSearchResults, getActiveTabGroup, getGroupName } from '@synerise/ds-utils';
 import Result from '@synerise/ds-result';
 import Scrollbar from '@synerise/ds-scrollbar';
+import Divider from '@synerise/ds-divider';
 import { theme } from '@synerise/ds-core';
 import { itemSizes } from '@synerise/ds-list-item';
 import * as S from '../ContextSelector.styles';
 import ContextSelectorDropdownItem from './ContextSelectorDropdownItem';
-import { NO_GROUP_NAME, ITEM_SIZE, DROPDOWN_HEIGHT, TABS_HEIGHT, SUBGROUP_HEADER_HEIGHT, SEARCH_HEIGHT } from '../constants';
+import { NO_GROUP_NAME, DROPDOWN_HEIGHT, TABS_HEIGHT, SUBGROUP_HEADER_HEIGHT, SEARCH_HEIGHT } from '../constants';
 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);
+
+function isDivider(element) {
+  return element.type === 'divider';
+}
 
 var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
   var texts = _ref.texts,
@@ -83,21 +91,29 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
   var classNames = useMemo(function () {
     return "ds-context-item ds-context-item-" + uuid();
   }, []);
+  var resetList = useCallback(function () {
+    if (listRef.current) {
+      listRef.current.resetAfterIndex(0, false);
+    }
+  }, [listRef]);
   var handleOnSetGroup = useCallback(function (item) {
     if (isGroup(item)) {
       onSetGroup && onSetGroup(item);
       setActiveGroup(item);
+      resetList();
     }
-  }, [onSetGroup]);
+  }, [onSetGroup, setActiveGroup, resetList]);
   useOnClickOutside(overlayRef, function (event) {
     if (getClosest(event.target, '.ds-info-card') === null) {
       onClickOutside && onClickOutside();
       setDropdownVisible(false);
+      resetList();
     }
   }, onClickOutsideEvents);
   var clearSearch = useCallback(function () {
     setSearchQuery('');
-  }, []);
+    resetList();
+  }, [setSearchQuery, resetList]);
   var hideDropdown = useCallback(function () {
     setDropdownVisible(false);
   }, [setDropdownVisible]);
@@ -123,7 +139,13 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
     }
 
     var resultItems = [];
-    Object.keys(groupedItems).forEach(function (key) {
+    Object.keys(groupedItems).forEach(function (key, index) {
+      if (index > 0) {
+        resultItems.push({
+          type: 'divider'
+        });
+      }
+
       if (key !== NO_GROUP_NAME && !activeGroup) {
         resultItems.push({
           type: 'title',
@@ -239,8 +261,9 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
   }, [activeItems, listRef]);
   var handleSearch = useCallback(function (val) {
     setSearchQuery(val);
+    resetList();
     onSearch && onSearch(val);
-  }, [onSearch]);
+  }, [setSearchQuery, resetList, onSearch]);
   var getTabs = useMemo(function () {
     return (groups == null ? void 0 : groups.map(function (group) {
       return {
@@ -269,6 +292,7 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
   var getItemSize = function getItemSize(index) {
     var item = activeItems[index];
     if (isListTitle(item)) return ITEM_SIZE.title;
+    if (isDivider(item)) return ITEM_SIZE.divider;
     return menuItemHeight ? ITEM_SIZE[menuItemHeight] : ITEM_SIZE[itemSizes.DEFAULT];
   };
 
@@ -304,6 +328,7 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
     onClearInput: function onClearInput() {
       handleSearch('');
       onSearch && onSearch('');
+      resetList();
     },
     placeholder: texts.searchPlaceholder,
     value: searchQuery,
@@ -323,6 +348,7 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
     handleTabClick: function handleTabClick(index) {
       setActiveTab(index);
       setActiveGroup(undefined);
+      resetList();
     },
     visible: visible
   })), activeGroup && /*#__PURE__*/React.createElement(Dropdown.BackAction, {
@@ -359,6 +385,16 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
     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({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-context-selector",
-  "version": "0.25.9",
+  "version": "0.25.11",
   "description": "ContextSelector UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -28,25 +28,26 @@
     "types": "tsc --noEmit",
     "upgrade:ds": "ncu -f \"@synerise/ds-*\" -u"
   },
-  "gitHead": "c45f411bd0eac69ae70b6c948da1c530539b01d6",
+  "gitHead": "fbadaa2299668c527b52ecc66d61fc2165528bff",
   "sideEffects": [
     "dist/style/*",
     "*.less"
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^0.21.14",
-    "@synerise/ds-dropdown": "^0.18.19",
-    "@synerise/ds-factors": "^0.26.2",
-    "@synerise/ds-icon": "^0.66.0",
-    "@synerise/ds-information-card": "^0.5.15",
-    "@synerise/ds-list-item": "^0.4.14",
-    "@synerise/ds-menu": "^0.20.1",
-    "@synerise/ds-result": "^0.7.9",
-    "@synerise/ds-scrollbar": "^0.11.14",
-    "@synerise/ds-skeleton": "^0.6.13",
-    "@synerise/ds-tabs": "^0.17.2",
-    "@synerise/ds-utils": "^0.30.0",
+    "@synerise/ds-button": "^0.21.15",
+    "@synerise/ds-divider": "^0.7.11",
+    "@synerise/ds-dropdown": "^0.18.20",
+    "@synerise/ds-factors": "^0.26.4",
+    "@synerise/ds-icon": "^0.66.1",
+    "@synerise/ds-information-card": "^0.5.16",
+    "@synerise/ds-list-item": "^0.4.15",
+    "@synerise/ds-menu": "^0.20.2",
+    "@synerise/ds-result": "^0.7.10",
+    "@synerise/ds-scrollbar": "^0.11.15",
+    "@synerise/ds-skeleton": "^0.6.14",
+    "@synerise/ds-tabs": "^0.17.3",
+    "@synerise/ds-utils": "^0.30.1",
     "react-window": "1.8.5",
     "uuid": "^8.3.2"
   },