@jetbrains/ring-ui 5.0.148 → 5.0.150
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/components/select/select.js +1 -1
- package/components/tags-input/tags-input.d.ts +2 -0
- package/components/tags-input/tags-input.js +2 -1
- package/dist/_helpers/card.js +5 -5
- package/dist/analytics/analytics__custom-plugin.js +2 -6
- package/dist/analytics/analytics__ga-plugin.js +1 -2
- package/dist/auth/auth__core.js +63 -100
- package/dist/auth/iframe-flow.js +1 -2
- package/dist/auth/landing.js +1 -2
- package/dist/auth/request-builder.js +1 -2
- package/dist/auth/token-validator.js +2 -6
- package/dist/auth/window-flow.js +2 -4
- package/dist/caret/caret.js +13 -16
- package/dist/clipboard/clipboard-fallback.js +3 -3
- package/dist/data-list/data-list.js +3 -6
- package/dist/data-list/item.js +1 -1
- package/dist/date-picker/date-input.js +5 -6
- package/dist/date-picker/date-picker.js +6 -7
- package/dist/date-picker/date-popup.js +2 -3
- package/dist/dialog-ng/dialog-ng.js +2 -3
- package/dist/dropdown/dropdown.js +2 -4
- package/dist/editable-heading/editable-heading.js +2 -2
- package/dist/global/focus-sensor-hoc.js +8 -13
- package/dist/global/normalize-indent.js +2 -2
- package/dist/global/react-render-adapter.js +1 -4
- package/dist/global/rerender-hoc.js +1 -2
- package/dist/global/schedule-raf.js +1 -2
- package/dist/header/profile.js +6 -6
- package/dist/header/smart-profile.js +2 -3
- package/dist/header/smart-services.js +3 -6
- package/dist/http/http.js +7 -13
- package/dist/hub-source/hub-source__user.js +2 -3
- package/dist/input/input.js +4 -7
- package/dist/island/content.js +1 -2
- package/dist/list/list__users-groups-source.js +7 -10
- package/dist/loader/loader.js +1 -2
- package/dist/loader/loader__core.js +1 -2
- package/dist/markdown/code.js +2 -3
- package/dist/message/message.js +6 -8
- package/dist/old-browsers-message/white-list.js +2 -2
- package/dist/pager/pager.js +12 -16
- package/dist/permissions/permissions__cache.js +1 -1
- package/dist/popup/popup.js +1 -2
- package/dist/popup/position.js +1 -1
- package/dist/query-assist/query-assist.js +34 -46
- package/dist/select/select.js +11 -18
- package/dist/select/select__popup.js +3 -10
- package/dist/select-ng/select-ng.js +1 -2
- package/dist/select-ng/select-ng__lazy.js +1 -2
- package/dist/shortcuts/core.js +1 -2
- package/dist/style.css +1 -1
- package/dist/tab-trap/tab-trap.js +2 -4
- package/dist/table/header.js +2 -2
- package/dist/table/multitable.js +7 -14
- package/dist/table/row-with-focus-sensor.js +4 -8
- package/dist/table/selection-shortcuts-hoc.js +11 -11
- package/dist/tabs/collapsible-tabs.js +1 -1
- package/dist/tag/tag.js +1 -2
- package/dist/tags-input/tags-input.d.ts +2 -0
- package/dist/tags-input/tags-input.js +16 -24
- package/dist/tooltip/tooltip.js +2 -4
- package/dist/user-agreement/user-agreement.js +8 -8
- package/package.json +34 -34
|
@@ -91,16 +91,13 @@ class ListUsersGroupsSource extends HubSourceUsersGroups {
|
|
|
91
91
|
});
|
|
92
92
|
}
|
|
93
93
|
if (filter !== Filter.GROUPS) {
|
|
94
|
-
users.forEach(user => {
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
description: user.login
|
|
102
|
-
});
|
|
103
|
-
});
|
|
94
|
+
users.forEach(user => items.push({
|
|
95
|
+
...user,
|
|
96
|
+
key: user.id,
|
|
97
|
+
label: user.name,
|
|
98
|
+
avatar: user.profile ? user.profile.avatar?.url : null,
|
|
99
|
+
description: user.login
|
|
100
|
+
}));
|
|
104
101
|
}
|
|
105
102
|
if (filter === Filter.ALL) {
|
|
106
103
|
items.push({
|
package/dist/loader/loader.js
CHANGED
|
@@ -31,8 +31,7 @@ class Loader extends PureComponent {
|
|
|
31
31
|
}
|
|
32
32
|
}
|
|
33
33
|
componentWillUnmount() {
|
|
34
|
-
|
|
35
|
-
(_this$loader = this.loader) === null || _this$loader === void 0 ? void 0 : _this$loader.destroy();
|
|
34
|
+
this.loader?.destroy();
|
|
36
35
|
}
|
|
37
36
|
loader;
|
|
38
37
|
initLoader = el => {
|
|
@@ -108,7 +108,6 @@ class LoaderCore {
|
|
|
108
108
|
tick;
|
|
109
109
|
isRunning;
|
|
110
110
|
constructor(containerNode, props) {
|
|
111
|
-
var _this$ctx;
|
|
112
111
|
this.props = Object.assign({}, LoaderCore.defaultProps, props);
|
|
113
112
|
this.canvas = document.createElement('canvas');
|
|
114
113
|
this.canvas.dataset.test = 'ring-loader';
|
|
@@ -127,7 +126,7 @@ class LoaderCore {
|
|
|
127
126
|
this.canvas.style.width = `${this.props.size}px`;
|
|
128
127
|
this.canvas.style.height = `${this.props.size}px`;
|
|
129
128
|
this.ctx = this.canvas.getContext('2d');
|
|
130
|
-
|
|
129
|
+
this.ctx?.scale(pixelRatio, pixelRatio);
|
|
131
130
|
this.height = this.props.size;
|
|
132
131
|
this.width = this.props.size;
|
|
133
132
|
this.particles = [];
|
package/dist/markdown/code.js
CHANGED
|
@@ -8,7 +8,6 @@ import '../global/trivial-template-tag.js';
|
|
|
8
8
|
import '../global/memoize.js';
|
|
9
9
|
|
|
10
10
|
const MarkdownCode = _ref => {
|
|
11
|
-
var _className$split$find;
|
|
12
11
|
let {
|
|
13
12
|
children,
|
|
14
13
|
language,
|
|
@@ -16,11 +15,11 @@ const MarkdownCode = _ref => {
|
|
|
16
15
|
className
|
|
17
16
|
} = _ref;
|
|
18
17
|
// Hack for updated react-markdown RG-2193
|
|
19
|
-
const lang = language !== null && language !== void 0 ? language : className
|
|
18
|
+
const lang = language !== null && language !== void 0 ? language : className?.split(' ').find(name => name.startsWith('language-'))?.replace('language-', '');
|
|
20
19
|
return /*#__PURE__*/React.createElement(Code, {
|
|
21
20
|
language: lang,
|
|
22
21
|
className: className,
|
|
23
|
-
code:
|
|
22
|
+
code: children?.join('') || '',
|
|
24
23
|
inline: inline
|
|
25
24
|
});
|
|
26
25
|
};
|
package/dist/message/message.js
CHANGED
|
@@ -120,12 +120,10 @@ class Message extends Component {
|
|
|
120
120
|
popup;
|
|
121
121
|
node;
|
|
122
122
|
popupRef = el => {
|
|
123
|
-
var _this$popup;
|
|
124
123
|
this.popup = el;
|
|
125
|
-
this.node =
|
|
124
|
+
this.node = this.popup?.node;
|
|
126
125
|
};
|
|
127
126
|
getTailOffset() {
|
|
128
|
-
var _this$popup2;
|
|
129
127
|
const DEFAULT_OFFSET = 32;
|
|
130
128
|
const {
|
|
131
129
|
popupProps
|
|
@@ -133,14 +131,14 @@ class Message extends Component {
|
|
|
133
131
|
if (this.props.tailOffset != null) {
|
|
134
132
|
return this.props.tailOffset;
|
|
135
133
|
}
|
|
136
|
-
const anchor =
|
|
134
|
+
const anchor = popupProps?.anchorElement || this.popup?.parent;
|
|
137
135
|
if (!anchor) {
|
|
138
136
|
return DEFAULT_OFFSET;
|
|
139
137
|
}
|
|
140
138
|
const offset = Math.floor(anchor.offsetWidth / 2);
|
|
141
139
|
const isOpenedToRight = this.state.direction != null && [Directions.TOP_RIGHT, Directions.BOTTOM_RIGHT].includes(this.state.direction);
|
|
142
|
-
if (popupProps
|
|
143
|
-
return offset -
|
|
140
|
+
if (popupProps?.left && isOpenedToRight) {
|
|
141
|
+
return offset - popupProps?.left;
|
|
144
142
|
}
|
|
145
143
|
return offset;
|
|
146
144
|
}
|
|
@@ -199,10 +197,10 @@ class Message extends Component {
|
|
|
199
197
|
className: modules_8b837449.button,
|
|
200
198
|
onClick: onClose,
|
|
201
199
|
primary: true
|
|
202
|
-
}, buttonProps), (_translations$gotIt = translations
|
|
200
|
+
}, buttonProps), (_translations$gotIt = translations?.gotIt) !== null && _translations$gotIt !== void 0 ? _translations$gotIt : translate('gotIt')), onDismiss && /*#__PURE__*/React.createElement(Button, {
|
|
203
201
|
onClick: onDismiss,
|
|
204
202
|
text: true
|
|
205
|
-
}, (_translations$dismiss = translations
|
|
203
|
+
}, (_translations$dismiss = translations?.dismiss) !== null && _translations$dismiss !== void 0 ? _translations$dismiss : translate('dismiss'))));
|
|
206
204
|
});
|
|
207
205
|
});
|
|
208
206
|
}
|
|
@@ -5,11 +5,11 @@ const MAJOR_VERSION_INDEX = 0;
|
|
|
5
5
|
/**
|
|
6
6
|
* SUPPORTED_BROWSERS are defined by Babel plugin, see babel config
|
|
7
7
|
*/
|
|
8
|
-
if (!["and_chr 114", "chrome
|
|
8
|
+
if (!["and_chr 114", "and_uc 13.4", "chrome 114", "chrome 113", "chrome 109", "edge 114", "firefox 114", "ios_saf 16.5", "ios_saf 16.4", "ios_saf 16.3", "ios_saf 16.1", "opera 99", "safari 16.5", "samsung 21"]) {
|
|
9
9
|
// eslint-disable-next-line no-console
|
|
10
10
|
console.warn('Ring UI: no SUPPORTED_BROWSERS passed. Please check babel config.');
|
|
11
11
|
}
|
|
12
|
-
const SUPPORTED = ["and_chr 114", "chrome
|
|
12
|
+
const SUPPORTED = ["and_chr 114", "and_uc 13.4", "chrome 114", "chrome 113", "chrome 109", "edge 114", "firefox 114", "ios_saf 16.5", "ios_saf 16.4", "ios_saf 16.3", "ios_saf 16.1", "opera 99", "safari 16.5", "samsung 21"] || [];
|
|
13
13
|
const WHITE_LISTED_BROWSERS = ['chrome', 'firefox', 'safari', 'edge'];
|
|
14
14
|
const WHITE_LIST = SUPPORTED.reduce((acc, item) => {
|
|
15
15
|
var _item$match;
|
package/dist/pager/pager.js
CHANGED
|
@@ -115,10 +115,10 @@ class Pager extends PureComponent {
|
|
|
115
115
|
translate
|
|
116
116
|
} = this.context;
|
|
117
117
|
const data = pageSizes.map(size => {
|
|
118
|
-
var _this$props$translati
|
|
118
|
+
var _this$props$translati;
|
|
119
119
|
return {
|
|
120
120
|
key: size,
|
|
121
|
-
label: `${size} ${(_this$props$translati =
|
|
121
|
+
label: `${size} ${(_this$props$translati = this.props.translations?.perPage) !== null && _this$props$translati !== void 0 ? _this$props$translati : translate('perPage')}`
|
|
122
122
|
};
|
|
123
123
|
});
|
|
124
124
|
const selected = data.find(it => it.key === pageSize);
|
|
@@ -144,9 +144,8 @@ class Pager extends PureComponent {
|
|
|
144
144
|
currentPage
|
|
145
145
|
} = this.props;
|
|
146
146
|
if (currentPage !== 1) {
|
|
147
|
-
var _this$props$onPageCha, _this$props;
|
|
148
147
|
const prevPage = currentPage - 1;
|
|
149
|
-
|
|
148
|
+
this.props.onPageChange?.(prevPage);
|
|
150
149
|
}
|
|
151
150
|
};
|
|
152
151
|
handleNextClick = () => {
|
|
@@ -157,15 +156,13 @@ class Pager extends PureComponent {
|
|
|
157
156
|
const nextPage = currentPage + 1;
|
|
158
157
|
const total = this.getTotalPages();
|
|
159
158
|
if (currentPage !== total) {
|
|
160
|
-
|
|
161
|
-
(_this$props$onPageCha2 = (_this$props2 = this.props).onPageChange) === null || _this$props$onPageCha2 === void 0 ? void 0 : _this$props$onPageCha2.call(_this$props2, nextPage);
|
|
159
|
+
this.props.onPageChange?.(nextPage);
|
|
162
160
|
} else if (this.props.openTotal) {
|
|
163
161
|
onLoadPage(nextPage);
|
|
164
162
|
}
|
|
165
163
|
};
|
|
166
164
|
handlePageChange = memoize(i => event => {
|
|
167
|
-
|
|
168
|
-
(_this$props$onPageCha3 = (_this$props3 = this.props).onPageChange) === null || _this$props$onPageCha3 === void 0 ? void 0 : _this$props$onPageCha3.call(_this$props3, i, event);
|
|
165
|
+
this.props.onPageChange?.(i, event);
|
|
169
166
|
});
|
|
170
167
|
handleLoadMore = memoize(i => () => {
|
|
171
168
|
this.props.onLoadPage(i);
|
|
@@ -212,7 +209,7 @@ class Pager extends PureComponent {
|
|
|
212
209
|
}));
|
|
213
210
|
}
|
|
214
211
|
getPagerLinks() {
|
|
215
|
-
var _this$props$
|
|
212
|
+
var _this$props$translati2, _this$props$translati3;
|
|
216
213
|
const {
|
|
217
214
|
translate
|
|
218
215
|
} = this.context;
|
|
@@ -226,8 +223,8 @@ class Pager extends PureComponent {
|
|
|
226
223
|
glyph: chevronLeftIcon,
|
|
227
224
|
key: "icon"
|
|
228
225
|
});
|
|
229
|
-
const prevText = (_this$props$
|
|
230
|
-
const nextText = (_this$props$
|
|
226
|
+
const prevText = (_this$props$translati2 = this.props.translations?.previousPage) !== null && _this$props$translati2 !== void 0 ? _this$props$translati2 : translate('previousPage');
|
|
227
|
+
const nextText = (_this$props$translati3 = this.props.translations?.nextPage) !== null && _this$props$translati3 !== void 0 ? _this$props$translati3 : translate('nextPage');
|
|
231
228
|
const nextLinkContent = WrapText => [/*#__PURE__*/React.createElement("span", {
|
|
232
229
|
key: "text"
|
|
233
230
|
}, /*#__PURE__*/React.createElement(WrapText, null, nextText)), nextIcon];
|
|
@@ -266,7 +263,7 @@ class Pager extends PureComponent {
|
|
|
266
263
|
return this.props.hrefFunc(page, pageSize);
|
|
267
264
|
}
|
|
268
265
|
getPagerContent() {
|
|
269
|
-
var _this$props$
|
|
266
|
+
var _this$props$translati4, _this$props$translati5;
|
|
270
267
|
const {
|
|
271
268
|
currentPage,
|
|
272
269
|
visiblePagesLimit
|
|
@@ -276,8 +273,7 @@ class Pager extends PureComponent {
|
|
|
276
273
|
translate
|
|
277
274
|
} = this.context;
|
|
278
275
|
if (totalPages < this.props.currentPage) {
|
|
279
|
-
|
|
280
|
-
(_this$props$onPageCha4 = (_this$props4 = this.props).onPageChange) === null || _this$props$onPageCha4 === void 0 ? void 0 : _this$props$onPageCha4.call(_this$props4, totalPages);
|
|
276
|
+
this.props.onPageChange?.(totalPages);
|
|
281
277
|
}
|
|
282
278
|
let start = 1;
|
|
283
279
|
let end = totalPages;
|
|
@@ -305,10 +301,10 @@ class Pager extends PureComponent {
|
|
|
305
301
|
buttons.push(this.getButton(i, i, i, i === currentPage));
|
|
306
302
|
}
|
|
307
303
|
const lastPageButtonAvailable = end < totalPages && !this.props.openTotal || this.props.openTotal && this.props.canLoadLastPageWithOpenTotal;
|
|
308
|
-
return /*#__PURE__*/React.createElement("div", null, this.getPagerLinks(), /*#__PURE__*/React.createElement(ButtonToolbar, null, start > 1 && this.getButton(1, (_this$props$
|
|
304
|
+
return /*#__PURE__*/React.createElement("div", null, this.getPagerLinks(), /*#__PURE__*/React.createElement(ButtonToolbar, null, start > 1 && this.getButton(1, (_this$props$translati4 = this.props.translations?.firstPage) !== null && _this$props$translati4 !== void 0 ? _this$props$translati4 : translate('firstPage')), /*#__PURE__*/React.createElement(ButtonGroup, null, start > 1 && this.getButton(start - 1, '...'), buttons, end < totalPages && this.getButton(end + 1, '...'), end === totalPages && this.props.openTotal && /*#__PURE__*/React.createElement(Button, _extends({
|
|
309
305
|
href: this.generateHref(end + 1),
|
|
310
306
|
disabled: this.props.loader
|
|
311
|
-
}, this.getClickProps(this.handleLoadMore(end + 1))), '...')), lastPageButtonAvailable && this.getButton(this.props.openTotal ? -1 : totalPages, (_this$props$
|
|
307
|
+
}, this.getClickProps(this.handleLoadMore(end + 1))), '...')), lastPageButtonAvailable && this.getButton(this.props.openTotal ? -1 : totalPages, (_this$props$translati5 = this.props.translations?.lastPage) !== null && _this$props$translati5 !== void 0 ? _this$props$translati5 : translate('lastPage'))), this.getPageSizeSelector());
|
|
312
308
|
}
|
|
313
309
|
render() {
|
|
314
310
|
const classes = classNames(modules_1a5f0d42.pager, this.props.className);
|
|
@@ -205,7 +205,7 @@ class PermissionCache {
|
|
|
205
205
|
testPermission(permissionName, projectId) {
|
|
206
206
|
const permissionCache = this.permissionCache;
|
|
207
207
|
const convertedName = this.namesConverter(permissionName);
|
|
208
|
-
const cachedPermission =
|
|
208
|
+
const cachedPermission = permissionCache?.[permissionName] || convertedName && permissionCache?.[convertedName];
|
|
209
209
|
// Hasn't the permission in any project
|
|
210
210
|
if (!cachedPermission) {
|
|
211
211
|
return false;
|
package/dist/popup/popup.js
CHANGED
|
@@ -238,8 +238,7 @@ class Popup extends PureComponent {
|
|
|
238
238
|
* @private
|
|
239
239
|
*/
|
|
240
240
|
_onDocumentClick = evt => {
|
|
241
|
-
|
|
242
|
-
if (this.container && evt.target instanceof Node && this.container.contains(evt.target) || !this._listenersEnabled || this.props.dontCloseOnAnchorClick && evt.target instanceof Node && (_this$_getAnchor = this._getAnchor()) !== null && _this$_getAnchor !== void 0 && _this$_getAnchor.contains(evt.target)) {
|
|
241
|
+
if (this.container && evt.target instanceof Node && this.container.contains(evt.target) || !this._listenersEnabled || this.props.dontCloseOnAnchorClick && evt.target instanceof Node && this._getAnchor()?.contains(evt.target)) {
|
|
243
242
|
return;
|
|
244
243
|
}
|
|
245
244
|
this.props.onOutsideClick(evt);
|
package/dist/popup/position.js
CHANGED
|
@@ -242,7 +242,7 @@ function position(attrs) {
|
|
|
242
242
|
anchorRect,
|
|
243
243
|
maxHeight,
|
|
244
244
|
direction: chosenDirection,
|
|
245
|
-
popupScrollHeight: (_popup$scrollHeight = popup
|
|
245
|
+
popupScrollHeight: (_popup$scrollHeight = popup?.scrollHeight) !== null && _popup$scrollHeight !== void 0 ? _popup$scrollHeight : 0,
|
|
246
246
|
scroll
|
|
247
247
|
});
|
|
248
248
|
}
|
|
@@ -287,9 +287,8 @@ class QueryAssist extends Component {
|
|
|
287
287
|
}
|
|
288
288
|
if (typeof query === 'string' && queryChanged && query !== this.immediateState.query) {
|
|
289
289
|
this.immediateState.query = query;
|
|
290
|
-
if (prevProps.autoOpen &&
|
|
291
|
-
|
|
292
|
-
(_this$requestData = this.requestData) === null || _this$requestData === void 0 ? void 0 : _this$requestData.call(this);
|
|
290
|
+
if (prevProps.autoOpen && query?.length > 0) {
|
|
291
|
+
this.requestData?.();
|
|
293
292
|
} else if (query) {
|
|
294
293
|
this.requestStyleRanges();
|
|
295
294
|
}
|
|
@@ -351,30 +350,26 @@ class QueryAssist extends Component {
|
|
|
351
350
|
}
|
|
352
351
|
if (_this.immediateState.focus && !_this.props.disabled) {
|
|
353
352
|
if (typeof _this.immediateState.selection === 'number' && Number.isInteger(_this.immediateState.selection) && _this.immediateState.selection > -1) {
|
|
354
|
-
var _this$caret;
|
|
355
353
|
// Set to end of field value if newCaretPosition is inappropriate
|
|
356
|
-
|
|
354
|
+
_this.caret?.setPosition(newCaretPosition >= 0 ? newCaretPosition : -1);
|
|
357
355
|
_this.scrollInput();
|
|
358
356
|
} else if (_this.immediateState.selection && typeof _this.immediateState.selection === 'object' && _this.immediateState.selection.startOffset !== undefined) {
|
|
359
|
-
|
|
360
|
-
(_this$caret2 = _this.caret) === null || _this$caret2 === void 0 ? void 0 : _this$caret2.setPosition(_this.immediateState.selection);
|
|
357
|
+
_this.caret?.setPosition(_this.immediateState.selection);
|
|
361
358
|
} else if (_this.immediateState.selection === undefined || params.forceSetCaret) {
|
|
362
|
-
|
|
363
|
-
(_this$caret3 = _this.caret) === null || _this$caret3 === void 0 ? void 0 : _this$caret3.setPosition(-1);
|
|
359
|
+
_this.caret?.setPosition(-1);
|
|
364
360
|
}
|
|
365
361
|
}
|
|
366
362
|
};
|
|
367
363
|
})();
|
|
368
364
|
scrollInput() {
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
if (((_this$input = this.input) === null || _this$input === void 0 ? void 0 : _this$input.clientWidth) !== ((_this$input2 = this.input) === null || _this$input2 === void 0 ? void 0 : _this$input2.scrollWidth) && caretOffset != null && ((_this$input3 = this.input) === null || _this$input3 === void 0 ? void 0 : _this$input3.clientWidth) != null && caretOffset > this.input.clientWidth) {
|
|
365
|
+
const caretOffset = this.caret?.getOffset();
|
|
366
|
+
if (this.input?.clientWidth !== this.input?.scrollWidth && caretOffset != null && this.input?.clientWidth != null && caretOffset > this.input.clientWidth) {
|
|
372
367
|
this.input.scrollLeft += caretOffset;
|
|
373
368
|
}
|
|
374
369
|
}
|
|
375
370
|
getQuery() {
|
|
376
|
-
var _this$input$textConte
|
|
377
|
-
return (_this$input$textConte =
|
|
371
|
+
var _this$input$textConte;
|
|
372
|
+
return (_this$input$textConte = this.input?.textContent?.replace(/\s/g, ' ')) !== null && _this$input$textConte !== void 0 ? _this$input$textConte : '';
|
|
378
373
|
}
|
|
379
374
|
isRenderingGlassOrLoader() {
|
|
380
375
|
const renderLoader = this.props.loader !== false && this.state.loading;
|
|
@@ -392,13 +387,13 @@ class QueryAssist extends Component {
|
|
|
392
387
|
};
|
|
393
388
|
isComposing;
|
|
394
389
|
handleInput = e => {
|
|
395
|
-
var
|
|
390
|
+
var _currentCaret$positio;
|
|
396
391
|
this.togglePlaceholder();
|
|
397
|
-
const currentCaret =
|
|
392
|
+
const currentCaret = this.caret?.getPosition();
|
|
398
393
|
const props = {
|
|
399
394
|
dirty: true,
|
|
400
395
|
query: this.getQuery(),
|
|
401
|
-
caret: typeof currentCaret === 'number' ? currentCaret : (_currentCaret$positio = currentCaret
|
|
396
|
+
caret: typeof currentCaret === 'number' ? currentCaret : (_currentCaret$positio = currentCaret?.position) !== null && _currentCaret$positio !== void 0 ? _currentCaret$positio : 0,
|
|
402
397
|
focus: true
|
|
403
398
|
};
|
|
404
399
|
if (this.immediateState.query === props.query && !this.isComposing) {
|
|
@@ -428,8 +423,7 @@ class QueryAssist extends Component {
|
|
|
428
423
|
}
|
|
429
424
|
this.props.onChange(props);
|
|
430
425
|
if (this.props.autoOpen === 'force' || props.query.length > 0) {
|
|
431
|
-
|
|
432
|
-
(_this$requestData2 = this.requestData) === null || _this$requestData2 === void 0 ? void 0 : _this$requestData2.call(this);
|
|
426
|
+
this.requestData?.();
|
|
433
427
|
}
|
|
434
428
|
};
|
|
435
429
|
// It's necessary to prevent new element creation before any other hooks
|
|
@@ -457,18 +451,17 @@ class QueryAssist extends Component {
|
|
|
457
451
|
setState = (state, resolve) => {
|
|
458
452
|
super.setState(state, () => {
|
|
459
453
|
this._pushHistory(state);
|
|
460
|
-
resolve
|
|
454
|
+
resolve?.();
|
|
461
455
|
});
|
|
462
456
|
};
|
|
463
457
|
_pushHistory(state) {
|
|
464
|
-
var _this$historyStack$;
|
|
465
458
|
const queryIsSet = ('query' in state);
|
|
466
|
-
const queryIsSame =
|
|
459
|
+
const queryIsSame = this.historyStack[0]?.query === state.query;
|
|
467
460
|
if (queryIsSet && !queryIsSame) {
|
|
468
|
-
var _this$caret$getPositi
|
|
461
|
+
var _this$caret$getPositi;
|
|
469
462
|
this.historyStack.unshift({
|
|
470
463
|
query: state.query,
|
|
471
|
-
caret: (_this$caret$getPositi =
|
|
464
|
+
caret: (_this$caret$getPositi = this.caret?.getPosition({
|
|
472
465
|
avoidFocus: true
|
|
473
466
|
})) !== null && _this$caret$getPositi !== void 0 ? _this$caret$getPositi : -1
|
|
474
467
|
});
|
|
@@ -482,8 +475,7 @@ class QueryAssist extends Component {
|
|
|
482
475
|
this.setState({
|
|
483
476
|
query: previous.query
|
|
484
477
|
}, () => {
|
|
485
|
-
|
|
486
|
-
(_this$caret7 = this.caret) === null || _this$caret7 === void 0 ? void 0 : _this$caret7.setPosition(previous.caret);
|
|
478
|
+
this.caret?.setPosition(previous.caret);
|
|
487
479
|
this.handleInput(e);
|
|
488
480
|
});
|
|
489
481
|
};
|
|
@@ -497,19 +489,18 @@ class QueryAssist extends Component {
|
|
|
497
489
|
}
|
|
498
490
|
};
|
|
499
491
|
handleCaretMove = e => {
|
|
500
|
-
var
|
|
492
|
+
var _currentCaret$positio2;
|
|
501
493
|
if (this.isComposing) {
|
|
502
494
|
return;
|
|
503
495
|
}
|
|
504
|
-
const currentCaret =
|
|
505
|
-
const caret = typeof currentCaret === 'number' ? currentCaret : (_currentCaret$positio2 = currentCaret
|
|
496
|
+
const currentCaret = this.caret?.getPosition();
|
|
497
|
+
const caret = typeof currentCaret === 'number' ? currentCaret : (_currentCaret$positio2 = currentCaret?.position) !== null && _currentCaret$positio2 !== void 0 ? _currentCaret$positio2 : 0;
|
|
506
498
|
const popupHidden = !this.state.showPopup && e.type === 'click';
|
|
507
499
|
if (!this.props.disabled && (caret !== this.immediateState.caret || popupHidden)) {
|
|
508
500
|
this.immediateState.caret = caret;
|
|
509
501
|
this.scrollInput();
|
|
510
502
|
if (this.immediateState.query.length > 0) {
|
|
511
|
-
|
|
512
|
-
(_this$requestData3 = this.requestData) === null || _this$requestData3 === void 0 ? void 0 : _this$requestData3.call(this);
|
|
503
|
+
this.requestData?.();
|
|
513
504
|
}
|
|
514
505
|
}
|
|
515
506
|
if (this.immediateState.query.length < 1) {
|
|
@@ -537,7 +528,6 @@ class QueryAssist extends Component {
|
|
|
537
528
|
let afterCompletion = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
538
529
|
return new Promise((resolve, reject) => {
|
|
539
530
|
if (query === _this2.getQuery() && (caret === _this2.immediateState.caret || _this2.immediateState.caret === undefined)) {
|
|
540
|
-
var _this2$caret;
|
|
541
531
|
// Do not setState on unmounted component
|
|
542
532
|
if (!_this2.node) {
|
|
543
533
|
return;
|
|
@@ -555,7 +545,7 @@ class QueryAssist extends Component {
|
|
|
555
545
|
if (!deepEqual(_this2.state.styleRanges, styleRanges)) {
|
|
556
546
|
state.styleRanges = styleRanges;
|
|
557
547
|
}
|
|
558
|
-
_this2.immediateState.selection =
|
|
548
|
+
_this2.immediateState.selection = _this2.caret?.getPosition({
|
|
559
549
|
avoidFocus: true
|
|
560
550
|
});
|
|
561
551
|
_this2.setState(state, resolve);
|
|
@@ -577,7 +567,7 @@ class QueryAssist extends Component {
|
|
|
577
567
|
return this.props.onApply(this.immediateState);
|
|
578
568
|
};
|
|
579
569
|
handleComplete = (data, replace) => {
|
|
580
|
-
var _suggestion$caret, _suggestion$caret2
|
|
570
|
+
var _suggestion$caret, _suggestion$caret2;
|
|
581
571
|
if (!data || !data.data) {
|
|
582
572
|
this.handleApply();
|
|
583
573
|
return;
|
|
@@ -615,7 +605,7 @@ class QueryAssist extends Component {
|
|
|
615
605
|
this.setCaretPosition();
|
|
616
606
|
}
|
|
617
607
|
this.closePopup();
|
|
618
|
-
|
|
608
|
+
this.requestData?.(true);
|
|
619
609
|
};
|
|
620
610
|
requestStyleRanges = () => {
|
|
621
611
|
const {
|
|
@@ -685,8 +675,8 @@ class QueryAssist extends Component {
|
|
|
685
675
|
const completionStartNode = inputChildren && typeof completionStart === 'number' && inputChildren[Math.min(completionStart, inputChildren.length - 1)];
|
|
686
676
|
let offset = completionStartNode && getRect(completionStartNode).right - getRect(this.input).left;
|
|
687
677
|
if (!offset) {
|
|
688
|
-
var _this$caret$getOffset
|
|
689
|
-
const caret = (_this$caret$getOffset =
|
|
678
|
+
var _this$caret$getOffset;
|
|
679
|
+
const caret = (_this$caret$getOffset = this.caret?.getOffset()) !== null && _this$caret$getOffset !== void 0 ? _this$caret$getOffset : 0;
|
|
690
680
|
// Do not compensate caret in the beginning of field
|
|
691
681
|
if (caret === 0) {
|
|
692
682
|
return minOffset;
|
|
@@ -700,8 +690,7 @@ class QueryAssist extends Component {
|
|
|
700
690
|
handleCtrlSpace = e => {
|
|
701
691
|
preventDefault(e);
|
|
702
692
|
if (!this.state.showPopup) {
|
|
703
|
-
|
|
704
|
-
(_this$requestData5 = this.requestData) === null || _this$requestData5 === void 0 ? void 0 : _this$requestData5.call(this);
|
|
693
|
+
this.requestData?.();
|
|
705
694
|
}
|
|
706
695
|
};
|
|
707
696
|
trackPopupMouseState = e => {
|
|
@@ -737,8 +726,7 @@ class QueryAssist extends Component {
|
|
|
737
726
|
blurInput() {
|
|
738
727
|
this.immediateState.selection = null;
|
|
739
728
|
if (!this.props.focus) {
|
|
740
|
-
|
|
741
|
-
(_this$caret10 = this.caret) === null || _this$caret10 === void 0 ? void 0 : _this$caret10.target.blur();
|
|
729
|
+
this.caret?.target.blur();
|
|
742
730
|
}
|
|
743
731
|
}
|
|
744
732
|
/**
|
|
@@ -885,14 +873,14 @@ class QueryAssist extends Component {
|
|
|
885
873
|
actions.push( /*#__PURE__*/React.createElement(I18nContext.Consumer, {
|
|
886
874
|
key: 'clearAction'
|
|
887
875
|
}, _ref6 => {
|
|
888
|
-
var _this$props$translati
|
|
876
|
+
var _this$props$translati;
|
|
889
877
|
let {
|
|
890
878
|
translate
|
|
891
879
|
} = _ref6;
|
|
892
880
|
return /*#__PURE__*/React.createElement(Button, {
|
|
893
881
|
icon: closeIcon,
|
|
894
882
|
className: modules_da7ab055.clear,
|
|
895
|
-
title: (_this$props$translati =
|
|
883
|
+
title: (_this$props$translati = this.props.translations?.clearTitle) !== null && _this$props$translati !== void 0 ? _this$props$translati : translate('clearTitle'),
|
|
896
884
|
ref: this.clearRef,
|
|
897
885
|
onClick: this.clearQuery,
|
|
898
886
|
"data-test": "query-assist-clear-icon"
|
|
@@ -950,7 +938,7 @@ class QueryAssist extends Component {
|
|
|
950
938
|
}), renderGlass && !huge && /*#__PURE__*/React.createElement(Icon, {
|
|
951
939
|
glyph: searchIcon,
|
|
952
940
|
className: modules_da7ab055.icon,
|
|
953
|
-
title: (_translations$searchT = translations
|
|
941
|
+
title: (_translations$searchT = translations?.searchTitle) !== null && _translations$searchT !== void 0 ? _translations$searchT : translate('searchTitle'),
|
|
954
942
|
ref: this.glassRef,
|
|
955
943
|
"data-test": "query-assist-search-icon"
|
|
956
944
|
}), renderLoader && /*#__PURE__*/React.createElement("div", {
|
|
@@ -960,7 +948,7 @@ class QueryAssist extends Component {
|
|
|
960
948
|
}),
|
|
961
949
|
ref: this.loaderRef
|
|
962
950
|
}, /*#__PURE__*/React.createElement(LoaderInline, null)), /*#__PURE__*/React.createElement(ContentEditable, {
|
|
963
|
-
"aria-label": (_translations$searchT2 = translations
|
|
951
|
+
"aria-label": (_translations$searchT2 = translations?.searchTitle) !== null && _translations$searchT2 !== void 0 ? _translations$searchT2 : translate('searchTitle'),
|
|
964
952
|
className: inputClasses,
|
|
965
953
|
"data-test": "ring-query-assist-input",
|
|
966
954
|
inputRef: this.inputRef,
|
|
@@ -1013,7 +1001,7 @@ class QueryAssist extends Component {
|
|
|
1013
1001
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
1014
1002
|
glyph: searchIcon,
|
|
1015
1003
|
className: modules_da7ab055.rightSearchIcon,
|
|
1016
|
-
title: (_translations$searchT3 = translations
|
|
1004
|
+
title: (_translations$searchT3 = translations?.searchTitle) !== null && _translations$searchT3 !== void 0 ? _translations$searchT3 : translate('searchTitle'),
|
|
1017
1005
|
onClick: this.handleApply,
|
|
1018
1006
|
ref: this.glassRef,
|
|
1019
1007
|
"data-test": "query-assist-search-icon"
|
package/dist/select/select.js
CHANGED
|
@@ -149,17 +149,15 @@ function getListItems(props, state, rawFilterString) {
|
|
|
149
149
|
...data[i]
|
|
150
150
|
};
|
|
151
151
|
if (check(item, lowerCaseString, data)) {
|
|
152
|
-
var _state$multipleMap2;
|
|
153
152
|
exactMatch = item.label === filterString;
|
|
154
153
|
if (props.multiple && !(typeof props.multiple === 'object' && props.multiple.removeSelectedItems)) {
|
|
155
|
-
|
|
156
|
-
item.checkbox = !!((_state$multipleMap = state.multipleMap) !== null && _state$multipleMap !== void 0 && _state$multipleMap[item.key]);
|
|
154
|
+
item.checkbox = !!state.multipleMap?.[item.key];
|
|
157
155
|
}
|
|
158
156
|
if (props.multiple && typeof props.multiple === 'object' && props.multiple.limit && Array.isArray(state.selected)) {
|
|
159
157
|
item.disabled = props.multiple.limit === state.selected.length && !state.selected.find(selectedItem => selectedItem.key === item.key);
|
|
160
158
|
}
|
|
161
159
|
// Ignore item if it's multiple and is already selected
|
|
162
|
-
if (!(props.multiple && typeof props.multiple === 'object' && props.multiple.removeSelectedItems &&
|
|
160
|
+
if (!(props.multiple && typeof props.multiple === 'object' && props.multiple.removeSelectedItems && state.multipleMap?.[item.key])) {
|
|
163
161
|
filteredData.push(item);
|
|
164
162
|
}
|
|
165
163
|
}
|
|
@@ -394,7 +392,6 @@ class Select extends Component {
|
|
|
394
392
|
});
|
|
395
393
|
};
|
|
396
394
|
_blurHandler = () => {
|
|
397
|
-
var _this$_popup;
|
|
398
395
|
this.props.onBlur();
|
|
399
396
|
if (this._popup && this._popup.isVisible() && !this._popup.isClickingPopup) {
|
|
400
397
|
window.setTimeout(() => {
|
|
@@ -403,7 +400,7 @@ class Select extends Component {
|
|
|
403
400
|
});
|
|
404
401
|
});
|
|
405
402
|
}
|
|
406
|
-
if (!
|
|
403
|
+
if (!this._popup?.isClickingPopup) {
|
|
407
404
|
this.setState({
|
|
408
405
|
shortcutsEnabled: false,
|
|
409
406
|
focused: false
|
|
@@ -421,19 +418,17 @@ class Select extends Component {
|
|
|
421
418
|
}
|
|
422
419
|
};
|
|
423
420
|
_onEnter = () => {
|
|
424
|
-
var _this$_popup2;
|
|
425
421
|
if (this.state.addButton && this.state.shownData.length === 0) {
|
|
426
422
|
this.addHandler();
|
|
427
423
|
}
|
|
428
424
|
this.props.onDone();
|
|
429
|
-
if (!
|
|
425
|
+
if (!this._popup?.isVisible() && this.props.allowAny) {
|
|
430
426
|
return true;
|
|
431
427
|
}
|
|
432
428
|
return undefined;
|
|
433
429
|
};
|
|
434
430
|
_onEsc = event => {
|
|
435
|
-
|
|
436
|
-
if (!((_this$_popup3 = this._popup) !== null && _this$_popup3 !== void 0 && _this$_popup3.isVisible())) {
|
|
431
|
+
if (!this._popup?.isVisible()) {
|
|
437
432
|
return true;
|
|
438
433
|
} else if (this.props.multiple || !this.props.getInitial) {
|
|
439
434
|
return false;
|
|
@@ -574,7 +569,7 @@ class Select extends Component {
|
|
|
574
569
|
}
|
|
575
570
|
const shownData = this.getListItems(this.filterValue());
|
|
576
571
|
this.setState({
|
|
577
|
-
showPopup: !!shownData.length || this.
|
|
572
|
+
showPopup: !!shownData.length || !this.props.allowAny,
|
|
578
573
|
shownData
|
|
579
574
|
});
|
|
580
575
|
}
|
|
@@ -677,7 +672,6 @@ class Select extends Component {
|
|
|
677
672
|
this._setFilter(e.currentTarget.value, e);
|
|
678
673
|
};
|
|
679
674
|
_setFilter = (value, event) => {
|
|
680
|
-
var _this$_popup4;
|
|
681
675
|
if (this.isInputMode() && !this.state.focused) {
|
|
682
676
|
return;
|
|
683
677
|
}
|
|
@@ -699,7 +693,7 @@ class Select extends Component {
|
|
|
699
693
|
this.props.onChange(fakeSelected, event);
|
|
700
694
|
});
|
|
701
695
|
}
|
|
702
|
-
!
|
|
696
|
+
!this._popup?.isVisible() && this.props.onBeforeOpen();
|
|
703
697
|
this.setState({
|
|
704
698
|
filterValue
|
|
705
699
|
}, () => {
|
|
@@ -905,7 +899,7 @@ class Select extends Component {
|
|
|
905
899
|
} = this.props;
|
|
906
900
|
const icons = [];
|
|
907
901
|
const height = this.props.height || this.context;
|
|
908
|
-
if (!Array.isArray(selected) && selected
|
|
902
|
+
if (!Array.isArray(selected) && selected?.icon) {
|
|
909
903
|
icons.push( /*#__PURE__*/React.createElement("button", {
|
|
910
904
|
title: "Toggle options popup",
|
|
911
905
|
type: "button",
|
|
@@ -945,8 +939,7 @@ class Select extends Component {
|
|
|
945
939
|
return icons;
|
|
946
940
|
}
|
|
947
941
|
_getAvatar() {
|
|
948
|
-
|
|
949
|
-
return !Array.isArray(this.state.selected) && (((_this$state$selected = this.state.selected) === null || _this$state$selected === void 0 ? void 0 : _this$state$selected.avatar) || ((_this$state$selected2 = this.state.selected) === null || _this$state$selected2 === void 0 ? void 0 : _this$state$selected2.showGeneratedAvatar)) && /*#__PURE__*/React.createElement(Avatar, {
|
|
942
|
+
return !Array.isArray(this.state.selected) && (this.state.selected?.avatar || this.state.selected?.showGeneratedAvatar) && /*#__PURE__*/React.createElement(Avatar, {
|
|
950
943
|
className: modules_9d0de074.avatar,
|
|
951
944
|
url: this.state.selected.avatar,
|
|
952
945
|
username: this.state.selected.username,
|
|
@@ -971,7 +964,7 @@ class Select extends Component {
|
|
|
971
964
|
};
|
|
972
965
|
}
|
|
973
966
|
renderSelect(activeItemId) {
|
|
974
|
-
var _this$props$label3, _this$props$label4, _this$
|
|
967
|
+
var _this$props$label3, _this$props$label4, _this$props$buttonCla;
|
|
975
968
|
const dataTest = this.props['data-test'];
|
|
976
969
|
const {
|
|
977
970
|
selectedLabel
|
|
@@ -1028,7 +1021,7 @@ class Select extends Component {
|
|
|
1028
1021
|
"data-test": "ring-select__focus",
|
|
1029
1022
|
enableShortcuts: shortcutsEnabled ? Object.keys({
|
|
1030
1023
|
...this.getShortcutsMap(),
|
|
1031
|
-
...
|
|
1024
|
+
...this._popup?.list?.shortcutsMap
|
|
1032
1025
|
}) : undefined,
|
|
1033
1026
|
afterInput: this.props.type === Type.INPUT && iconsNode
|
|
1034
1027
|
})), this._renderPopup()), this.props.error && /*#__PURE__*/React.createElement("div", {
|