@atlaskit/link-picker 1.1.4 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (102) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/cjs/index.js +2 -2
  3. package/dist/cjs/ui/error-boundary-fallback/generic-error-svg/index.js +67 -0
  4. package/dist/cjs/ui/error-boundary-fallback/generic-error-svg/styled.js +20 -0
  5. package/dist/cjs/ui/error-boundary-fallback/index.js +50 -0
  6. package/dist/cjs/ui/index.js +49 -0
  7. package/dist/cjs/ui/{announcer.js → link-picker/announcer.js} +0 -0
  8. package/dist/cjs/{browser.js → ui/link-picker/browser.js} +0 -0
  9. package/dist/cjs/ui/{link-picker.js → link-picker/index.js} +24 -30
  10. package/dist/cjs/ui/{link-search-list → link-picker/link-search-list}/index.js +0 -0
  11. package/dist/cjs/ui/{link-search-list → link-picker/link-search-list}/styled.js +0 -0
  12. package/dist/cjs/ui/{link-search-no-results → link-picker/link-search-no-results}/index.js +0 -0
  13. package/dist/cjs/ui/{link-search-no-results → link-picker/link-search-no-results}/no-results-svg/index.js +0 -0
  14. package/dist/cjs/ui/{link-search-no-results → link-picker/link-search-no-results}/no-results-svg/styled.js +0 -0
  15. package/dist/cjs/ui/{list-item → link-picker/list-item}/index.js +1 -1
  16. package/dist/cjs/ui/{list-item → link-picker/list-item}/styled.js +0 -0
  17. package/dist/cjs/{messages.js → ui/link-picker/messages.js} +0 -0
  18. package/dist/cjs/ui/{styled.js → link-picker/styled.js} +6 -5
  19. package/dist/cjs/ui/{text-input → link-picker/text-input}/index.js +1 -1
  20. package/dist/cjs/ui/{text-input → link-picker/text-input}/styled.js +0 -0
  21. package/dist/cjs/{transformTimeStamp.js → ui/link-picker/transformTimeStamp.js} +0 -0
  22. package/dist/cjs/{url.js → ui/link-picker/url.js} +0 -0
  23. package/dist/cjs/{utils.js → ui/link-picker/utils.js} +0 -0
  24. package/dist/cjs/ui/loader-fallback/index.js +24 -0
  25. package/dist/cjs/{types.js → ui/types.js} +0 -0
  26. package/dist/cjs/version.json +1 -1
  27. package/dist/es2019/index.js +1 -1
  28. package/dist/es2019/ui/error-boundary-fallback/generic-error-svg/index.js +56 -0
  29. package/dist/es2019/ui/error-boundary-fallback/generic-error-svg/styled.js +8 -0
  30. package/dist/es2019/ui/error-boundary-fallback/index.js +31 -0
  31. package/dist/es2019/ui/index.js +23 -0
  32. package/dist/es2019/ui/{announcer.js → link-picker/announcer.js} +0 -0
  33. package/dist/es2019/{browser.js → ui/link-picker/browser.js} +0 -0
  34. package/dist/es2019/ui/{link-picker.js → link-picker/index.js} +23 -30
  35. package/dist/es2019/ui/{link-search-list → link-picker/link-search-list}/index.js +0 -0
  36. package/dist/es2019/ui/{link-search-list → link-picker/link-search-list}/styled.js +0 -0
  37. package/dist/es2019/ui/{link-search-no-results → link-picker/link-search-no-results}/index.js +0 -0
  38. package/dist/es2019/ui/{link-search-no-results → link-picker/link-search-no-results}/no-results-svg/index.js +0 -0
  39. package/dist/es2019/ui/{link-search-no-results → link-picker/link-search-no-results}/no-results-svg/styled.js +0 -0
  40. package/dist/es2019/ui/{list-item → link-picker/list-item}/index.js +1 -1
  41. package/dist/es2019/ui/{list-item → link-picker/list-item}/styled.js +0 -0
  42. package/dist/es2019/{messages.js → ui/link-picker/messages.js} +0 -0
  43. package/dist/es2019/ui/{styled.js → link-picker/styled.js} +10 -6
  44. package/dist/es2019/ui/{text-input → link-picker/text-input}/index.js +1 -1
  45. package/dist/es2019/ui/{text-input → link-picker/text-input}/styled.js +0 -0
  46. package/dist/es2019/{transformTimeStamp.js → ui/link-picker/transformTimeStamp.js} +0 -0
  47. package/dist/es2019/{url.js → ui/link-picker/url.js} +0 -0
  48. package/dist/es2019/{utils.js → ui/link-picker/utils.js} +0 -0
  49. package/dist/es2019/ui/loader-fallback/index.js +11 -0
  50. package/dist/es2019/{types.js → ui/types.js} +0 -0
  51. package/dist/es2019/version.json +1 -1
  52. package/dist/esm/index.js +1 -1
  53. package/dist/esm/ui/error-boundary-fallback/generic-error-svg/index.js +56 -0
  54. package/dist/esm/ui/error-boundary-fallback/generic-error-svg/styled.js +8 -0
  55. package/dist/esm/ui/error-boundary-fallback/index.js +33 -0
  56. package/dist/esm/ui/index.js +27 -0
  57. package/dist/esm/ui/{announcer.js → link-picker/announcer.js} +0 -0
  58. package/dist/esm/{browser.js → ui/link-picker/browser.js} +0 -0
  59. package/dist/esm/ui/{link-picker.js → link-picker/index.js} +22 -30
  60. package/dist/esm/ui/{link-search-list → link-picker/link-search-list}/index.js +0 -0
  61. package/dist/esm/ui/{link-search-list → link-picker/link-search-list}/styled.js +0 -0
  62. package/dist/esm/ui/{link-search-no-results → link-picker/link-search-no-results}/index.js +0 -0
  63. package/dist/esm/ui/{link-search-no-results → link-picker/link-search-no-results}/no-results-svg/index.js +0 -0
  64. package/dist/esm/ui/{link-search-no-results → link-picker/link-search-no-results}/no-results-svg/styled.js +0 -0
  65. package/dist/esm/ui/{list-item → link-picker/list-item}/index.js +1 -1
  66. package/dist/esm/ui/{list-item → link-picker/list-item}/styled.js +0 -0
  67. package/dist/esm/{messages.js → ui/link-picker/messages.js} +0 -0
  68. package/dist/esm/ui/{styled.js → link-picker/styled.js} +3 -2
  69. package/dist/esm/ui/{text-input → link-picker/text-input}/index.js +1 -1
  70. package/dist/esm/ui/{text-input → link-picker/text-input}/styled.js +0 -0
  71. package/dist/esm/{transformTimeStamp.js → ui/link-picker/transformTimeStamp.js} +0 -0
  72. package/dist/esm/{url.js → ui/link-picker/url.js} +0 -0
  73. package/dist/esm/{utils.js → ui/link-picker/utils.js} +0 -0
  74. package/dist/esm/ui/loader-fallback/index.js +11 -0
  75. package/dist/esm/{types.js → ui/types.js} +0 -0
  76. package/dist/esm/version.json +1 -1
  77. package/dist/types/index.d.ts +2 -2
  78. package/dist/types/ui/error-boundary-fallback/generic-error-svg/index.d.ts +4 -0
  79. package/dist/types/ui/error-boundary-fallback/generic-error-svg/styled.d.ts +1 -0
  80. package/dist/types/ui/error-boundary-fallback/index.d.ts +3 -0
  81. package/dist/types/ui/index.d.ts +3 -0
  82. package/dist/types/ui/{announcer.d.ts → link-picker/announcer.d.ts} +0 -0
  83. package/dist/types/{browser.d.ts → ui/link-picker/browser.d.ts} +0 -0
  84. package/dist/types/ui/{link-picker.d.ts → link-picker/index.d.ts} +4 -5
  85. package/dist/types/ui/{link-search-list → link-picker/link-search-list}/index.d.ts +0 -0
  86. package/dist/types/ui/{link-search-list → link-picker/link-search-list}/styled.d.ts +0 -0
  87. package/dist/types/ui/{link-search-no-results → link-picker/link-search-no-results}/index.d.ts +0 -0
  88. package/dist/types/ui/{link-search-no-results → link-picker/link-search-no-results}/no-results-svg/index.d.ts +0 -0
  89. package/dist/types/ui/{link-search-no-results → link-picker/link-search-no-results}/no-results-svg/styled.d.ts +0 -0
  90. package/dist/types/ui/{list-item → link-picker/list-item}/index.d.ts +0 -0
  91. package/dist/types/ui/{list-item → link-picker/list-item}/styled.d.ts +0 -0
  92. package/dist/types/{messages.d.ts → ui/link-picker/messages.d.ts} +0 -0
  93. package/dist/types/ui/link-picker/styled.d.ts +4 -0
  94. package/dist/types/ui/{text-input → link-picker/text-input}/index.d.ts +0 -0
  95. package/dist/types/ui/{text-input → link-picker/text-input}/styled.d.ts +0 -0
  96. package/dist/types/{transformTimeStamp.d.ts → ui/link-picker/transformTimeStamp.d.ts} +1 -1
  97. package/dist/types/{url.d.ts → ui/link-picker/url.d.ts} +0 -0
  98. package/dist/types/{utils.d.ts → ui/link-picker/utils.d.ts} +0 -0
  99. package/dist/types/ui/loader-fallback/index.d.ts +3 -0
  100. package/dist/types/{types.d.ts → ui/types.d.ts} +0 -0
  101. package/package.json +8 -4
  102. package/dist/types/ui/styled.d.ts +0 -4
@@ -1,17 +1,17 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
 
3
3
  /** @jsx jsx */
4
- import React, { PureComponent } from 'react';
4
+ import { PureComponent } from 'react';
5
5
  import { jsx } from '@emotion/react';
6
6
  import { injectIntl } from 'react-intl-next';
7
- import { messages } from '../messages';
7
+ import { messages } from './messages';
8
8
  import PanelTextInput from './text-input';
9
9
  import LinkSearchList from './link-search-list';
10
- import { normalizeUrl, isSafeUrl } from '../url';
11
- import { recentListStyles, containerStyles, searchIconStyles, listTitleStyles } from './styled';
12
- import { browser } from '../browser';
13
- import { transformTimeStamp } from '../transformTimeStamp';
14
- import Announcer from './announcer';
10
+ import { normalizeUrl, isSafeUrl } from './url';
11
+ import { rootContainerStyles, searchIconStyles, listTitleStyles } from './styled';
12
+ import { browser } from './browser';
13
+ import { transformTimeStamp } from './transformTimeStamp';
14
+ import Announcer from './/announcer';
15
15
  import Button, { ButtonGroup } from '@atlaskit/button';
16
16
  import { FormFooter } from '@atlaskit/form';
17
17
  import EditorSearchIcon from '@atlaskit/icon/glyph/editor/search';
@@ -23,8 +23,6 @@ class LinkPicker extends PureComponent {
23
23
  constructor(props) {
24
24
  super(props);
25
25
 
26
- _defineProperty(this, "wrapperRef", /*#__PURE__*/React.createRef());
27
-
28
26
  _defineProperty(this, "queryVersion", 0);
29
27
 
30
28
  _defineProperty(this, "updateInput", async input => {
@@ -183,25 +181,24 @@ class LinkPicker extends PureComponent {
183
181
  selectedIndex,
184
182
  items
185
183
  } = this.state;
184
+ const {
185
+ intl
186
+ } = this.props;
186
187
  const selectedItem = items[selectedIndex];
187
188
 
188
189
  if (this.isUrlPopulatedWithSelectedItem()) {
189
- this.handleInsert(selectedItem.url, selectedItem.name, 'typeAhead');
190
- } else if (url.length > 0) {
191
- const normalized = normalizeUrl(url);
190
+ return this.handleInsert(selectedItem.url, selectedItem.name, 'typeAhead');
191
+ }
192
192
 
193
- if (normalized) {
194
- this.handleInsert(normalized, null, 'manual');
195
- } else {
196
- const {
197
- intl
198
- } = this.props;
199
- const linkInvalid = intl.formatMessage(messages.linkInvalid);
200
- this.setState({
201
- invalidUrl: linkInvalid
202
- });
203
- }
193
+ const normalized = normalizeUrl(url);
194
+
195
+ if (normalized) {
196
+ return this.handleInsert(normalized, null, 'manual');
204
197
  }
198
+
199
+ return this.setState({
200
+ invalidUrl: intl.formatMessage(messages.linkInvalid)
201
+ });
205
202
  });
206
203
 
207
204
  _defineProperty(this, "handleKeyDown", event => {
@@ -392,11 +389,7 @@ class LinkPicker extends PureComponent {
392
389
  const noResults = activePlugin && !isLoading && !items.length && !isSafeUrl(url);
393
390
  return jsx("div", {
394
391
  "data-testid": "link-picker",
395
- className: "recent-list",
396
- css: recentListStyles
397
- }, jsx("div", {
398
- css: containerStyles,
399
- ref: this.wrapperRef
392
+ css: rootContainerStyles
400
393
  }, screenReaderText && jsx(Announcer, {
401
394
  ariaLive: "assertive",
402
395
  text: screenReaderText,
@@ -476,7 +469,7 @@ class LinkPicker extends PureComponent {
476
469
  appearance: "primary",
477
470
  onClick: this.handleSubmit,
478
471
  testId: "link-picker-insert-button"
479
- }, formatMessage(isEditing ? messages.saveButton : messages.insertButton))))));
472
+ }, formatMessage(isEditing ? messages.saveButton : messages.insertButton)))));
480
473
  }
481
474
 
482
475
  }
@@ -498,4 +491,4 @@ function limit(items) {
498
491
  return items.slice(0, RECENT_SEARCH_LIST_SIZE);
499
492
  }
500
493
 
501
- export const LinkPickerWithIntl = injectIntl(LinkPicker);
494
+ export default injectIntl(LinkPicker);
@@ -2,7 +2,7 @@
2
2
  import { Fragment } from 'react';
3
3
  import { jsx } from '@emotion/react';
4
4
  import { injectIntl } from 'react-intl-next';
5
- import { transformTimeStamp } from '../../transformTimeStamp';
5
+ import { transformTimeStamp } from '../transformTimeStamp';
6
6
  import { itemNameStyles, itemIconStyles, listItemContextStyles, listItemNameStyles, composeListItemStyles, imgStyles } from './styled';
7
7
 
8
8
  const LinkSearchListItem = ({
@@ -6,15 +6,19 @@ import { N500 } from '@atlaskit/theme/colors'; // AFP-2532 TODO: Fix automatic s
6
6
  import { typography } from '@atlaskit/theme';
7
7
  import { gridSize } from '@atlaskit/theme/constants';
8
8
  const LINK_PICKER_WIDTH_IN_PX = 342;
9
- export const recentListStyles = css`
9
+ const LINK_PICKER_MIN_HEIGHT_IN_PX = 234;
10
+ export const rootContainerStyles = css`
10
11
  width: ${LINK_PICKER_WIDTH_IN_PX}px;
11
- `;
12
- export const containerStyles = css`
13
12
  padding: ${gridSize() * 2}px;
14
- width: 100%;
15
- overflow: hidden;
16
- line-height: initial;
17
13
  box-sizing: border-box;
14
+ line-height: initial;
15
+ min-height: ${LINK_PICKER_MIN_HEIGHT_IN_PX}px;
16
+ `;
17
+ export const rootContainerStylesForLoader = css`
18
+ ${rootContainerStyles}
19
+ display: flex;
20
+ align-items: center;
21
+ justify-content: center;
18
22
  `;
19
23
  export const searchIconStyles = css`
20
24
  margin-left: ${gridSize() / 2}px;
@@ -7,7 +7,7 @@ import { ErrorMessage, Field } from '@atlaskit/form';
7
7
  import Tooltip from '@atlaskit/tooltip';
8
8
  import Textfield from '@atlaskit/textfield';
9
9
  import Selectclear from '@atlaskit/icon/glyph/select-clear';
10
- import { isRedoEvent, isUndoEvent } from '../../utils';
10
+ import { isRedoEvent, isUndoEvent } from '../utils';
11
11
  import { clearTextButtonStyles, fieldStyles } from './styled';
12
12
 
13
13
  const PanelTextInput = props => {
File without changes
@@ -0,0 +1,11 @@
1
+ /** @jsx jsx */
2
+ import { jsx } from '@emotion/react';
3
+ import Spinner from '@atlaskit/spinner';
4
+ import { rootContainerStylesForLoader } from '../link-picker/styled';
5
+ export const LoaderFallback = jsx("div", {
6
+ css: rootContainerStylesForLoader,
7
+ "data-testid": "link-picker-root-loader-boundary-ui"
8
+ }, jsx(Spinner, {
9
+ testId: "link-picker.component-loading-indicator",
10
+ size: "medium"
11
+ }));
File without changes
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/link-picker",
3
- "version": "1.1.4",
3
+ "version": "1.3.0",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/index.js CHANGED
@@ -1 +1 @@
1
- export { LinkPickerWithIntl as LinkPicker } from './ui/link-picker';
1
+ export { ComposedLinkPicker as LinkPicker } from './ui';
@@ -0,0 +1,56 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+
3
+ /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
4
+
5
+ /** @jsx jsx */
6
+ import { jsx } from '@emotion/react';
7
+ import { genericErrorStyles } from './styled';
8
+
9
+ var GenericErrorSVG = function GenericErrorSVG(props) {
10
+ var id = 'link-picker-ui-generic-error-svg';
11
+ return jsx("svg", _extends({
12
+ height: "90",
13
+ viewBox: "0 0 164 212",
14
+ fill: "none",
15
+ xmlns: "http://www.w3.org/2000/svg",
16
+ css: genericErrorStyles
17
+ }, props), jsx("path", {
18
+ d: "m95.43 74.16 66.44 115.08c5.84 10.12-1.46 22.76-13.14 22.76H15.85c-11.68 0-18.98-12.65-13.14-22.76L69.15 74.16c5.84-10.12 20.44-10.12 26.28 0Zm-7.56 83.55 2.88-44.35c.34-5.29-3.86-9.78-9.16-9.78-5.31 0-9.51 4.48-9.16 9.78l2.88 44.35a6.3 6.3 0 0 0 6.28 5.89c3.31 0 6.06-2.58 6.28-5.89Zm-15.84 23.54c0 5.66 4.76 10.1 10.39 9.58 4.85-.45 8.73-4.5 8.83-9.37.11-5.45-4.31-9.94-9.73-9.94-5.23-.01-9.49 4.37-9.49 9.73Z",
19
+ fill: "url(#".concat(id, ")")
20
+ }), jsx("path", {
21
+ opacity: ".6",
22
+ d: "M93.35 27.17 85.94.45c-.17-.62-1.07-.58-1.19.05l-4.66 25.1-5.8-1.08a.612.612 0 0 0-.7.76L81 52c.17.62 1.07.58 1.19-.05l4.66-25.1 5.8 1.08c.45.08.82-.33.7-.76ZM66.77 41.81 55.9 33.26c-.22-.18-.53.07-.41.33l5.53 11.43-2.66 1.29c-.18.09-.2.33-.05.45l10.87 8.55c.22.18.53-.07.41-.33l-5.53-11.43 2.66-1.29c.17-.08.2-.33.05-.45Z",
23
+ fill: "#C1C7D0"
24
+ }), jsx("path", {
25
+ opacity: ".6",
26
+ d: "M102.78 56.75a.993.993 0 0 1-.92-1.38c-.24-.77-2.29-2.85-3.54-4.11-2.97-3.01-4.93-5-3.84-6.49 1.09-1.48 3.58-.22 7.35 1.7 1.32.67 3.35 1.7 4.45 2.03-.64-.95-2.24-2.58-3.28-3.63-2.97-3.01-4.93-5-3.84-6.49 1.08-1.48 3.58-.22 7.34 1.7 1.32.67 3.34 1.7 4.45 2.03-.64-.95-2.24-2.57-3.28-3.62-2.97-3.01-4.93-5-3.84-6.49 1.08-1.48 3.57-.22 7.34 1.7 1.58.8 4.18 2.13 4.98 2.13a1.005 1.005 0 0 1 1.46 1.36c-1.09 1.48-3.57.22-7.34-1.7-1.32-.67-3.34-1.7-4.44-2.03.64.95 2.24 2.57 3.28 3.62 2.97 3.01 4.93 5 3.84 6.49-1.08 1.48-3.57.22-7.34-1.7-1.32-.67-3.35-1.7-4.45-2.03.64.95 2.24 2.57 3.28 3.63 2.97 3.01 4.93 5 3.84 6.49-1.09 1.48-3.58.22-7.35-1.7-1.32-.67-3.35-1.71-4.45-2.03.64.95 2.24 2.58 3.28 3.63 2.97 3.01 4.93 5 3.84 6.49-.21.26-.51.4-.82.4Zm5.56 14.32c-.35 0-.69-.19-.88-.52-1.04-1.88-2.22-4.02-.91-5.21 1.31-1.2 3.34.18 5.49 1.63.87.59 2.26 1.53 2.93 1.71-.12-.68-.93-2.15-1.45-3.07-1.26-2.27-2.45-4.41-1.14-5.61 1.31-1.2 3.34.18 5.49 1.63.96.65 2.54 1.72 3.1 1.74a1 1 0 0 1 1.27 1.54c-1.31 1.2-3.34-.17-5.49-1.63-.87-.59-2.26-1.53-2.93-1.71.12.68.93 2.15 1.45 3.07 1.26 2.27 2.45 4.41 1.14 5.61-1.31 1.2-3.34-.18-5.49-1.63-.87-.59-2.26-1.53-2.93-1.71.12.68.93 2.14 1.22 2.67.27.48.09 1.09-.39 1.36-.15.09-.32.13-.48.13Zm-54.32-2.89c-.22 0-.44-.04-.67-.14-1.64-.69-1.24-3.11-.81-5.67.17-1.04.45-2.7.33-3.38-.57.39-1.56 1.75-2.18 2.6-1.53 2.09-2.99 4.07-4.62 3.38a.991.991 0 0 1-.53-1.31c.2-.48.73-.72 1.21-.57.52-.21 1.65-1.75 2.34-2.68 1.53-2.09 2.98-4.08 4.62-3.38 1.64.69 1.24 3.11.81 5.67-.17 1.04-.45 2.7-.33 3.38.57-.39 1.56-1.75 2.18-2.6 1.53-2.09 2.98-4.08 4.62-3.38 1.63.69 1.24 3.09.89 5.21-.09.54-.6.91-1.15.83-.54-.09-.92-.6-.83-1.15.1-.59.37-2.24.26-2.92-.57.39-1.56 1.75-2.18 2.6-1.33 1.79-2.59 3.51-3.96 3.51Z",
27
+ fill: "#B3BAC5"
28
+ }), jsx("defs", null, jsx("linearGradient", {
29
+ id: id,
30
+ x1: "26.169",
31
+ y1: "228.621",
32
+ x2: "138.408",
33
+ y2: "116.382",
34
+ gradientUnits: "userSpaceOnUse"
35
+ }, jsx("stop", {
36
+ stopColor: "#C1C7D0"
37
+ }), jsx("stop", {
38
+ offset: ".297",
39
+ stopColor: "#C6CBD4",
40
+ stopOpacity: ".881"
41
+ }), jsx("stop", {
42
+ offset: ".63",
43
+ stopColor: "#D3D7DE",
44
+ stopOpacity: ".748"
45
+ }), jsx("stop", {
46
+ offset: ".98",
47
+ stopColor: "#E9EBEF",
48
+ stopOpacity: ".608"
49
+ }), jsx("stop", {
50
+ offset: "1",
51
+ stopColor: "#EBECF0",
52
+ stopOpacity: ".6"
53
+ }))));
54
+ };
55
+
56
+ export default GenericErrorSVG;
@@ -0,0 +1,8 @@
1
+ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
+
3
+ var _templateObject;
4
+
5
+ import { gridSize as getGridSize } from '@atlaskit/theme/constants';
6
+ import { css } from '@emotion/react';
7
+ var HEIGHT = 90;
8
+ export var genericErrorStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n height: ", "px;\n margin: 0 auto ", "px;\n display: block;\n"])), HEIGHT, getGridSize() * 3);
@@ -0,0 +1,33 @@
1
+ /** @jsx jsx */
2
+ import { jsx } from '@emotion/react';
3
+ import EmptyState from '@atlaskit/empty-state';
4
+ import { defineMessages, useIntl } from 'react-intl-next';
5
+ import GenericErrorSVG from './generic-error-svg';
6
+ import { rootContainerStyles } from '../link-picker/styled';
7
+ var messages = defineMessages({
8
+ heading: {
9
+ defaultMessage: 'Something went wrong!',
10
+ description: 'Heading displayed when an unhandled error occurs.',
11
+ id: 'fabric.linkPicker.unhandledError.heading'
12
+ },
13
+ description: {
14
+ defaultMessage: 'Try reloading the page.',
15
+ description: 'Body message shown underneath the heading when an unhandled error occurs.',
16
+ id: 'fabric.linkPicker.unhandledError.description'
17
+ }
18
+ });
19
+ export var ErrorBoundaryFallback = function ErrorBoundaryFallback() {
20
+ var intl = useIntl();
21
+ var header = intl.formatMessage(messages.heading);
22
+ var description = intl.formatMessage(messages.description);
23
+ return jsx("div", {
24
+ css: rootContainerStyles,
25
+ "data-testid": "link-picker-root-error-boundary-ui"
26
+ }, jsx(EmptyState, {
27
+ header: header,
28
+ renderImage: function renderImage() {
29
+ return jsx(GenericErrorSVG, null);
30
+ },
31
+ description: description
32
+ }));
33
+ };
@@ -0,0 +1,27 @@
1
+ import React, { memo } from 'react';
2
+ import { AnalyticsErrorBoundary } from '@atlaskit/analytics-next';
3
+ import { LazySuspense, lazyForPaint } from 'react-loosely-lazy';
4
+ import { name as packageName, version as packageVersion } from '../version.json';
5
+ import { ErrorBoundaryFallback } from './error-boundary-fallback';
6
+ import { LoaderFallback } from './loader-fallback';
7
+ var COMPONENT_NAME = 'LinkPicker';
8
+ var ANALYTICS_CHANNEL = 'media';
9
+ var PACKAGE_DATA = {
10
+ packageName: packageName,
11
+ packageVersion: packageVersion,
12
+ componentName: COMPONENT_NAME
13
+ };
14
+ var LazyLinkPicker = lazyForPaint(function () {
15
+ return import(
16
+ /* webpackChunkName: "@atlaskit-internal_link-picker" */
17
+ './link-picker');
18
+ });
19
+ export var ComposedLinkPicker = /*#__PURE__*/memo(function (props) {
20
+ return /*#__PURE__*/React.createElement(AnalyticsErrorBoundary, {
21
+ channel: ANALYTICS_CHANNEL,
22
+ data: PACKAGE_DATA,
23
+ ErrorComponent: ErrorBoundaryFallback
24
+ }, /*#__PURE__*/React.createElement(LazySuspense, {
25
+ fallback: LoaderFallback
26
+ }, /*#__PURE__*/React.createElement(LazyLinkPicker, props)));
27
+ });
@@ -18,17 +18,17 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
18
18
  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; } }
19
19
 
20
20
  /** @jsx jsx */
21
- import React, { PureComponent } from 'react';
21
+ import { PureComponent } from 'react';
22
22
  import { jsx } from '@emotion/react';
23
23
  import { injectIntl } from 'react-intl-next';
24
- import { messages } from '../messages';
24
+ import { messages } from './messages';
25
25
  import PanelTextInput from './text-input';
26
26
  import LinkSearchList from './link-search-list';
27
- import { normalizeUrl, isSafeUrl } from '../url';
28
- import { recentListStyles, containerStyles, searchIconStyles, listTitleStyles } from './styled';
29
- import { browser } from '../browser';
30
- import { transformTimeStamp } from '../transformTimeStamp';
31
- import Announcer from './announcer';
27
+ import { normalizeUrl, isSafeUrl } from './url';
28
+ import { rootContainerStyles, searchIconStyles, listTitleStyles } from './styled';
29
+ import { browser } from './browser';
30
+ import { transformTimeStamp } from './transformTimeStamp';
31
+ import Announcer from './/announcer';
32
32
  import Button, { ButtonGroup } from '@atlaskit/button';
33
33
  import { FormFooter } from '@atlaskit/form';
34
34
  import EditorSearchIcon from '@atlaskit/icon/glyph/editor/search';
@@ -48,8 +48,6 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
48
48
 
49
49
  _this = _super.call(this, props);
50
50
 
51
- _defineProperty(_assertThisInitialized(_this), "wrapperRef", /*#__PURE__*/React.createRef());
52
-
53
51
  _defineProperty(_assertThisInitialized(_this), "queryVersion", 0);
54
52
 
55
53
  _defineProperty(_assertThisInitialized(_this), "updateInput", /*#__PURE__*/function () {
@@ -218,24 +216,22 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
218
216
  url = _this$state5.url,
219
217
  selectedIndex = _this$state5.selectedIndex,
220
218
  items = _this$state5.items;
219
+ var intl = _this.props.intl;
221
220
  var selectedItem = items[selectedIndex];
222
221
 
223
222
  if (_this.isUrlPopulatedWithSelectedItem()) {
224
- _this.handleInsert(selectedItem.url, selectedItem.name, 'typeAhead');
225
- } else if (url.length > 0) {
226
- var normalized = normalizeUrl(url);
227
-
228
- if (normalized) {
229
- _this.handleInsert(normalized, null, 'manual');
230
- } else {
231
- var intl = _this.props.intl;
232
- var linkInvalid = intl.formatMessage(messages.linkInvalid);
233
-
234
- _this.setState({
235
- invalidUrl: linkInvalid
236
- });
237
- }
223
+ return _this.handleInsert(selectedItem.url, selectedItem.name, 'typeAhead');
224
+ }
225
+
226
+ var normalized = normalizeUrl(url);
227
+
228
+ if (normalized) {
229
+ return _this.handleInsert(normalized, null, 'manual');
238
230
  }
231
+
232
+ return _this.setState({
233
+ invalidUrl: intl.formatMessage(messages.linkInvalid)
234
+ });
239
235
  });
240
236
 
241
237
  _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (event) {
@@ -480,11 +476,7 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
480
476
  var noResults = activePlugin && !isLoading && !items.length && !isSafeUrl(url);
481
477
  return jsx("div", {
482
478
  "data-testid": "link-picker",
483
- className: "recent-list",
484
- css: recentListStyles
485
- }, jsx("div", {
486
- css: containerStyles,
487
- ref: this.wrapperRef
479
+ css: rootContainerStyles
488
480
  }, screenReaderText && jsx(Announcer, {
489
481
  ariaLive: "assertive",
490
482
  text: screenReaderText,
@@ -564,7 +556,7 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
564
556
  appearance: "primary",
565
557
  onClick: this.handleSubmit,
566
558
  testId: "link-picker-insert-button"
567
- }, formatMessage(isEditing ? messages.saveButton : messages.insertButton))))));
559
+ }, formatMessage(isEditing ? messages.saveButton : messages.insertButton)))));
568
560
  }
569
561
  }]);
570
562
 
@@ -588,4 +580,4 @@ function limit(items) {
588
580
  return items.slice(0, RECENT_SEARCH_LIST_SIZE);
589
581
  }
590
582
 
591
- export var LinkPickerWithIntl = injectIntl(LinkPicker);
583
+ export default injectIntl(LinkPicker);
@@ -2,7 +2,7 @@
2
2
  import { Fragment } from 'react';
3
3
  import { jsx } from '@emotion/react';
4
4
  import { injectIntl } from 'react-intl-next';
5
- import { transformTimeStamp } from '../../transformTimeStamp';
5
+ import { transformTimeStamp } from '../transformTimeStamp';
6
6
  import { itemNameStyles, itemIconStyles, listItemContextStyles, listItemNameStyles, composeListItemStyles, imgStyles } from './styled';
7
7
 
8
8
  var LinkSearchListItem = function LinkSearchListItem(_ref) {
@@ -10,7 +10,8 @@ import { N500 } from '@atlaskit/theme/colors'; // AFP-2532 TODO: Fix automatic s
10
10
  import { typography } from '@atlaskit/theme';
11
11
  import { gridSize } from '@atlaskit/theme/constants';
12
12
  var LINK_PICKER_WIDTH_IN_PX = 342;
13
- export var recentListStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: ", "px;\n"])), LINK_PICKER_WIDTH_IN_PX);
14
- export var containerStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n padding: ", "px;\n width: 100%;\n overflow: hidden;\n line-height: initial;\n box-sizing: border-box;\n"])), gridSize() * 2);
13
+ var LINK_PICKER_MIN_HEIGHT_IN_PX = 234;
14
+ export var rootContainerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: ", "px;\n padding: ", "px;\n box-sizing: border-box;\n line-height: initial;\n min-height: ", "px;\n"])), LINK_PICKER_WIDTH_IN_PX, gridSize() * 2, LINK_PICKER_MIN_HEIGHT_IN_PX);
15
+ export var rootContainerStylesForLoader = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", "\n display: flex;\n align-items: center;\n justify-content: center;\n"])), rootContainerStyles);
15
16
  export var searchIconStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n margin-left: ", "px;\n color: ", ";\n cursor: default;\n"])), gridSize() / 2, token('color.icon', N500));
16
17
  export var listTitleStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n ", "\n text-transform: uppercase;\n margin-bottom: ", "px;\n"])), typography.h100(), gridSize() / 2);
@@ -9,7 +9,7 @@ import { ErrorMessage, Field } from '@atlaskit/form';
9
9
  import Tooltip from '@atlaskit/tooltip';
10
10
  import Textfield from '@atlaskit/textfield';
11
11
  import Selectclear from '@atlaskit/icon/glyph/select-clear';
12
- import { isRedoEvent, isUndoEvent } from '../../utils';
12
+ import { isRedoEvent, isUndoEvent } from '../utils';
13
13
  import { clearTextButtonStyles, fieldStyles } from './styled';
14
14
 
15
15
  var PanelTextInput = function PanelTextInput(props) {
File without changes
File without changes
@@ -0,0 +1,11 @@
1
+ /** @jsx jsx */
2
+ import { jsx } from '@emotion/react';
3
+ import Spinner from '@atlaskit/spinner';
4
+ import { rootContainerStylesForLoader } from '../link-picker/styled';
5
+ export var LoaderFallback = jsx("div", {
6
+ css: rootContainerStylesForLoader,
7
+ "data-testid": "link-picker-root-loader-boundary-ui"
8
+ }, jsx(Spinner, {
9
+ testId: "link-picker.component-loading-indicator",
10
+ size: "medium"
11
+ }));
File without changes
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/link-picker",
3
- "version": "1.1.4",
3
+ "version": "1.3.0",
4
4
  "sideEffects": false
5
5
  }
@@ -1,3 +1,3 @@
1
+ export { ComposedLinkPicker as LinkPicker } from './ui';
1
2
  export type { LinkPickerProps } from './ui/link-picker';
2
- export { LinkPickerWithIntl as LinkPicker } from './ui/link-picker';
3
- export type { LinkInputType, LinkPickerPlugin, LinkPickerState, LinkSearchListItemData, } from './types';
3
+ export type { LinkInputType, LinkPickerPlugin, LinkPickerState, LinkSearchListItemData, } from './ui/types';
@@ -0,0 +1,4 @@
1
+ /** @jsx jsx */
2
+ import { jsx } from '@emotion/react';
3
+ declare const GenericErrorSVG: (props: React.SVGProps<SVGSVGElement>) => jsx.JSX.Element;
4
+ export default GenericErrorSVG;
@@ -0,0 +1 @@
1
+ export declare const genericErrorStyles: import("@emotion/react").SerializedStyles;
@@ -0,0 +1,3 @@
1
+ /** @jsx jsx */
2
+ import { jsx } from '@emotion/react';
3
+ export declare const ErrorBoundaryFallback: () => jsx.JSX.Element;
@@ -0,0 +1,3 @@
1
+ import React from 'react';
2
+ import { LinkPickerProps } from './link-picker';
3
+ export declare const ComposedLinkPicker: React.MemoExoticComponent<(props: LinkPickerProps) => JSX.Element>;
@@ -1,5 +1,4 @@
1
- /** @jsx jsx */
2
- import React from 'react';
1
+ /// <reference types="react" />
3
2
  import { WrappedComponentProps } from 'react-intl-next';
4
3
  import { LinkSearchListItemData, LinkInputType, LinkPickerPlugin } from '../types';
5
4
  export declare const RECENT_SEARCH_LIST_SIZE = 5;
@@ -46,7 +45,7 @@ export interface State {
46
45
  displayText: string;
47
46
  invalidUrl: string | null;
48
47
  }
49
- export declare const LinkPickerWithIntl: React.FC<import("react-intl-next").WithIntlProps<WrappedComponentProps<"intl"> & LinkPickerProps>> & {
50
- WrappedComponent: React.ComponentType<WrappedComponentProps<"intl"> & LinkPickerProps>;
48
+ declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<WrappedComponentProps<"intl"> & LinkPickerProps>> & {
49
+ WrappedComponent: import("react").ComponentType<WrappedComponentProps<"intl"> & LinkPickerProps>;
51
50
  };
52
- export {};
51
+ export default _default;
@@ -0,0 +1,4 @@
1
+ export declare const rootContainerStyles: import("@emotion/react").SerializedStyles;
2
+ export declare const rootContainerStylesForLoader: import("@emotion/react").SerializedStyles;
3
+ export declare const searchIconStyles: import("@emotion/react").SerializedStyles;
4
+ export declare const listTitleStyles: import("@emotion/react").SerializedStyles;
@@ -1,3 +1,3 @@
1
1
  import { IntlShape } from 'react-intl-next';
2
- import { ListItemTimeStamp } from './types';
2
+ import { ListItemTimeStamp } from '../types';
3
3
  export declare const transformTimeStamp: (intl: IntlShape, lastViewedDate?: Date | undefined, lastUpdatedDate?: Date | undefined) => ListItemTimeStamp | undefined;
File without changes
@@ -0,0 +1,3 @@
1
+ /** @jsx jsx */
2
+ import { jsx } from '@emotion/react';
3
+ export declare const LoaderFallback: jsx.JSX.Element;
File without changes