@atlaskit/link-picker 0.0.2 → 0.7.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 (66) hide show
  1. package/CHANGELOG.md +140 -0
  2. package/README.md +27 -5
  3. package/dist/cjs/browser.js +39 -0
  4. package/dist/cjs/index.js +2 -2
  5. package/dist/cjs/messages.js +102 -0
  6. package/dist/cjs/styles.js +90 -0
  7. package/dist/cjs/transformTimeStamp.js +55 -0
  8. package/dist/cjs/types.js +5 -0
  9. package/dist/cjs/ui/LinkSearchList.js +112 -0
  10. package/dist/cjs/ui/LinkSearchListItem.js +101 -0
  11. package/dist/cjs/ui/PanelTextInput.js +119 -0
  12. package/dist/cjs/ui/announcer.js +64 -0
  13. package/dist/cjs/ui/link-picker.js +584 -0
  14. package/dist/cjs/url.js +104 -0
  15. package/dist/cjs/utils.js +40 -0
  16. package/dist/cjs/version.json +1 -1
  17. package/dist/es2019/browser.js +34 -0
  18. package/dist/es2019/index.js +1 -1
  19. package/dist/es2019/messages.js +93 -0
  20. package/dist/es2019/styles.js +94 -0
  21. package/dist/es2019/transformTimeStamp.js +41 -0
  22. package/dist/es2019/types.js +1 -0
  23. package/dist/es2019/ui/LinkSearchList.js +65 -0
  24. package/dist/es2019/ui/LinkSearchListItem.js +88 -0
  25. package/dist/es2019/ui/PanelTextInput.js +93 -0
  26. package/dist/es2019/ui/announcer.js +38 -0
  27. package/dist/es2019/ui/link-picker.js +480 -0
  28. package/dist/es2019/url.js +88 -0
  29. package/dist/es2019/utils.js +24 -0
  30. package/dist/es2019/version.json +1 -1
  31. package/dist/esm/browser.js +34 -0
  32. package/dist/esm/index.js +1 -1
  33. package/dist/esm/messages.js +93 -0
  34. package/dist/esm/styles.js +46 -0
  35. package/dist/esm/transformTimeStamp.js +41 -0
  36. package/dist/esm/types.js +1 -0
  37. package/dist/esm/ui/LinkSearchList.js +87 -0
  38. package/dist/esm/ui/LinkSearchListItem.js +88 -0
  39. package/dist/esm/ui/PanelTextInput.js +93 -0
  40. package/dist/esm/ui/announcer.js +51 -0
  41. package/dist/esm/ui/link-picker.js +559 -0
  42. package/dist/esm/url.js +90 -0
  43. package/dist/esm/utils.js +24 -0
  44. package/dist/esm/version.json +1 -1
  45. package/dist/types/browser.d.ts +15 -0
  46. package/dist/types/index.d.ts +3 -1
  47. package/dist/types/messages.d.ts +92 -0
  48. package/dist/types/styles.d.ts +18 -0
  49. package/dist/types/transformTimeStamp.d.ts +3 -0
  50. package/dist/types/types.d.ts +37 -0
  51. package/dist/types/ui/LinkSearchList.d.ts +20 -0
  52. package/dist/types/ui/LinkSearchListItem.d.ts +17 -0
  53. package/dist/types/ui/PanelTextInput.d.ts +17 -0
  54. package/dist/types/ui/announcer.d.ts +22 -0
  55. package/dist/types/ui/link-picker.d.ts +79 -0
  56. package/dist/types/url.d.ts +5 -0
  57. package/dist/types/utils.d.ts +4 -0
  58. package/example-helpers/flight-deck/_manifest.json +9 -0
  59. package/example-helpers/flight-deck/mockFDResponse.json +133 -0
  60. package/example-helpers/mock-data.ts +316 -0
  61. package/example-helpers/providers.ts +39 -0
  62. package/package.json +35 -6
  63. package/dist/cjs/link-picker.js +0 -12
  64. package/dist/es2019/link-picker.js +0 -3
  65. package/dist/esm/link-picker.js +0 -3
  66. package/dist/types/link-picker.d.ts +0 -1
@@ -0,0 +1,584 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ var _typeof = require("@babel/runtime/helpers/typeof");
6
+
7
+ Object.defineProperty(exports, "__esModule", {
8
+ value: true
9
+ });
10
+ exports.RECENT_SEARCH_LIST_SIZE = exports.LinkPickerWithIntl = exports.LinkPicker = void 0;
11
+
12
+ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
13
+
14
+ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
15
+
16
+ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
17
+
18
+ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
19
+
20
+ var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
21
+
22
+ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
23
+
24
+ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
25
+
26
+ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
27
+
28
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
29
+
30
+ var _react = _interopRequireWildcard(require("react"));
31
+
32
+ var _core = require("@emotion/core");
33
+
34
+ var _reactIntlNext = require("react-intl-next");
35
+
36
+ var _messages = require("../messages");
37
+
38
+ var _PanelTextInput = _interopRequireDefault(require("./PanelTextInput"));
39
+
40
+ var _LinkSearchList = _interopRequireDefault(require("./LinkSearchList"));
41
+
42
+ var _url = require("../url");
43
+
44
+ var _styles = require("../styles");
45
+
46
+ var _browser = require("../browser");
47
+
48
+ var _transformTimeStamp = require("../transformTimeStamp");
49
+
50
+ var _announcer = _interopRequireDefault(require("./announcer"));
51
+
52
+ var _button = _interopRequireWildcard(require("@atlaskit/button"));
53
+
54
+ var _form = require("@atlaskit/form");
55
+
56
+ var _search = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/search"));
57
+
58
+ var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
59
+
60
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
61
+
62
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
63
+
64
+ 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; }
65
+
66
+ 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) { (0, _defineProperty2.default)(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; }
67
+
68
+ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
69
+
70
+ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
71
+
72
+ var RECENT_SEARCH_LIST_SIZE = 5;
73
+ exports.RECENT_SEARCH_LIST_SIZE = RECENT_SEARCH_LIST_SIZE;
74
+
75
+ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
76
+ (0, _inherits2.default)(LinkPicker, _PureComponent);
77
+
78
+ var _super = _createSuper(LinkPicker);
79
+
80
+ function LinkPicker(props) {
81
+ var _this;
82
+
83
+ (0, _classCallCheck2.default)(this, LinkPicker);
84
+ _this = _super.call(this, props);
85
+ (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "wrapperRef", /*#__PURE__*/_react.default.createRef());
86
+ (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "queryVersion", 0);
87
+ (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateInput", /*#__PURE__*/function () {
88
+ var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(input) {
89
+ return _regenerator.default.wrap(function _callee$(_context) {
90
+ while (1) {
91
+ switch (_context.prev = _context.next) {
92
+ case 0:
93
+ if (!(input.length && (0, _url.isSafeUrl)(input))) {
94
+ _context.next = 2;
95
+ break;
96
+ }
97
+
98
+ return _context.abrupt("return", _this.setState({
99
+ url: input,
100
+ selectedIndex: -1,
101
+ items: [],
102
+ isLoading: false,
103
+ invalidUrl: null
104
+ }));
105
+
106
+ case 2:
107
+ return _context.abrupt("return", _this.setState({
108
+ url: input,
109
+ // Unset selection on any input change
110
+ selectedIndex: -1,
111
+ invalidUrl: null
112
+ }, function () {
113
+ _this.updateResults();
114
+ }));
115
+
116
+ case 3:
117
+ case "end":
118
+ return _context.stop();
119
+ }
120
+ }
121
+ }, _callee);
122
+ }));
123
+
124
+ return function (_x) {
125
+ return _ref.apply(this, arguments);
126
+ };
127
+ }());
128
+ (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "createClearHandler", function (field) {
129
+ return function () {
130
+ switch (field) {
131
+ case 'url':
132
+ {
133
+ _this.updateInput('');
134
+
135
+ break;
136
+ }
137
+
138
+ case 'displayText':
139
+ {
140
+ _this.setState((0, _defineProperty2.default)({}, field, ''));
141
+ }
142
+ }
143
+ };
144
+ });
145
+ (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getScreenReaderText", function () {
146
+ var intl = _this.props.intl;
147
+ var _this$state = _this.state,
148
+ items = _this$state.items,
149
+ selectedIndex = _this$state.selectedIndex;
150
+
151
+ if (items.length && selectedIndex > -1) {
152
+ var _items$selectedIndex = items[selectedIndex],
153
+ name = _items$selectedIndex.name,
154
+ container = _items$selectedIndex.container,
155
+ lastUpdatedDate = _items$selectedIndex.lastUpdatedDate,
156
+ lastViewedDate = _items$selectedIndex.lastViewedDate;
157
+ var date = (0, _transformTimeStamp.transformTimeStamp)(intl, lastViewedDate, lastUpdatedDate);
158
+ return "".concat(name, ", ").concat(container, ", ").concat(date === null || date === void 0 ? void 0 : date.pageAction, " ").concat(date === null || date === void 0 ? void 0 : date.dateString, " ").concat((date === null || date === void 0 ? void 0 : date.timeSince) || '');
159
+ }
160
+ });
161
+ (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isUrlPopulatedWithSelectedItem", function () {
162
+ /**
163
+ * When we use ArrowKey to navigate through result items,
164
+ * the URL field will be populated with the content of
165
+ * selected item.
166
+ * This function will check if the URL field is populated
167
+ * with selected item.
168
+ * It can be useful to detect whether we want to insert a
169
+ * smartlink or a hyperlink with customized title
170
+ */
171
+ var _this$state2 = _this.state,
172
+ items = _this$state2.items,
173
+ selectedIndex = _this$state2.selectedIndex,
174
+ url = _this$state2.url;
175
+ var selectedItem = items[selectedIndex];
176
+
177
+ if (selectedItem && selectedItem.url === url) {
178
+ return true;
179
+ }
180
+
181
+ return false;
182
+ });
183
+ (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSelected", function (objectId) {
184
+ var items = _this.state.items;
185
+ var selectedItem = items.find(function (item) {
186
+ return item.objectId === objectId;
187
+ });
188
+
189
+ if (selectedItem) {
190
+ var url = selectedItem.url,
191
+ name = selectedItem.name;
192
+
193
+ _this.handleInsert(url, name, 'typeAhead');
194
+ }
195
+ });
196
+ (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleInsert", function (url, title, inputType) {
197
+ var onSubmit = _this.props.onSubmit;
198
+ var _this$state3 = _this.state,
199
+ rawUrl = _this$state3.url,
200
+ displayText = _this$state3.displayText;
201
+
202
+ if (onSubmit) {
203
+ onSubmit(_objectSpread({
204
+ url: url,
205
+ displayText: displayText || null,
206
+ title: title || null,
207
+ meta: {
208
+ inputMethod: inputType
209
+ }
210
+ }, inputType === 'manual' ? {
211
+ rawUrl: rawUrl
212
+ } : {}));
213
+ }
214
+ });
215
+ (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleMouseEnterResultItem", function (objectId) {
216
+ var items = _this.state.items;
217
+ var index = findIndex(items, function (item) {
218
+ return item.objectId === objectId;
219
+ });
220
+
221
+ _this.setState({
222
+ activeIndex: index
223
+ });
224
+ });
225
+ (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleMouseLeaveResultItem", function (objectId) {
226
+ var _this$state4 = _this.state,
227
+ items = _this$state4.items,
228
+ activeIndex = _this$state4.activeIndex;
229
+ var index = findIndex(items, function (item) {
230
+ return item.objectId === objectId;
231
+ }); // This is to avoid updating index that was set by other mouseenter event
232
+
233
+ if (activeIndex === index) {
234
+ _this.setState({
235
+ activeIndex: -1
236
+ });
237
+ }
238
+ });
239
+ (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSubmit", function () {
240
+ var _this$state5 = _this.state,
241
+ url = _this$state5.url,
242
+ selectedIndex = _this$state5.selectedIndex,
243
+ items = _this$state5.items;
244
+ var selectedItem = items[selectedIndex];
245
+
246
+ if (_this.isUrlPopulatedWithSelectedItem()) {
247
+ _this.handleInsert(selectedItem.url, selectedItem.name, 'typeAhead');
248
+ } else if (url.length > 0) {
249
+ var normalized = (0, _url.normalizeUrl)(url);
250
+
251
+ if (normalized) {
252
+ _this.handleInsert(normalized, null, 'manual');
253
+ } else {
254
+ var intl = _this.props.intl;
255
+ var linkInvalid = intl.formatMessage(_messages.messages.linkInvalid);
256
+
257
+ _this.setState({
258
+ invalidUrl: linkInvalid
259
+ });
260
+ }
261
+ }
262
+ });
263
+ (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleKeyDown", function (event) {
264
+ var _this$state6 = _this.state,
265
+ items = _this$state6.items,
266
+ activeIndex = _this$state6.activeIndex;
267
+ var keyCode = event.keyCode;
268
+ var KEY_CODE_ARROW_DOWN = 40;
269
+ var KEY_CODE_ARROW_UP = 38;
270
+
271
+ if (!items || !items.length) {
272
+ return;
273
+ }
274
+
275
+ var updatedIndex = activeIndex;
276
+
277
+ switch (keyCode) {
278
+ case KEY_CODE_ARROW_DOWN:
279
+ // down
280
+ event.preventDefault();
281
+ updatedIndex = (activeIndex + 1) % items.length;
282
+ break;
283
+
284
+ case KEY_CODE_ARROW_UP:
285
+ // up
286
+ event.preventDefault();
287
+ updatedIndex = activeIndex > 0 ? activeIndex - 1 : items.length - 1;
288
+ break;
289
+ }
290
+
291
+ if ([KEY_CODE_ARROW_DOWN, KEY_CODE_ARROW_UP].includes(keyCode) && items[updatedIndex]) {
292
+ _this.setState({
293
+ activeIndex: updatedIndex,
294
+ selectedIndex: updatedIndex,
295
+ url: items[updatedIndex].url,
296
+ invalidUrl: null
297
+ });
298
+ }
299
+ });
300
+ (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleCancel", function () {
301
+ var onCancel = _this.props.onCancel;
302
+
303
+ if (onCancel) {
304
+ onCancel();
305
+ }
306
+ });
307
+ (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateTextInput", function (displayText) {
308
+ _this.setState({
309
+ displayText: displayText
310
+ });
311
+ });
312
+ _this.state = {
313
+ selectedIndex: -1,
314
+ activeIndex: -1,
315
+ isLoading: false,
316
+ url: (0, _url.normalizeUrl)(props.url) || '',
317
+ displayText: props.displayText || '',
318
+ items: [],
319
+ invalidUrl: null
320
+ };
321
+ /* Cache functions */
322
+
323
+ _this.handleClearUrl = _this.createClearHandler('url');
324
+ _this.handleClearDisplayText = _this.createClearHandler('displayText');
325
+ return _this;
326
+ }
327
+
328
+ (0, _createClass2.default)(LinkPicker, [{
329
+ key: "componentDidMount",
330
+ value: function componentDidMount() {
331
+ this.loadInitialLinkSearchResult();
332
+ }
333
+ }, {
334
+ key: "loadInitialLinkSearchResult",
335
+ value: function loadInitialLinkSearchResult() {
336
+ var url = this.state.url;
337
+
338
+ if (!url) {
339
+ this.updateResults();
340
+ }
341
+ }
342
+ }, {
343
+ key: "getActivePlugin",
344
+ value: function getActivePlugin() {
345
+ if (!this.props.plugins) {
346
+ return null;
347
+ }
348
+
349
+ return this.props.plugins[0];
350
+ }
351
+ /**
352
+ * Interface between link picker and plugins to update results
353
+ */
354
+
355
+ }, {
356
+ key: "updateResults",
357
+ value: function () {
358
+ var _updateResults = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
359
+ var queryVersion, activePlugin, updates, _yield$updates$next, done, value;
360
+
361
+ return _regenerator.default.wrap(function _callee2$(_context2) {
362
+ while (1) {
363
+ switch (_context2.prev = _context2.next) {
364
+ case 0:
365
+ queryVersion = ++this.queryVersion;
366
+ activePlugin = this.getActivePlugin();
367
+
368
+ if (activePlugin) {
369
+ _context2.next = 4;
370
+ break;
371
+ }
372
+
373
+ return _context2.abrupt("return");
374
+
375
+ case 4:
376
+ updates = activePlugin.resolve({
377
+ query: this.state.url
378
+ });
379
+ this.setState({
380
+ isLoading: true,
381
+ items: []
382
+ });
383
+ _context2.prev = 6;
384
+
385
+ case 7:
386
+ if (!(queryVersion === this.queryVersion)) {
387
+ _context2.next = 20;
388
+ break;
389
+ }
390
+
391
+ _context2.next = 10;
392
+ return updates.next();
393
+
394
+ case 10:
395
+ _yield$updates$next = _context2.sent;
396
+ done = _yield$updates$next.done;
397
+ value = _yield$updates$next.value;
398
+
399
+ if (!(queryVersion !== this.queryVersion)) {
400
+ _context2.next = 15;
401
+ break;
402
+ }
403
+
404
+ return _context2.abrupt("return");
405
+
406
+ case 15:
407
+ this.setState({
408
+ items: limit(value),
409
+ isLoading: !done
410
+ });
411
+
412
+ if (!done) {
413
+ _context2.next = 18;
414
+ break;
415
+ }
416
+
417
+ return _context2.abrupt("return");
418
+
419
+ case 18:
420
+ _context2.next = 7;
421
+ break;
422
+
423
+ case 20:
424
+ _context2.next = 25;
425
+ break;
426
+
427
+ case 22:
428
+ _context2.prev = 22;
429
+ _context2.t0 = _context2["catch"](6);
430
+ this.setState({
431
+ isLoading: false
432
+ });
433
+
434
+ case 25:
435
+ case "end":
436
+ return _context2.stop();
437
+ }
438
+ }
439
+ }, _callee2, this, [[6, 22]]);
440
+ }));
441
+
442
+ function updateResults() {
443
+ return _updateResults.apply(this, arguments);
444
+ }
445
+
446
+ return updateResults;
447
+ }()
448
+ }, {
449
+ key: "render",
450
+ value: function render() {
451
+ var _this$state7 = this.state,
452
+ items = _this$state7.items,
453
+ isLoading = _this$state7.isLoading,
454
+ activeIndex = _this$state7.activeIndex,
455
+ selectedIndex = _this$state7.selectedIndex,
456
+ url = _this$state7.url,
457
+ displayText = _this$state7.displayText;
458
+ var formatMessage = this.props.intl.formatMessage;
459
+ var activePlugin = this.getActivePlugin();
460
+ var linkPlaceHolder = formatMessage(activePlugin ? _messages.messages.placeholder : _messages.messages.linkPlaceholder);
461
+ var linkLabel = formatMessage(_messages.messages.linkLabel);
462
+ var linkTextLabel = formatMessage(_messages.messages.linkTextLabel);
463
+ var linkTextPlaceHolder = formatMessage(_messages.messages.linkTextPlaceholder);
464
+ var screenReaderDescriptionId = 'search-recent-links-field-description';
465
+ var linkSearchListId = 'link-picker-search-list';
466
+ var ariaActiveDescendant = selectedIndex > -1 ? "link-search-list-item-".concat(selectedIndex) : ''; // Added workaround with a screen reader Announcer specifically for VoiceOver + Safari
467
+ // as the Aria design pattern for combobox does not work in this case
468
+ // for details: https://a11y-internal.atlassian.net/browse/AK-740
469
+
470
+ var screenReaderText = _browser.browser.safari && this.getScreenReaderText();
471
+ var searchIcon = activePlugin && (0, _core.jsx)(_styles.SearchIconWrapper, {
472
+ "data-testid": "link-picker-search-icon"
473
+ }, (0, _core.jsx)(_search.default, {
474
+ size: "medium",
475
+ label: ''
476
+ }));
477
+ return (0, _core.jsx)("div", {
478
+ "data-testid": "link-picker",
479
+ className: "recent-list",
480
+ css: _styles.recentListStyles
481
+ }, (0, _core.jsx)(_styles.Container, {
482
+ innerRef: this.wrapperRef
483
+ }, screenReaderText && (0, _core.jsx)(_announcer.default, {
484
+ ariaLive: "assertive",
485
+ text: screenReaderText,
486
+ ariaRelevant: "additions",
487
+ delay: 250
488
+ }), (0, _core.jsx)(_visuallyHidden.default, null, (0, _core.jsx)("span", {
489
+ "aria-hidden": "true",
490
+ id: screenReaderDescriptionId
491
+ }, formatMessage(_messages.messages.searchLinkAriaDescription))), (0, _core.jsx)(_PanelTextInput.default, {
492
+ name: "link",
493
+ testId: "link-url",
494
+ role: "combobox",
495
+ label: linkLabel,
496
+ placeholder: linkPlaceHolder,
497
+ value: url,
498
+ autoFocus: true,
499
+ autoComplete: "off",
500
+ elemBeforeInput: searchIcon,
501
+ onSubmit: this.handleSubmit,
502
+ onChange: this.updateInput,
503
+ onKeyDown: this.handleKeyDown,
504
+ onClear: this.handleClearUrl,
505
+ error: this.state.invalidUrl,
506
+ clearLabel: formatMessage(_messages.messages.clearLink),
507
+ "aria-controls": linkSearchListId,
508
+ "aria-autocomplete": "list",
509
+ "aria-activedescendant": ariaActiveDescendant,
510
+ "aria-describedby": screenReaderDescriptionId,
511
+ "aria-expanded": true
512
+ }), (0, _core.jsx)(_PanelTextInput.default, {
513
+ name: "link-text",
514
+ testId: "link-text",
515
+ autoComplete: "off",
516
+ label: linkTextLabel,
517
+ placeholder: linkTextPlaceHolder,
518
+ "aria-label": formatMessage(_messages.messages.linkAriaLabel),
519
+ value: displayText,
520
+ onSubmit: this.handleSubmit,
521
+ onKeyDown: this.handleKeyDown,
522
+ onChange: this.updateTextInput,
523
+ onClear: this.handleClearDisplayText,
524
+ clearLabel: formatMessage(_messages.messages.clearText)
525
+ }), !!items.length && (0, _core.jsx)("div", {
526
+ css: _styles.ListTitleStyles,
527
+ id: "link-picker-list-title",
528
+ "data-testid": "link-picker-list-title"
529
+ }, formatMessage(this.state.url ? _messages.messages.titleResults : _messages.messages.titleRecentlyViewed)), (0, _core.jsx)(_visuallyHidden.default, null, (0, _core.jsx)("span", {
530
+ "aria-live": "polite",
531
+ "aria-atomic": "true",
532
+ id: "fabric.smartcard.linkpicker.suggested.results"
533
+ }, url && formatMessage(_messages.messages.searchLinkResults, {
534
+ count: items.length
535
+ }))), (0, _core.jsx)(_LinkSearchList.default, {
536
+ ariaLabelledBy: "link-picker-list-title",
537
+ ariaControls: "fabric.smartcard.linkpicker.suggested.results",
538
+ id: linkSearchListId,
539
+ role: "listbox",
540
+ items: items,
541
+ isLoading: isLoading,
542
+ selectedIndex: selectedIndex,
543
+ activeIndex: activeIndex,
544
+ onSelect: this.handleSelected,
545
+ onMouseEnter: this.handleMouseEnterResultItem,
546
+ onMouseLeave: this.handleMouseLeaveResultItem
547
+ }), (0, _core.jsx)(_form.FormFooter, {
548
+ align: "end"
549
+ }, (0, _core.jsx)(_button.ButtonGroup, null, (0, _core.jsx)(_button.default, {
550
+ appearance: "default",
551
+ onClick: this.handleCancel,
552
+ testId: "link-picker-cancel-button"
553
+ }, formatMessage(_messages.messages.cancelButton)), (0, _core.jsx)(_button.default, {
554
+ type: "submit",
555
+ appearance: "primary",
556
+ onClick: this.handleSubmit,
557
+ testId: "link-picker-insert-button"
558
+ }, formatMessage(_messages.messages.insertButton))))));
559
+ }
560
+ }]);
561
+ return LinkPicker;
562
+ }(_react.PureComponent);
563
+
564
+ exports.LinkPicker = LinkPicker;
565
+
566
+ function findIndex(array, predicate) {
567
+ var index = -1;
568
+ array.some(function (item, i) {
569
+ if (predicate(item)) {
570
+ index = i;
571
+ return true;
572
+ }
573
+
574
+ return false;
575
+ });
576
+ return index;
577
+ }
578
+
579
+ function limit(items) {
580
+ return items.slice(0, RECENT_SEARCH_LIST_SIZE);
581
+ }
582
+
583
+ var LinkPickerWithIntl = (0, _reactIntlNext.injectIntl)(LinkPicker);
584
+ exports.LinkPickerWithIntl = LinkPickerWithIntl;
@@ -0,0 +1,104 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.isSafeUrl = void 0;
9
+ exports.normalizeUrl = normalizeUrl;
10
+
11
+ var _linkifyIt = _interopRequireDefault(require("linkify-it"));
12
+
13
+ var linkify = (0, _linkifyIt.default)();
14
+ linkify.add('sourcetree:', 'http:');
15
+ var tlds = 'biz|com|edu|gov|net|org|pro|web|xxx|aero|asia|coop|info|museum|name|shop|рф'.split('|');
16
+ var tlds2Char = 'a[cdefgilmnoqrtuwxz]|b[abdefghijmnorstvwyz]|c[acdfghiklmnoruvwxyz]|d[ejkmoz]|e[cegrstu]|f[ijkmor]|g[abdefghilmnpqrstuwy]|h[kmnrtu]|i[delmnoqrst]|j[emop]|k[eghimnprwyz]|l[abcikrstuvy]|m[acdeghklmnopqrtuvwxyz]|n[acefgilopruz]|om|p[aefghkmnrtw]|qa|r[eosuw]|s[abcdegijklmnrtuvxyz]|t[cdfghjklmnortvwz]|u[agksyz]|v[aceginu]|w[fs]|y[et]|z[amw]';
17
+ tlds.push(tlds2Char);
18
+ linkify.tlds(tlds, false);
19
+ var whitelistedURLPatterns = [/^https?:\/\/[^\s]*$/im, /^ftps?:\/\//im, /^\//im, /^mailto:/im, /^skype:/im, /^callto:[^\s]*$/im, /^facetime:[^\s]*$/im, /^git:/im, /^irc6?:/im, /^news:/im, /^nntp:/im, /^feed:/im, /^cvs:/im, /^svn:/im, /^mvn:/im, /^ssh:/im, /^scp:\/\//im, /^sftp:\/\//im, /^itms:/im, /^notes:/im, /^hipchat:\/\//im, /^sourcetree:/im, /^urn:/im, /^tel:/im, /^xmpp:/im, /^telnet:/im, /^vnc:/im, /^rdp:/im, /^whatsapp:/im, /^slack:/im, /^sips?:/im, /^magnet:/im, /^foo:/im, /^#/im];
20
+
21
+ var normaliseLinkHref = function normaliseLinkHref(url) {
22
+ var match = getLinkMatch(url);
23
+ return match && match.url || null;
24
+ };
25
+
26
+ var getLinkMatch = function getLinkMatch(str) {
27
+ if (!str) {
28
+ return null;
29
+ }
30
+
31
+ var match = linkifyMatch(str);
32
+
33
+ if (!match.length) {
34
+ match = linkify.match(str);
35
+ }
36
+
37
+ return match && match.length > 0 && match[0].index === 0 && match[0].lastIndex === str.trim().length ? match[0] : null;
38
+ };
39
+
40
+ var LINK_REGEXP = /(https?|ftp):\/\/[^\s]+/;
41
+
42
+ var linkifyMatch = function linkifyMatch(text) {
43
+ var matches = [];
44
+
45
+ if (!LINK_REGEXP.test(text)) {
46
+ return matches;
47
+ }
48
+
49
+ var startpos = 0;
50
+ var substr;
51
+
52
+ while (substr = text.substr(startpos)) {
53
+ var link = (substr.match(LINK_REGEXP) || [''])[0];
54
+
55
+ if (link) {
56
+ var index = substr.search(LINK_REGEXP);
57
+ var start = index >= 0 ? index + startpos : index;
58
+ var end = start + link.length;
59
+ matches.push({
60
+ index: start,
61
+ lastIndex: end,
62
+ raw: link,
63
+ url: link,
64
+ text: link,
65
+ schema: ''
66
+ });
67
+ startpos += end;
68
+ } else {
69
+ break;
70
+ }
71
+ }
72
+
73
+ return matches;
74
+ };
75
+
76
+ var isSafeUrl = function isSafeUrl(url) {
77
+ var urlTrimmed = url.trim();
78
+
79
+ if (urlTrimmed.length === 0) {
80
+ return true;
81
+ }
82
+
83
+ return whitelistedURLPatterns.some(function (p) {
84
+ return p.test(urlTrimmed);
85
+ });
86
+ };
87
+ /**
88
+ * Adds protocol to url if needed.
89
+ */
90
+
91
+
92
+ exports.isSafeUrl = isSafeUrl;
93
+
94
+ function normalizeUrl(url) {
95
+ if (!url) {
96
+ return '';
97
+ }
98
+
99
+ if (isSafeUrl(url)) {
100
+ return url.trim();
101
+ }
102
+
103
+ return normaliseLinkHref(url);
104
+ }