@synerise/ds-context-selector 0.25.15 → 0.25.17
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.
- package/CHANGELOG.md +16 -0
- package/dist/ContextSelector.js +38 -52
- package/dist/ContextSelectorDropdown/ContextSelectorDropdown.js +36 -75
- package/dist/ContextSelectorDropdown/ContextSelectorDropdownItem.js +11 -18
- package/dist/constants.js +0 -1
- package/dist/hooks/useTexts.js +1 -7
- package/package.json +14 -14
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,22 @@
|
|
|
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
|
+
## [0.25.17](https://github.com/Synerise/synerise-design/compare/@synerise/ds-context-selector@0.25.16...@synerise/ds-context-selector@0.25.17) (2024-11-28)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-context-selector
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [0.25.16](https://github.com/Synerise/synerise-design/compare/@synerise/ds-context-selector@0.25.15...@synerise/ds-context-selector@0.25.16) (2024-11-22)
|
|
15
|
+
|
|
16
|
+
**Note:** Version bump only for package @synerise/ds-context-selector
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
6
22
|
## [0.25.15](https://github.com/Synerise/synerise-design/compare/@synerise/ds-context-selector@0.25.14...@synerise/ds-context-selector@0.25.15) (2024-11-21)
|
|
7
23
|
|
|
8
24
|
|
package/dist/ContextSelector.js
CHANGED
|
@@ -1,15 +1,9 @@
|
|
|
1
1
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
|
|
2
|
-
|
|
3
2
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
4
|
-
|
|
5
3
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
6
|
-
|
|
7
4
|
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
8
|
-
|
|
9
5
|
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
|
|
10
|
-
|
|
11
6
|
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
12
|
-
|
|
13
7
|
import React, { useCallback, useEffect, useMemo, useState } from 'react';
|
|
14
8
|
import Button from '@synerise/ds-button';
|
|
15
9
|
import Icon, { Add3M, AngleDownS } from '@synerise/ds-icon';
|
|
@@ -21,64 +15,58 @@ import ContextSelectorDropdown from './ContextSelectorDropdown/ContextSelectorDr
|
|
|
21
15
|
import { ItemWrapper, ErrorWrapper } from './ContextSelector.styles';
|
|
22
16
|
import { DROPDOWN_HEIGHT, DROPDOWN_HEIGHT_BELOW_THRESHOLD, DROPDOWN_HEIGHT_THRESHOLD } from './constants';
|
|
23
17
|
import { useTexts } from './hooks/useTexts';
|
|
24
|
-
|
|
25
18
|
var ContextSelector = function ContextSelector(_ref) {
|
|
26
19
|
var defaultDropdownVisibility = _ref.defaultDropdownVisibility,
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
20
|
+
selectedItem = _ref.selectedItem,
|
|
21
|
+
onSelectItem = _ref.onSelectItem,
|
|
22
|
+
onSetGroup = _ref.onSetGroup,
|
|
23
|
+
groups = _ref.groups,
|
|
24
|
+
items = _ref.items,
|
|
25
|
+
recentItems = _ref.recentItems,
|
|
26
|
+
texts = _ref.texts,
|
|
27
|
+
opened = _ref.opened,
|
|
28
|
+
addMode = _ref.addMode,
|
|
29
|
+
loading = _ref.loading,
|
|
30
|
+
customTriggerComponent = _ref.customTriggerComponent,
|
|
31
|
+
_ref$trigger = _ref.trigger,
|
|
32
|
+
trigger = _ref$trigger === void 0 ? ['click'] : _ref$trigger,
|
|
33
|
+
menuItemHeight = _ref.menuItemHeight,
|
|
34
|
+
dropdownWrapperStyles = _ref.dropdownWrapperStyles,
|
|
35
|
+
onClickOutsideEvents = _ref.onClickOutsideEvents,
|
|
36
|
+
onClickOutside = _ref.onClickOutside,
|
|
37
|
+
onSearch = _ref.onSearch,
|
|
38
|
+
_ref$hideSearchField = _ref.hideSearchField,
|
|
39
|
+
hideSearchField = _ref$hideSearchField === void 0 ? false : _ref$hideSearchField,
|
|
40
|
+
hasMoreItems = _ref.hasMoreItems,
|
|
41
|
+
onFetchData = _ref.onFetchData,
|
|
42
|
+
onActivate = _ref.onActivate,
|
|
43
|
+
onDeactivate = _ref.onDeactivate,
|
|
44
|
+
onOpen = _ref.onOpen,
|
|
45
|
+
getPopupContainerOverride = _ref.getPopupContainerOverride,
|
|
46
|
+
type = _ref.type,
|
|
47
|
+
dropdownProps = _ref.dropdownProps,
|
|
48
|
+
disabled = _ref.disabled,
|
|
49
|
+
errorText = _ref.errorText,
|
|
50
|
+
_ref$readOnly = _ref.readOnly,
|
|
51
|
+
readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
|
|
52
|
+
getMenuEntryProps = _ref.getMenuEntryProps,
|
|
53
|
+
dropdownDimensionsConfig = _ref.dropdownDimensionsConfig;
|
|
61
54
|
var allTexts = useTexts(texts);
|
|
62
|
-
|
|
63
55
|
var _useState = useState(defaultDropdownVisibility != null ? defaultDropdownVisibility : false),
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
56
|
+
dropdownVisible = _useState[0],
|
|
57
|
+
setDropdownVisible = _useState[1];
|
|
67
58
|
var dimensionsConfig = _objectSpread({
|
|
68
59
|
defaultHeight: DROPDOWN_HEIGHT,
|
|
69
60
|
lowerHeight: DROPDOWN_HEIGHT_BELOW_THRESHOLD,
|
|
70
61
|
threshold: DROPDOWN_HEIGHT_THRESHOLD
|
|
71
62
|
}, dropdownDimensionsConfig);
|
|
72
|
-
|
|
73
63
|
var _useState2 = useState(dimensionsConfig.defaultHeight),
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
64
|
+
outerHeight = _useState2[0],
|
|
65
|
+
setOuterHeight = _useState2[1];
|
|
77
66
|
useEffect(function () {
|
|
78
67
|
var checkViewportHeight = function checkViewportHeight() {
|
|
79
68
|
return setOuterHeight(window.innerHeight < dimensionsConfig.threshold ? dimensionsConfig.lowerHeight : dimensionsConfig.defaultHeight);
|
|
80
69
|
};
|
|
81
|
-
|
|
82
70
|
checkViewportHeight();
|
|
83
71
|
window.addEventListener('resize', checkViewportHeight);
|
|
84
72
|
return function () {
|
|
@@ -104,7 +92,6 @@ var ContextSelector = function ContextSelector(_ref) {
|
|
|
104
92
|
if (selectedItem) {
|
|
105
93
|
return readOnly ? 'icon-label' : 'two-icons';
|
|
106
94
|
}
|
|
107
|
-
|
|
108
95
|
return readOnly ? 'simple' : 'label-icon';
|
|
109
96
|
}, [selectedItem, readOnly]);
|
|
110
97
|
var triggerColor = useMemo(function () {
|
|
@@ -205,5 +192,4 @@ var ContextSelector = function ContextSelector(_ref) {
|
|
|
205
192
|
})
|
|
206
193
|
}), customTriggerComponent != null ? customTriggerComponent : triggerButton)), errorText && /*#__PURE__*/React.createElement(ErrorWrapper, null, errorText));
|
|
207
194
|
};
|
|
208
|
-
|
|
209
195
|
export default ContextSelector;
|
|
@@ -1,17 +1,10 @@
|
|
|
1
1
|
var _ITEM_SIZE;
|
|
2
|
-
|
|
3
2
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
|
|
4
|
-
|
|
5
3
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
6
|
-
|
|
7
4
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
8
|
-
|
|
9
5
|
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
10
|
-
|
|
11
6
|
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
|
|
12
|
-
|
|
13
7
|
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
14
|
-
|
|
15
8
|
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
16
9
|
import { v4 as uuid } from 'uuid';
|
|
17
10
|
import { VariableSizeList } from 'react-window';
|
|
@@ -29,35 +22,33 @@ import ContextSelectorDropdownItem from './ContextSelectorDropdownItem';
|
|
|
29
22
|
import { NO_GROUP_NAME, DROPDOWN_HEIGHT, TABS_HEIGHT, SUBGROUP_HEADER_HEIGHT, SEARCH_HEIGHT } from '../constants';
|
|
30
23
|
import { isGroup, isListTitle } from './utils';
|
|
31
24
|
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);
|
|
32
|
-
|
|
33
25
|
function isDivider(element) {
|
|
34
26
|
return element.type === 'divider';
|
|
35
27
|
}
|
|
36
|
-
|
|
37
28
|
var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
|
|
38
29
|
var texts = _ref.texts,
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
30
|
+
setSelected = _ref.setSelected,
|
|
31
|
+
onSetGroup = _ref.onSetGroup,
|
|
32
|
+
groups = _ref.groups,
|
|
33
|
+
items = _ref.items,
|
|
34
|
+
recentItems = _ref.recentItems,
|
|
35
|
+
setDropdownVisible = _ref.setDropdownVisible,
|
|
36
|
+
value = _ref.value,
|
|
37
|
+
visible = _ref.visible,
|
|
38
|
+
_ref$hideSearchField = _ref.hideSearchField,
|
|
39
|
+
hideSearchField = _ref$hideSearchField === void 0 ? false : _ref$hideSearchField,
|
|
40
|
+
loading = _ref.loading,
|
|
41
|
+
menuItemHeight = _ref.menuItemHeight,
|
|
42
|
+
dropdownWrapperStyles = _ref.dropdownWrapperStyles,
|
|
43
|
+
onClickOutsideEvents = _ref.onClickOutsideEvents,
|
|
44
|
+
onClickOutside = _ref.onClickOutside,
|
|
45
|
+
onSearch = _ref.onSearch,
|
|
46
|
+
onFetchData = _ref.onFetchData,
|
|
47
|
+
hasMoreItems = _ref.hasMoreItems,
|
|
48
|
+
_ref$outerHeight = _ref.outerHeight,
|
|
49
|
+
outerHeight = _ref$outerHeight === void 0 ? DROPDOWN_HEIGHT : _ref$outerHeight,
|
|
50
|
+
_ref$maxSearchResults = _ref.maxSearchResultsInGroup,
|
|
51
|
+
maxSearchResultsInGroup = _ref$maxSearchResults === void 0 ? 4 : _ref$maxSearchResults;
|
|
61
52
|
var listStyle = {
|
|
62
53
|
overflowX: 'unset',
|
|
63
54
|
overflowY: 'unset'
|
|
@@ -71,27 +62,21 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
|
|
|
71
62
|
var listRef = useRef(null);
|
|
72
63
|
var overlayRef = useRef(null);
|
|
73
64
|
var scrollBarRef = useRef(null);
|
|
74
|
-
|
|
75
65
|
var _useState = useState(),
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
66
|
+
searchInputHandle = _useState[0],
|
|
67
|
+
setSearchInputHandle = _useState[1];
|
|
79
68
|
var _useState2 = useState(''),
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
69
|
+
searchQuery = _useState2[0],
|
|
70
|
+
setSearchQuery = _useState2[1];
|
|
83
71
|
var _useState3 = useState(defaultTab),
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
72
|
+
activeTab = _useState3[0],
|
|
73
|
+
setActiveTab = _useState3[1];
|
|
87
74
|
var _useState4 = useState(undefined),
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
75
|
+
activeGroup = _useState4[0],
|
|
76
|
+
setActiveGroup = _useState4[1];
|
|
91
77
|
var _useState5 = useState(true),
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
78
|
+
searchInputCanBeFocused = _useState5[0],
|
|
79
|
+
setSearchInputFocus = _useState5[1];
|
|
95
80
|
var classNames = useMemo(function () {
|
|
96
81
|
return "ds-context-item ds-context-item-" + uuid();
|
|
97
82
|
}, []);
|
|
@@ -132,16 +117,14 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
|
|
|
132
117
|
var groupByGroupName = useCallback(function (dropdownItems, maxItemsInGroup) {
|
|
133
118
|
var itemsNumber = dropdownItems == null ? void 0 : dropdownItems.length;
|
|
134
119
|
var groupedItems = {};
|
|
135
|
-
|
|
136
120
|
for (var i = 0; i < itemsNumber; i += 1) {
|
|
137
|
-
var item = dropdownItems[i];
|
|
138
|
-
|
|
121
|
+
var item = dropdownItems[i];
|
|
122
|
+
// @ts-ignore
|
|
139
123
|
var groupName = item.groupName || NO_GROUP_NAME;
|
|
140
124
|
var group = groupedItems[groupName] || [];
|
|
141
125
|
group.push(item);
|
|
142
126
|
groupedItems[groupName] = group;
|
|
143
127
|
}
|
|
144
|
-
|
|
145
128
|
var resultItems = [];
|
|
146
129
|
Object.keys(groupedItems).forEach(function (key, index) {
|
|
147
130
|
if (index > 0) {
|
|
@@ -149,14 +132,12 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
|
|
|
149
132
|
type: 'divider'
|
|
150
133
|
});
|
|
151
134
|
}
|
|
152
|
-
|
|
153
135
|
if (key !== NO_GROUP_NAME && !activeGroup) {
|
|
154
136
|
resultItems.push({
|
|
155
137
|
type: 'title',
|
|
156
138
|
title: key
|
|
157
139
|
});
|
|
158
140
|
}
|
|
159
|
-
|
|
160
141
|
var groupItems = maxItemsInGroup ? groupedItems[key].slice(0, maxItemsInGroup) : groupedItems[key];
|
|
161
142
|
groupItems.forEach(function (item) {
|
|
162
143
|
var resultItem = item.isGroup ? {
|
|
@@ -177,7 +158,6 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
|
|
|
177
158
|
};
|
|
178
159
|
resultItems.push(resultItem);
|
|
179
160
|
});
|
|
180
|
-
|
|
181
161
|
if (maxItemsInGroup && groupedItems[key].length > maxItemsInGroup) {
|
|
182
162
|
var anyItem = groupItems[0];
|
|
183
163
|
resultItems.push({
|
|
@@ -196,10 +176,8 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
|
|
|
196
176
|
});
|
|
197
177
|
return resultItems;
|
|
198
178
|
}, [activeGroup, classNames, searchQuery, handleOnSetGroup, menuItemHeight, clearSearch, hideDropdown, handleSelect, value, texts.showMore, groups]);
|
|
199
|
-
|
|
200
179
|
var _useSearchResults = useSearchResults(items, groups, activeTab, groupByGroupName, activeGroup, searchQuery, maxSearchResultsInGroup),
|
|
201
|
-
|
|
202
|
-
|
|
180
|
+
searchResults = _useSearchResults.searchResults;
|
|
203
181
|
var hasSubgroups = useMemo(function () {
|
|
204
182
|
return Boolean(currentTabItems == null ? void 0 : currentTabItems.subGroups);
|
|
205
183
|
}, [currentTabItems]);
|
|
@@ -207,10 +185,8 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
|
|
|
207
185
|
if (!onSearch && searchQuery) {
|
|
208
186
|
return searchResults;
|
|
209
187
|
}
|
|
210
|
-
|
|
211
188
|
if (hasSubgroups && !activeGroup) {
|
|
212
189
|
var _currentTabItems$subG;
|
|
213
|
-
|
|
214
190
|
var subGroups = hasSubgroups ? currentTabItems == null || (_currentTabItems$subG = currentTabItems.subGroups) == null ? void 0 : _currentTabItems$subG.map(function (group) {
|
|
215
191
|
return _objectSpread({}, group, {
|
|
216
192
|
isGroup: true
|
|
@@ -222,24 +198,20 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
|
|
|
222
198
|
isGroup: false
|
|
223
199
|
}));
|
|
224
200
|
}
|
|
225
|
-
|
|
226
201
|
return prev;
|
|
227
202
|
}, []);
|
|
228
203
|
return groupByGroupName([].concat(subGroups || [], subItems));
|
|
229
204
|
}
|
|
230
|
-
|
|
231
205
|
if (activeGroup) {
|
|
232
206
|
return groupByGroupName(items == null ? void 0 : items.filter(function (item) {
|
|
233
207
|
return activeGroup && item.groupId === activeGroup.id;
|
|
234
208
|
}));
|
|
235
209
|
}
|
|
236
|
-
|
|
237
210
|
if (activeTab && groups && groups[activeTab]) {
|
|
238
211
|
return groupByGroupName(items == null ? void 0 : items.filter(function (item) {
|
|
239
212
|
return item.groupId === groups[activeTab].id;
|
|
240
213
|
}));
|
|
241
214
|
}
|
|
242
|
-
|
|
243
215
|
if ((recentItems || []).length > 0) {
|
|
244
216
|
var recentItemsWithGroup = (recentItems || []).map(function (item) {
|
|
245
217
|
return _objectSpread({}, item, {
|
|
@@ -254,12 +226,10 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
|
|
|
254
226
|
var result = groupByGroupName(recentItemsWithGroup.concat(itemsWithAllGroup));
|
|
255
227
|
return result;
|
|
256
228
|
}
|
|
257
|
-
|
|
258
229
|
return groupByGroupName(items);
|
|
259
230
|
}, [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]);
|
|
260
231
|
useEffect(function () {
|
|
261
232
|
var _listRef$current;
|
|
262
|
-
|
|
263
233
|
// eslint-disable-next-line no-unused-expressions
|
|
264
234
|
(_listRef$current = listRef.current) == null || _listRef$current.resetAfterIndex(0, false);
|
|
265
235
|
}, [activeItems, listRef]);
|
|
@@ -283,23 +253,19 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
|
|
|
283
253
|
description: texts.noResults
|
|
284
254
|
});
|
|
285
255
|
}, [texts]);
|
|
286
|
-
|
|
287
256
|
var handleScroll = function handleScroll(_ref2) {
|
|
288
257
|
var currentTarget = _ref2.currentTarget;
|
|
289
258
|
var scrollTop = currentTarget.scrollTop;
|
|
290
|
-
|
|
291
259
|
if (listRef.current !== null) {
|
|
292
260
|
listRef.current.scrollTo(scrollTop);
|
|
293
261
|
}
|
|
294
262
|
};
|
|
295
|
-
|
|
296
263
|
var getItemSize = function getItemSize(index) {
|
|
297
264
|
var item = activeItems[index];
|
|
298
265
|
if (isListTitle(item)) return ITEM_SIZE.title;
|
|
299
266
|
if (isDivider(item)) return ITEM_SIZE.divider;
|
|
300
267
|
return menuItemHeight ? ITEM_SIZE[menuItemHeight] : ITEM_SIZE[itemSizes.DEFAULT];
|
|
301
268
|
};
|
|
302
|
-
|
|
303
269
|
var dropdownContentHeight = useMemo(function () {
|
|
304
270
|
return outerHeight - (hasTabs && !searchQuery ? TABS_HEIGHT : 0) - (activeGroup ? SUBGROUP_HEADER_HEIGHT : 0) - SEARCH_HEIGHT;
|
|
305
271
|
}, [activeGroup, hasTabs, outerHeight, searchQuery]);
|
|
@@ -318,11 +284,9 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
|
|
|
318
284
|
ref: overlayRef,
|
|
319
285
|
onKeyDown: function onKeyDown(event) {
|
|
320
286
|
var _document;
|
|
321
|
-
|
|
322
287
|
if (((_document = document) == null ? void 0 : _document.activeElement) === (searchInputHandle == null ? void 0 : searchInputHandle.current)) {
|
|
323
288
|
setSearchInputFocus(false);
|
|
324
289
|
}
|
|
325
|
-
|
|
326
290
|
searchQuery && focusWithArrowKeys(event, classNames.split(' ')[1], function () {
|
|
327
291
|
setSearchInputFocus(true);
|
|
328
292
|
});
|
|
@@ -387,9 +351,8 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
|
|
|
387
351
|
ref: listRef
|
|
388
352
|
}, function (_ref3) {
|
|
389
353
|
var index = _ref3.index,
|
|
390
|
-
|
|
354
|
+
style = _ref3.style;
|
|
391
355
|
var item = activeItems[index];
|
|
392
|
-
|
|
393
356
|
if (item && isDivider(item)) {
|
|
394
357
|
return /*#__PURE__*/React.createElement("div", {
|
|
395
358
|
style: style
|
|
@@ -398,7 +361,6 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
|
|
|
398
361
|
marginBottom: 8
|
|
399
362
|
}));
|
|
400
363
|
}
|
|
401
|
-
|
|
402
364
|
return item && isListTitle(item) ? /*#__PURE__*/React.createElement(S.Title, {
|
|
403
365
|
style: style
|
|
404
366
|
}, item.title) : /*#__PURE__*/React.createElement(ContextSelectorDropdownItem, _extends({
|
|
@@ -406,5 +368,4 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
|
|
|
406
368
|
}, item));
|
|
407
369
|
})) : getNoResultContainer));
|
|
408
370
|
};
|
|
409
|
-
|
|
410
371
|
export default ContextSelectorDropdown;
|
|
@@ -1,30 +1,24 @@
|
|
|
1
1
|
var _excluded = ["id", "icon"];
|
|
2
|
-
|
|
3
2
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
|
|
4
|
-
|
|
5
3
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
6
|
-
|
|
7
4
|
import React from 'react';
|
|
8
5
|
import Icon, { CheckS } from '@synerise/ds-icon';
|
|
9
6
|
import ListItem from '@synerise/ds-list-item';
|
|
10
7
|
import { theme } from '@synerise/ds-core';
|
|
11
|
-
|
|
12
8
|
var ContextSelectorDropdownItem = function ContextSelectorDropdownItem(_ref) {
|
|
13
9
|
var item = _ref.item,
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
10
|
+
clearSearch = _ref.clearSearch,
|
|
11
|
+
searchQuery = _ref.searchQuery,
|
|
12
|
+
hideDropdown = _ref.hideDropdown,
|
|
13
|
+
select = _ref.select,
|
|
14
|
+
selected = _ref.selected,
|
|
15
|
+
className = _ref.className,
|
|
16
|
+
menuItemHeight = _ref.menuItemHeight,
|
|
17
|
+
style = _ref.style,
|
|
18
|
+
label = _ref.label;
|
|
24
19
|
var id = item.id,
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
20
|
+
_ = item.icon,
|
|
21
|
+
itemProps = _objectWithoutPropertiesLoose(item, _excluded);
|
|
28
22
|
return /*#__PURE__*/React.createElement(ListItem, _extends({
|
|
29
23
|
style: style,
|
|
30
24
|
className: className,
|
|
@@ -46,5 +40,4 @@ var ContextSelectorDropdownItem = function ContextSelectorDropdownItem(_ref) {
|
|
|
46
40
|
description: item.description
|
|
47
41
|
}, itemProps), label || item.name);
|
|
48
42
|
};
|
|
49
|
-
|
|
50
43
|
export default ContextSelectorDropdownItem;
|
package/dist/constants.js
CHANGED
package/dist/hooks/useTexts.js
CHANGED
|
@@ -1,19 +1,13 @@
|
|
|
1
1
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
2
|
-
|
|
3
2
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
4
|
-
|
|
5
3
|
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
6
|
-
|
|
7
4
|
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
|
|
8
|
-
|
|
9
5
|
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
10
|
-
|
|
11
6
|
import { useMemo } from 'react';
|
|
12
7
|
import { useIntl } from 'react-intl';
|
|
13
8
|
export var useTexts = function useTexts(defaultTexts) {
|
|
14
9
|
var _useIntl = useIntl(),
|
|
15
|
-
|
|
16
|
-
|
|
10
|
+
formatMessage = _useIntl.formatMessage;
|
|
17
11
|
var texts = useMemo(function () {
|
|
18
12
|
return _objectSpread({
|
|
19
13
|
buttonLabel: formatMessage({
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-context-selector",
|
|
3
|
-
"version": "0.25.
|
|
3
|
+
"version": "0.25.17",
|
|
4
4
|
"description": "ContextSelector UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "Synerise/synerise-design",
|
|
@@ -28,25 +28,25 @@
|
|
|
28
28
|
"types": "tsc --noEmit",
|
|
29
29
|
"upgrade:ds": "ncu -f \"@synerise/ds-*\" -u"
|
|
30
30
|
},
|
|
31
|
-
"gitHead": "
|
|
31
|
+
"gitHead": "4a56ee7ef816c22341ce704154dc7aa65b7d1dcc",
|
|
32
32
|
"sideEffects": [
|
|
33
33
|
"dist/style/*",
|
|
34
34
|
"*.less"
|
|
35
35
|
],
|
|
36
36
|
"types": "dist/index.d.ts",
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@synerise/ds-button": "^0.21.
|
|
39
|
-
"@synerise/ds-divider": "^0.7.
|
|
40
|
-
"@synerise/ds-dropdown": "^0.18.
|
|
41
|
-
"@synerise/ds-factors": "^0.27.
|
|
42
|
-
"@synerise/ds-icon": "^0.67.
|
|
43
|
-
"@synerise/ds-information-card": "^0.
|
|
44
|
-
"@synerise/ds-list-item": "^0.
|
|
45
|
-
"@synerise/ds-menu": "^0.20.
|
|
46
|
-
"@synerise/ds-result": "^0.7.
|
|
47
|
-
"@synerise/ds-scrollbar": "^0.11.
|
|
48
|
-
"@synerise/ds-skeleton": "^0.6.
|
|
49
|
-
"@synerise/ds-tabs": "^0.17.
|
|
38
|
+
"@synerise/ds-button": "^0.21.20",
|
|
39
|
+
"@synerise/ds-divider": "^0.7.16",
|
|
40
|
+
"@synerise/ds-dropdown": "^0.18.25",
|
|
41
|
+
"@synerise/ds-factors": "^0.27.4",
|
|
42
|
+
"@synerise/ds-icon": "^0.67.1",
|
|
43
|
+
"@synerise/ds-information-card": "^0.7.0",
|
|
44
|
+
"@synerise/ds-list-item": "^0.5.0",
|
|
45
|
+
"@synerise/ds-menu": "^0.20.7",
|
|
46
|
+
"@synerise/ds-result": "^0.7.15",
|
|
47
|
+
"@synerise/ds-scrollbar": "^0.11.20",
|
|
48
|
+
"@synerise/ds-skeleton": "^0.6.19",
|
|
49
|
+
"@synerise/ds-tabs": "^0.17.8",
|
|
50
50
|
"@synerise/ds-utils": "^0.31.2",
|
|
51
51
|
"react-window": "1.8.5",
|
|
52
52
|
"uuid": "^8.3.2"
|