@synerise/ds-context-selector 1.2.9 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dist/ContextSelector.d.ts +1 -1
  3. package/dist/ContextSelector.js +50 -43
  4. package/dist/ContextSelector.types.d.ts +4 -5
  5. package/dist/ContextSelectorDropdown/ContextSelectorDropdown.d.ts +1 -1
  6. package/dist/ContextSelectorDropdown/ContextSelectorDropdown.js +5 -18
  7. package/dist/constants.js +2 -2
  8. package/package.json +14 -15
package/CHANGELOG.md CHANGED
@@ -3,6 +3,16 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [1.3.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-context-selector@1.2.10...@synerise/ds-context-selector@1.3.0) (2026-01-20)
7
+
8
+ ### Features
9
+
10
+ - **information-card:** migrate to popover ([de900e4](https://github.com/Synerise/synerise-design/commit/de900e4bc1c32a4bbbf175401374619e691023f2))
11
+
12
+ ## [1.2.10](https://github.com/Synerise/synerise-design/compare/@synerise/ds-context-selector@1.2.9...@synerise/ds-context-selector@1.2.10) (2026-01-15)
13
+
14
+ **Note:** Version bump only for package @synerise/ds-context-selector
15
+
6
16
  ## [1.2.9](https://github.com/Synerise/synerise-design/compare/@synerise/ds-context-selector@1.2.8...@synerise/ds-context-selector@1.2.9) (2026-01-12)
7
17
 
8
18
  **Note:** Version bump only for package @synerise/ds-context-selector
package/dist/ContextSelector.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import React from 'react';
2
2
  import { type ContextProps } from './ContextSelector.types';
3
- declare const ContextSelector: ({ defaultDropdownVisibility, selectedItem, onSelectItem, onSetGroup, groups, items, recentItems, texts, opened, addMode, loading, customTriggerComponent, trigger, menuItemHeight, dropdownWrapperStyles, onClickOutsideEvents, onClickOutside, onSearch, hideSearchField, hasMoreItems, onFetchData, onActivate, onDeactivate, onOpen, getPopupContainerOverride, type, dropdownProps, disabled, errorText, isError, readOnly, getMenuEntryProps, dropdownDimensionsConfig, }: ContextProps) => React.JSX.Element;
3
+ declare const ContextSelector: ({ defaultDropdownVisibility, selectedItem, onSelectItem, onSetGroup, groups, items, recentItems, texts, opened, addMode, loading, customTriggerComponent, trigger, menuItemHeight, dropdownWrapperStyles, onClickOutsideEvents, onClickOutside, onSearch, hideSearchField, hasMoreItems, onFetchData, onActivate, onDeactivate, onOpen, getPopupContainerOverride, type, dropdownProps, disabled, errorText, isError, readOnly, popoverDelay, dropdownDimensionsConfig, }: ContextProps) => React.JSX.Element;
4
4
  export default ContextSelector;
package/dist/ContextSelector.js CHANGED
@@ -3,8 +3,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
3
3
  import Button from '@synerise/ds-button';
4
4
  import Dropdown from '@synerise/ds-dropdown';
5
5
  import Icon, { Add3M, AngleDownS } from '@synerise/ds-icon';
6
- import InformationCard from '@synerise/ds-information-card';
7
- import Menu from '@synerise/ds-menu';
6
+ import InformationCard, { InformationCardTooltip } from '@synerise/ds-information-card';
8
7
  import { getClosest, getPopupContainer } from '@synerise/ds-utils';
9
8
  import { ErrorWrapper, ItemWrapper } from './ContextSelector.styles';
10
9
  import ContextSelectorDropdown from './ContextSelectorDropdown/ContextSelectorDropdown';
@@ -45,7 +44,7 @@ var ContextSelector = function ContextSelector(_ref) {
45
44
  isError = _ref.isError,
46
45
  _ref$readOnly = _ref.readOnly,
47
46
  readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
48
- getMenuEntryProps = _ref.getMenuEntryProps,
47
+ popoverDelay = _ref.popoverDelay,
49
48
  dropdownDimensionsConfig = _ref.dropdownDimensionsConfig;
50
49
  var allTexts = useTexts(texts);
51
50
  var _useState = useState(defaultDropdownVisibility != null ? defaultDropdownVisibility : false),
@@ -100,10 +99,23 @@ var ContextSelector = function ContextSelector(_ref) {
100
99
  onOpen && onOpen();
101
100
  setDropdownVisible(true);
102
101
  }, [onOpen]);
102
+ var selectedItemInfoCard = useMemo(function () {
103
+ return selectedItem && ((selectedItem.renderHoverTooltip == null ? void 0 : selectedItem.renderHoverTooltip()) || /*#__PURE__*/React.createElement(InformationCard, _extends({
104
+ icon: selectedItem.icon,
105
+ subtitle: selectedItem.subtitle,
106
+ title: selectedItem.name,
107
+ renderAdditionalDescription: selectedItem.renderAdditionalDescription,
108
+ descriptionConfig: selectedItem.description ? {
109
+ value: selectedItem.description,
110
+ disabled: true,
111
+ label: undefined
112
+ } : undefined
113
+ }, selectedItem.informationCardProps)));
114
+ }, [selectedItem]);
103
115
  var triggerButton = useMemo(function () {
104
116
  var buttonLabel = allTexts.buttonLabel;
105
117
  var hasError = Boolean(errorText) || isError;
106
- return addMode && !selectedItem ? /*#__PURE__*/React.createElement(Button, {
118
+ var addModeButton = /*#__PURE__*/React.createElement(Button, {
107
119
  error: hasError,
108
120
  disabled: disabled,
109
121
  type: "primary",
@@ -112,44 +124,38 @@ var ContextSelector = function ContextSelector(_ref) {
112
124
  readOnly: readOnly
113
125
  }, /*#__PURE__*/React.createElement(Icon, {
114
126
  component: /*#__PURE__*/React.createElement(Add3M, null)
115
- }), buttonLabel) : /*#__PURE__*/React.createElement(Menu, {
116
- asDropdownMenu: true,
117
- showTextTooltip: true,
118
- asInfoCardContainer: true,
119
- dataSource: [_extends({
120
- text: /*#__PURE__*/React.createElement(Button, {
121
- error: hasError,
122
- disabled: disabled,
123
- type: "custom-color",
124
- color: triggerColor,
125
- mode: triggerMode,
126
- onClick: !readOnly ? handleClick : undefined,
127
- readOnly: readOnly
128
- }, selectedItem ? /*#__PURE__*/React.createElement(Icon, {
129
- component: selectedItem.icon
130
- }) : null, /*#__PURE__*/React.createElement(ItemWrapper, null, selectedItem ? selectedItem.name : buttonLabel), !readOnly && /*#__PURE__*/React.createElement(Icon, {
131
- component: /*#__PURE__*/React.createElement(AngleDownS, null)
132
- })),
133
- hoverTooltipProps: {
134
- popupPlacement: 'top',
135
- getPopupContainer: getPopupContainerOverride || getPopupContainer
136
- },
137
- renderHoverTooltip: selectedItem ? selectedItem.renderHoverTooltip || function () {
138
- return /*#__PURE__*/React.createElement(InformationCard, _extends({
139
- icon: selectedItem.icon,
140
- subtitle: selectedItem.subtitle,
141
- title: selectedItem.name,
142
- renderAdditionalDescription: selectedItem.renderAdditionalDescription,
143
- descriptionConfig: selectedItem.description ? {
144
- value: selectedItem.description,
145
- disabled: true,
146
- label: undefined
147
- } : undefined
148
- }, selectedItem.informationCardProps));
149
- } : undefined
150
- }, getMenuEntryProps == null ? void 0 : getMenuEntryProps(selectedItem))]
151
- });
152
- }, [allTexts, errorText, isError, addMode, selectedItem, disabled, readOnly, handleClick, triggerColor, triggerMode, getPopupContainerOverride, getMenuEntryProps]);
127
+ }), buttonLabel);
128
+ var standardButton = selectedItem ? /*#__PURE__*/React.createElement(InformationCardTooltip, {
129
+ content: selectedItemInfoCard,
130
+ popoverProps: {
131
+ placement: 'top',
132
+ getPopupContainer: getPopupContainerOverride || getPopupContainer
133
+ }
134
+ }, /*#__PURE__*/React.createElement(Button, {
135
+ error: hasError,
136
+ disabled: disabled,
137
+ type: "custom-color",
138
+ color: triggerColor,
139
+ mode: triggerMode,
140
+ onClick: !readOnly ? handleClick : undefined,
141
+ readOnly: readOnly
142
+ }, /*#__PURE__*/React.createElement(Icon, {
143
+ component: selectedItem.icon
144
+ }), /*#__PURE__*/React.createElement(ItemWrapper, null, selectedItem.name), !readOnly && /*#__PURE__*/React.createElement(Icon, {
145
+ component: /*#__PURE__*/React.createElement(AngleDownS, null)
146
+ }))) : /*#__PURE__*/React.createElement(Button, {
147
+ error: hasError,
148
+ disabled: disabled,
149
+ type: "custom-color",
150
+ color: triggerColor,
151
+ mode: triggerMode,
152
+ onClick: !readOnly ? handleClick : undefined,
153
+ readOnly: readOnly
154
+ }, /*#__PURE__*/React.createElement(ItemWrapper, null, buttonLabel), !readOnly && /*#__PURE__*/React.createElement(Icon, {
155
+ component: /*#__PURE__*/React.createElement(AngleDownS, null)
156
+ }));
157
+ return addMode && !selectedItem ? addModeButton : standardButton;
158
+ }, [allTexts, errorText, isError, disabled, readOnly, handleClick, selectedItem, selectedItemInfoCard, getPopupContainerOverride, triggerColor, triggerMode, addMode]);
153
159
  var onDropdownVisibilityChange = useCallback(function (value) {
154
160
  if (value) {
155
161
  onActivate && onActivate('');
@@ -204,7 +210,8 @@ var ContextSelector = function ContextSelector(_ref) {
204
210
  hideSearchField: hideSearchField,
205
211
  hasMoreItems: hasMoreItems,
206
212
  onFetchData: onFetchData,
207
- outerHeight: outerHeight
213
+ outerHeight: outerHeight,
214
+ popoverDelay: popoverDelay
208
215
  })
209
216
  }), customTriggerComponent != null ? customTriggerComponent : triggerButton)), errorText && /*#__PURE__*/React.createElement(ErrorWrapper, null, errorText));
210
217
  };
package/dist/ContextSelector.types.d.ts CHANGED
@@ -1,9 +1,8 @@
1
1
  import type { CSSProperties, ReactNode, ReactText } from 'react';
2
2
  import type { DropdownSharedProps } from '@synerise/ds-dropdown';
3
- import type { FactorsProps } from '@synerise/ds-factors';
4
3
  import type { InformationCardProps } from '@synerise/ds-information-card';
5
4
  import type { ItemSize, ListItemProps } from '@synerise/ds-list-item';
6
- import { type PopoverTriggerType } from '@synerise/ds-popover';
5
+ import { type DelayConfig, type PopoverTriggerType } from '@synerise/ds-popover';
7
6
  import type { HandledEventsType } from '@synerise/ds-utils';
8
7
  export type ContextTexts = {
9
8
  buttonLabel: ReactNode;
@@ -17,7 +16,7 @@ export type ContextTexts = {
17
16
  recentItemsGroupName: string;
18
17
  allItemsGroupName: string;
19
18
  };
20
- export type ContextItem = Pick<ListItemProps, 'renderHoverTooltip' | 'hoverTooltipProps' | 'disabled'> & {
19
+ export type ContextItem = Pick<ListItemProps, 'renderHoverTooltip' | 'popoverProps' | 'disabled'> & {
21
20
  id: ReactText | null;
22
21
  name: string;
23
22
  icon: ReactNode;
@@ -81,14 +80,14 @@ export type ContextProps = {
81
80
  dropdownProps?: Omit<DropdownSharedProps, 'trigger' | 'getPopupContainer' | 'overlay' | 'children'>;
82
81
  errorText?: ReactNode;
83
82
  isError?: boolean;
84
- getMenuEntryProps?: FactorsProps['getMenuEntryProps'];
85
83
  dropdownDimensionsConfig?: {
86
84
  defaultHeight?: number;
87
85
  lowerHeight?: number;
88
86
  threshold?: number;
89
87
  };
88
+ popoverDelay?: DelayConfig;
90
89
  };
91
- export type ContextDropdownProps = Pick<ContextProps, 'onDeactivate'> & {
90
+ export type ContextDropdownProps = Pick<ContextProps, 'onDeactivate' | 'popoverDelay'> & {
92
91
  setDropdownVisible: (show: boolean) => void;
93
92
  setSelected: (val: ContextItem | ContextGroup) => void;
94
93
  groups: ContextGroup[];
package/dist/ContextSelectorDropdown/ContextSelectorDropdown.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import React from 'react';
2
2
  import { type ContextDropdownProps } from '../ContextSelector.types';
3
- declare const ContextSelectorDropdown: ({ texts, setSelected, onSetGroup, groups, items, recentItems, setDropdownVisible, value, visible, hideSearchField, loading, menuItemHeight, dropdownWrapperStyles, onSearch, onFetchData, hasMoreItems, outerHeight, maxSearchResultsInGroup, }: ContextDropdownProps) => React.JSX.Element;
3
+ declare const ContextSelectorDropdown: ({ texts, setSelected, onSetGroup, groups, items, recentItems, setDropdownVisible, value, visible, hideSearchField, loading, menuItemHeight, dropdownWrapperStyles, onSearch, onFetchData, hasMoreItems, outerHeight, popoverDelay, maxSearchResultsInGroup, }: ContextDropdownProps) => React.JSX.Element;
4
4
  export default ContextSelectorDropdown;
package/dist/ContextSelectorDropdown/ContextSelectorDropdown.js CHANGED
@@ -7,7 +7,7 @@ import { theme } from '@synerise/ds-core';
7
7
  import Divider from '@synerise/ds-divider';
8
8
  import Dropdown from '@synerise/ds-dropdown';
9
9
  import Icon, { ArrowRightCircleM, SearchM } from '@synerise/ds-icon';
10
- import { itemSizes } from '@synerise/ds-list-item';
10
+ import { ListContextProvider, itemSizes } from '@synerise/ds-list-item';
11
11
  import Result from '@synerise/ds-result';
12
12
  import Scrollbar from '@synerise/ds-scrollbar';
13
13
  import Tabs from '@synerise/ds-tabs';
@@ -41,6 +41,7 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
41
41
  hasMoreItems = _ref.hasMoreItems,
42
42
  _ref$outerHeight = _ref.outerHeight,
43
43
  outerHeight = _ref$outerHeight === void 0 ? DROPDOWN_HEIGHT : _ref$outerHeight,
44
+ popoverDelay = _ref.popoverDelay,
44
45
  _ref$maxSearchResults = _ref.maxSearchResultsInGroup,
45
46
  maxSearchResultsInGroup = _ref$maxSearchResults === void 0 ? 4 : _ref$maxSearchResults;
46
47
  var listStyle = {
@@ -86,22 +87,6 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
86
87
  resetList();
87
88
  }
88
89
  }, [onSetGroup, setActiveGroup, resetList]);
89
-
90
- // useOnClickOutside(
91
- // overlayRef,
92
- // (event) => {
93
- // if (getClosest(event.target as HTMLElement, '.ds-info-card') === null) {
94
- // onClickOutside && onClickOutside();
95
- // setDropdownVisible(false);
96
- // console.log('useonclickoutside context selector');
97
- // onDeactivate?.();
98
- // TODO:
99
- // resetList();
100
- // }
101
- // },
102
- // onClickOutsideEvents,
103
- // );
104
-
105
90
  var clearSearch = useCallback(function () {
106
91
  setSearchQuery('');
107
92
  resetList();
@@ -342,6 +327,8 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
342
327
  onYReachEnd: onFetchData,
343
328
  onScroll: handleScroll,
344
329
  ref: scrollBarRef
330
+ }, /*#__PURE__*/React.createElement(ListContextProvider, {
331
+ popoverDelay: popoverDelay
345
332
  }, /*#__PURE__*/React.createElement(VariableSizeList, {
346
333
  className: "ds-context-selector-list",
347
334
  key: "list-" + activeGroup + "-" + activeTab,
@@ -368,6 +355,6 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
368
355
  }, item.title) : /*#__PURE__*/React.createElement(ContextSelectorDropdownItem, _extends({
369
356
  style: style
370
357
  }, item));
371
- })) : getNoResultContainer));
358
+ }))) : getNoResultContainer));
372
359
  };
373
360
  export default ContextSelectorDropdown;
package/dist/constants.js CHANGED
@@ -1,7 +1,7 @@
1
1
  var _ITEM_SIZE;
2
- import { ItemSize } from '@synerise/ds-menu';
2
+ import { itemSizes } from '@synerise/ds-list-item';
3
3
  export var NO_GROUP_NAME = 'NO_GROUP_NAME';
4
- export var ITEM_SIZE = (_ITEM_SIZE = {}, _ITEM_SIZE[ItemSize.LARGE] = 50, _ITEM_SIZE[ItemSize.DEFAULT] = 32, _ITEM_SIZE.title = 32, _ITEM_SIZE);
4
+ export var ITEM_SIZE = (_ITEM_SIZE = {}, _ITEM_SIZE[itemSizes.LARGE] = 50, _ITEM_SIZE[itemSizes.DEFAULT] = 32, _ITEM_SIZE.title = 32, _ITEM_SIZE);
5
5
  export var DROPDOWN_HEIGHT = 420;
6
6
  export var DROPDOWN_HEIGHT_BELOW_THRESHOLD = 350;
7
7
  export var DROPDOWN_HEIGHT_THRESHOLD = 900;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-context-selector",
3
- "version": "1.2.9",
3
+ "version": "1.3.0",
4
4
  "description": "ContextSelector UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -29,26 +29,25 @@
29
29
  "check:circular-dependencies": "madge --circular --extensions ts,tsx,js,jsx --ts-config tsconfig.json src/ --exclude '/dist/'",
30
30
  "upgrade:ds": "ncu -f \"@synerise/ds-*\" -u"
31
31
  },
32
- "gitHead": "70a5256c87ef38313eedb9a004d1c6980082b2f5",
32
+ "gitHead": "db758824923a2a231a0de460f0d6d10739514cda",
33
33
  "sideEffects": [
34
34
  "dist/style/*",
35
35
  "*.less"
36
36
  ],
37
37
  "types": "dist/index.d.ts",
38
38
  "dependencies": {
39
- "@synerise/ds-button": "^1.5.4",
40
- "@synerise/ds-divider": "^1.2.5",
41
- "@synerise/ds-dropdown": "^1.1.7",
42
- "@synerise/ds-factors": "^1.7.6",
43
- "@synerise/ds-icon": "^1.9.3",
44
- "@synerise/ds-information-card": "^1.3.8",
45
- "@synerise/ds-list-item": "^1.2.5",
46
- "@synerise/ds-menu": "^1.2.4",
47
- "@synerise/ds-popover": "^1.2.0",
48
- "@synerise/ds-result": "^1.0.34",
49
- "@synerise/ds-scrollbar": "^1.2.4",
50
- "@synerise/ds-skeleton": "^1.0.29",
51
- "@synerise/ds-tabs": "^1.1.7",
39
+ "@synerise/ds-button": "^1.5.5",
40
+ "@synerise/ds-divider": "^1.2.6",
41
+ "@synerise/ds-dropdown": "^1.1.9",
42
+ "@synerise/ds-factors": "^1.8.0",
43
+ "@synerise/ds-icon": "^1.10.0",
44
+ "@synerise/ds-information-card": "^1.4.0",
45
+ "@synerise/ds-list-item": "^1.3.0",
46
+ "@synerise/ds-popover": "^1.3.0",
47
+ "@synerise/ds-result": "^1.0.35",
48
+ "@synerise/ds-scrollbar": "^1.2.5",
49
+ "@synerise/ds-skeleton": "^1.0.30",
50
+ "@synerise/ds-tabs": "^1.1.9",
52
51
  "@synerise/ds-utils": "^1.5.3",
53
52
  "react-window": "1.8.11",
54
53
  "uuid": "^8.3.2"