@synerise/ds-context-selector 1.1.44 → 1.2.1

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 (7) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/README.md +1 -1
  3. package/dist/ContextSelector.js +24 -8
  4. package/dist/ContextSelector.types.d.ts +5 -4
  5. package/dist/ContextSelectorDropdown/ContextSelectorDropdown.d.ts +1 -1
  6. package/dist/ContextSelectorDropdown/ContextSelectorDropdown.js +18 -13
  7. package/package.json +14 -14
package/CHANGELOG.md CHANGED
@@ -3,6 +3,25 @@
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.2.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-context-selector@1.2.0...@synerise/ds-context-selector@1.2.1) (2025-11-13)
7
+
8
+ **Note:** Version bump only for package @synerise/ds-context-selector
9
+
10
+
11
+
12
+
13
+
14
+ # [1.2.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-context-selector@1.1.44...@synerise/ds-context-selector@1.2.0) (2025-11-06)
15
+
16
+
17
+ ### Features
18
+
19
+ * **dropdown:** dropdownMenu component ([f0ec827](https://github.com/Synerise/synerise-design/commit/f0ec82792cdcb021fa9a454912f6e7a892e53895))
20
+
21
+
22
+
23
+
24
+
6
25
  ## [1.1.44](https://github.com/Synerise/synerise-design/compare/@synerise/ds-context-selector@1.1.43...@synerise/ds-context-selector@1.1.44) (2025-10-31)
7
26
 
8
27
  **Note:** Version bump only for package @synerise/ds-context-selector
package/README.md CHANGED
@@ -95,7 +95,7 @@ import ContextSelector from '@synerise/ds-context-selector'
95
95
  | selectedItem | Selected item | ContextItem \ undefined | undefined |
96
96
  | addMode | If true trigger doesn't change style when value is set | ContextItem \ undefined | undefined |
97
97
  | customTriggerComponent | Add custom trigger | React.ReactNode | undefined |
98
- | trigger | Add custom trigger to modal | 'click' \ 'hover' \ 'contextMenu' | 'click |
98
+ | trigger | Add custom trigger to modal | 'click' \ 'hover' | 'click |
99
99
  | getMenuEntryProps | Configure tooltip (information-card by default) | (arg: ParameterValueType) => MenuItemProps \ undefined | undefined |
100
100
  | dropdownWrapperStyles | Apply custom styles to dropdown wrapper | CSSProperties \ undefined | - |
101
101
  | onClickOutsideEvents | Overwrite default events for document listener | HandledEventsType[] \ undefined | - |
package/dist/ContextSelector.js CHANGED
@@ -5,7 +5,7 @@ import Dropdown from '@synerise/ds-dropdown';
5
5
  import Icon, { Add3M, AngleDownS } from '@synerise/ds-icon';
6
6
  import InformationCard from '@synerise/ds-information-card';
7
7
  import Menu from '@synerise/ds-menu';
8
- import { getPopupContainer } from '@synerise/ds-utils';
8
+ import { getClosest, getPopupContainer } from '@synerise/ds-utils';
9
9
  import { ErrorWrapper, ItemWrapper } from './ContextSelector.styles';
10
10
  import ContextSelectorDropdown from './ContextSelectorDropdown/ContextSelectorDropdown';
11
11
  import { DROPDOWN_HEIGHT, DROPDOWN_HEIGHT_BELOW_THRESHOLD, DROPDOWN_HEIGHT_THRESHOLD } from './constants';
@@ -103,7 +103,7 @@ var ContextSelector = function ContextSelector(_ref) {
103
103
  var triggerButton = useMemo(function () {
104
104
  var buttonLabel = allTexts.buttonLabel;
105
105
  var hasError = Boolean(errorText) || isError;
106
- return addMode && !selectedItem ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
106
+ return addMode && !selectedItem ? /*#__PURE__*/React.createElement(Button, {
107
107
  error: hasError,
108
108
  disabled: disabled,
109
109
  type: "primary",
@@ -112,7 +112,7 @@ var ContextSelector = function ContextSelector(_ref) {
112
112
  readOnly: readOnly
113
113
  }, /*#__PURE__*/React.createElement(Icon, {
114
114
  component: /*#__PURE__*/React.createElement(Add3M, null)
115
- }), buttonLabel)) : /*#__PURE__*/React.createElement(Menu, {
115
+ }), buttonLabel) : /*#__PURE__*/React.createElement(Menu, {
116
116
  asDropdownMenu: true,
117
117
  showTextTooltip: true,
118
118
  asInfoCardContainer: true,
@@ -155,22 +155,38 @@ var ContextSelector = function ContextSelector(_ref) {
155
155
  onActivate && onActivate('');
156
156
  setDropdownVisible(true);
157
157
  } else {
158
- onDeactivate && onDeactivate();
159
158
  setDropdownVisible(false);
160
159
  }
161
- }, [onActivate, onDeactivate]);
160
+ }, [onActivate]);
162
161
  if (readOnly) {
163
162
  return /*#__PURE__*/React.createElement(React.Fragment, null, customTriggerComponent != null ? customTriggerComponent : triggerButton);
164
163
  }
165
164
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
166
165
  "data-popup-container": true
167
- }, /*#__PURE__*/React.createElement(Dropdown, _extends({}, dropdownProps, {
166
+ }, /*#__PURE__*/React.createElement(Dropdown, _extends({
168
167
  getPopupContainer: getPopupContainerOverride || getPopupContainer,
169
- onVisibleChange: onDropdownVisibilityChange,
168
+ onOpenChange: onDropdownVisibilityChange,
169
+ onDismiss: function onDismiss() {
170
+ onClickOutside && onClickOutside();
171
+ // TODO resetList();
172
+ onDeactivate == null || onDeactivate();
173
+ },
170
174
  trigger: trigger,
171
- visible: dropdownVisible,
175
+ open: dropdownVisible,
176
+ size: "medium"
177
+ }, dropdownProps, {
178
+ popoverProps: _extends({
179
+ testId: 'context-selector'
180
+ }, dropdownProps == null ? void 0 : dropdownProps.popoverProps, {
181
+ dismissConfig: {
182
+ outsidePress: function outsidePress(event) {
183
+ return getClosest(event.target, '.ds-info-card') === null;
184
+ }
185
+ }
186
+ }),
172
187
  overlay: /*#__PURE__*/React.createElement(ContextSelectorDropdown, {
173
188
  value: selectedItem,
189
+ onDeactivate: onDeactivate,
174
190
  setDropdownVisible: setDropdownVisible,
175
191
  setSelected: handleChange,
176
192
  onSetGroup: handleOnSetGroup,
package/dist/ContextSelector.types.d.ts CHANGED
@@ -1,8 +1,9 @@
1
1
  import type { CSSProperties, ReactNode, ReactText } from 'react';
2
- import type { DropdownProps } from '@synerise/ds-dropdown';
2
+ import type { DropdownSharedProps } from '@synerise/ds-dropdown';
3
3
  import type { FactorsProps } from '@synerise/ds-factors';
4
4
  import type { InformationCardProps } from '@synerise/ds-information-card';
5
5
  import type { ItemSize, ListItemProps } from '@synerise/ds-list-item';
6
+ import { type PopoverTriggerType } from '@synerise/ds-popover';
6
7
  import type { HandledEventsType } from '@synerise/ds-utils';
7
8
  export type ContextTexts = {
8
9
  buttonLabel: ReactNode;
@@ -66,7 +67,7 @@ export type ContextProps = {
66
67
  addMode?: boolean;
67
68
  loading?: boolean;
68
69
  customTriggerComponent?: ReactNode;
69
- trigger?: ('click' | 'hover' | 'contextMenu')[];
70
+ trigger?: PopoverTriggerType | PopoverTriggerType[];
70
71
  menuItemHeight?: ItemSize;
71
72
  dropdownWrapperStyles?: CSSProperties;
72
73
  onClickOutsideEvents?: HandledEventsType[];
@@ -77,7 +78,7 @@ export type ContextProps = {
77
78
  onOpen?: () => void;
78
79
  hasMoreItems?: boolean;
79
80
  type?: 'default' | 'attribute' | 'event';
80
- dropdownProps?: Omit<DropdownProps, 'trigger' | 'getPopupContainer' | 'onVisibleChange' | 'visible' | 'overlay'>;
81
+ dropdownProps?: Omit<DropdownSharedProps, 'trigger' | 'getPopupContainer' | 'overlay' | 'children'>;
81
82
  errorText?: ReactNode;
82
83
  isError?: boolean;
83
84
  getMenuEntryProps?: FactorsProps['getMenuEntryProps'];
@@ -87,7 +88,7 @@ export type ContextProps = {
87
88
  threshold?: number;
88
89
  };
89
90
  };
90
- export type ContextDropdownProps = {
91
+ export type ContextDropdownProps = Pick<ContextProps, 'onDeactivate'> & {
91
92
  setDropdownVisible: (show: boolean) => void;
92
93
  setSelected: (val: ContextItem | ContextGroup) => void;
93
94
  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, onClickOutsideEvents, onClickOutside, 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, maxSearchResultsInGroup, }: ContextDropdownProps) => React.JSX.Element;
4
4
  export default ContextSelectorDropdown;
package/dist/ContextSelectorDropdown/ContextSelectorDropdown.js CHANGED
@@ -11,7 +11,7 @@ import { 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';
14
- import { focusWithArrowKeys, getActiveTabGroup, getClosest, getGroupName, useOnClickOutside, useSearchResults } from '@synerise/ds-utils';
14
+ import { focusWithArrowKeys, getActiveTabGroup, getGroupName, useSearchResults } from '@synerise/ds-utils';
15
15
  import * as S from '../ContextSelector.styles';
16
16
  import { isContextItemsInSubGroup } from '../ContextSelector.types';
17
17
  import { DROPDOWN_HEIGHT, NO_GROUP_NAME, SEARCH_HEIGHT, SUBGROUP_HEADER_HEIGHT, TABS_HEIGHT } from '../constants';
@@ -36,8 +36,6 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
36
36
  loading = _ref.loading,
37
37
  menuItemHeight = _ref.menuItemHeight,
38
38
  dropdownWrapperStyles = _ref.dropdownWrapperStyles,
39
- onClickOutsideEvents = _ref.onClickOutsideEvents,
40
- onClickOutside = _ref.onClickOutside,
41
39
  onSearch = _ref.onSearch,
42
40
  onFetchData = _ref.onFetchData,
43
41
  hasMoreItems = _ref.hasMoreItems,
@@ -88,13 +86,22 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
88
86
  resetList();
89
87
  }
90
88
  }, [onSetGroup, setActiveGroup, resetList]);
91
- useOnClickOutside(overlayRef, function (event) {
92
- if (getClosest(event.target, '.ds-info-card') === null) {
93
- onClickOutside && onClickOutside();
94
- setDropdownVisible(false);
95
- resetList();
96
- }
97
- }, onClickOutsideEvents);
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
+
98
105
  var clearSearch = useCallback(function () {
99
106
  setSearchQuery('');
100
107
  resetList();
@@ -277,9 +284,7 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
277
284
  }
278
285
  }, [searchQuery, activeGroup, activeTab]);
279
286
  return /*#__PURE__*/React.createElement(Dropdown.Wrapper, {
280
- style: _extends({
281
- width: '300px'
282
- }, dropdownWrapperStyles),
287
+ style: dropdownWrapperStyles,
283
288
  ref: overlayRef,
284
289
  onKeyDown: function onKeyDown(event) {
285
290
  var _document;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-context-selector",
3
- "version": "1.1.44",
3
+ "version": "1.2.1",
4
4
  "description": "ContextSelector UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -29,25 +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": "73989f3707121812fcd54f3e89e80f6228298689",
32
+ "gitHead": "085189e79075b23a8fb86ce9b7d930f6ac7b3d23",
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.4.16",
40
- "@synerise/ds-divider": "^1.2.0",
41
- "@synerise/ds-dropdown": "^1.0.34",
42
- "@synerise/ds-factors": "^1.5.21",
43
- "@synerise/ds-icon": "^1.7.3",
44
- "@synerise/ds-information-card": "^1.2.3",
45
- "@synerise/ds-list-item": "^1.1.0",
46
- "@synerise/ds-menu": "^1.1.2",
47
- "@synerise/ds-result": "^1.0.29",
48
- "@synerise/ds-scrollbar": "^1.1.9",
49
- "@synerise/ds-skeleton": "^1.0.24",
50
- "@synerise/ds-tabs": "^1.0.36",
39
+ "@synerise/ds-button": "^1.5.0",
40
+ "@synerise/ds-divider": "^1.2.1",
41
+ "@synerise/ds-dropdown": "^1.1.1",
42
+ "@synerise/ds-factors": "^1.6.1",
43
+ "@synerise/ds-icon": "^1.8.0",
44
+ "@synerise/ds-information-card": "^1.3.1",
45
+ "@synerise/ds-list-item": "^1.2.0",
46
+ "@synerise/ds-menu": "^1.2.0",
47
+ "@synerise/ds-result": "^1.0.30",
48
+ "@synerise/ds-scrollbar": "^1.2.0",
49
+ "@synerise/ds-skeleton": "^1.0.25",
50
+ "@synerise/ds-tabs": "^1.1.1",
51
51
  "@synerise/ds-utils": "^1.5.0",
52
52
  "react-window": "1.8.11",
53
53
  "uuid": "^8.3.2"