@atlaskit/link-picker 1.1.3 → 1.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (100) 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 +38 -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} +22 -27
  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} +5 -0
  18. package/dist/cjs/ui/link-picker/styled.js +31 -0
  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/{types.js → ui/types.js} +0 -0
  25. package/dist/cjs/version.json +1 -1
  26. package/dist/es2019/index.js +1 -1
  27. package/dist/es2019/ui/error-boundary-fallback/generic-error-svg/index.js +56 -0
  28. package/dist/es2019/ui/error-boundary-fallback/generic-error-svg/styled.js +8 -0
  29. package/dist/es2019/ui/error-boundary-fallback/index.js +31 -0
  30. package/dist/es2019/ui/index.js +17 -0
  31. package/dist/es2019/ui/{announcer.js → link-picker/announcer.js} +0 -0
  32. package/dist/es2019/{browser.js → ui/link-picker/browser.js} +0 -0
  33. package/dist/es2019/ui/{link-picker.js → link-picker/index.js} +24 -29
  34. package/dist/es2019/ui/{link-search-list → link-picker/link-search-list}/index.js +0 -0
  35. package/dist/es2019/ui/{link-search-list → link-picker/link-search-list}/styled.js +0 -0
  36. package/dist/es2019/ui/{link-search-no-results → link-picker/link-search-no-results}/index.js +0 -0
  37. package/dist/es2019/ui/{link-search-no-results → link-picker/link-search-no-results}/no-results-svg/index.js +0 -0
  38. package/dist/es2019/ui/{link-search-no-results → link-picker/link-search-no-results}/no-results-svg/styled.js +0 -0
  39. package/dist/es2019/ui/{list-item → link-picker/list-item}/index.js +1 -1
  40. package/dist/es2019/ui/{list-item → link-picker/list-item}/styled.js +0 -0
  41. package/dist/es2019/{messages.js → ui/link-picker/messages.js} +5 -0
  42. package/dist/es2019/ui/{styled.js → link-picker/styled.js} +4 -6
  43. package/dist/es2019/ui/{text-input → link-picker/text-input}/index.js +1 -1
  44. package/dist/es2019/ui/{text-input → link-picker/text-input}/styled.js +0 -0
  45. package/dist/es2019/{transformTimeStamp.js → ui/link-picker/transformTimeStamp.js} +0 -0
  46. package/dist/es2019/{url.js → ui/link-picker/url.js} +0 -0
  47. package/dist/es2019/{utils.js → ui/link-picker/utils.js} +0 -0
  48. package/dist/es2019/{types.js → ui/types.js} +0 -0
  49. package/dist/es2019/version.json +1 -1
  50. package/dist/esm/index.js +1 -1
  51. package/dist/esm/ui/error-boundary-fallback/generic-error-svg/index.js +56 -0
  52. package/dist/esm/ui/error-boundary-fallback/generic-error-svg/styled.js +8 -0
  53. package/dist/esm/ui/error-boundary-fallback/index.js +33 -0
  54. package/dist/esm/ui/index.js +19 -0
  55. package/dist/esm/ui/{announcer.js → link-picker/announcer.js} +0 -0
  56. package/dist/esm/{browser.js → ui/link-picker/browser.js} +0 -0
  57. package/dist/esm/ui/{link-picker.js → link-picker/index.js} +23 -29
  58. package/dist/esm/ui/{link-search-list → link-picker/link-search-list}/index.js +0 -0
  59. package/dist/esm/ui/{link-search-list → link-picker/link-search-list}/styled.js +0 -0
  60. package/dist/esm/ui/{link-search-no-results → link-picker/link-search-no-results}/index.js +0 -0
  61. package/dist/esm/ui/{link-search-no-results → link-picker/link-search-no-results}/no-results-svg/index.js +0 -0
  62. package/dist/esm/ui/{link-search-no-results → link-picker/link-search-no-results}/no-results-svg/styled.js +0 -0
  63. package/dist/esm/ui/{list-item → link-picker/list-item}/index.js +1 -1
  64. package/dist/esm/ui/{list-item → link-picker/list-item}/styled.js +0 -0
  65. package/dist/esm/{messages.js → ui/link-picker/messages.js} +5 -0
  66. package/dist/esm/ui/link-picker/styled.js +16 -0
  67. package/dist/esm/ui/{text-input → link-picker/text-input}/index.js +1 -1
  68. package/dist/esm/ui/{text-input → link-picker/text-input}/styled.js +0 -0
  69. package/dist/esm/{transformTimeStamp.js → ui/link-picker/transformTimeStamp.js} +0 -0
  70. package/dist/esm/{url.js → ui/link-picker/url.js} +0 -0
  71. package/dist/esm/{utils.js → ui/link-picker/utils.js} +0 -0
  72. package/dist/esm/{types.js → ui/types.js} +0 -0
  73. package/dist/esm/version.json +1 -1
  74. package/dist/types/index.d.ts +2 -2
  75. package/dist/types/ui/error-boundary-fallback/generic-error-svg/index.d.ts +4 -0
  76. package/dist/types/ui/error-boundary-fallback/generic-error-svg/styled.d.ts +1 -0
  77. package/dist/types/ui/error-boundary-fallback/index.d.ts +3 -0
  78. package/dist/types/ui/index.d.ts +3 -0
  79. package/dist/types/ui/{announcer.d.ts → link-picker/announcer.d.ts} +0 -0
  80. package/dist/types/{browser.d.ts → ui/link-picker/browser.d.ts} +0 -0
  81. package/dist/types/ui/{link-picker.d.ts → link-picker/index.d.ts} +4 -4
  82. package/dist/types/ui/{link-search-list → link-picker/link-search-list}/index.d.ts +0 -0
  83. package/dist/types/ui/{link-search-list → link-picker/link-search-list}/styled.d.ts +0 -0
  84. package/dist/types/ui/{link-search-no-results → link-picker/link-search-no-results}/index.d.ts +0 -0
  85. package/dist/types/ui/{link-search-no-results → link-picker/link-search-no-results}/no-results-svg/index.d.ts +0 -0
  86. package/dist/types/ui/{link-search-no-results → link-picker/link-search-no-results}/no-results-svg/styled.d.ts +0 -0
  87. package/dist/types/ui/{list-item → link-picker/list-item}/index.d.ts +0 -0
  88. package/dist/types/ui/{list-item → link-picker/list-item}/styled.d.ts +0 -0
  89. package/dist/types/{messages.d.ts → ui/link-picker/messages.d.ts} +5 -0
  90. package/dist/types/ui/{styled.d.ts → link-picker/styled.d.ts} +1 -2
  91. package/dist/types/ui/{text-input → link-picker/text-input}/index.d.ts +0 -0
  92. package/dist/types/ui/{text-input → link-picker/text-input}/styled.d.ts +0 -0
  93. package/dist/types/{transformTimeStamp.d.ts → ui/link-picker/transformTimeStamp.d.ts} +1 -1
  94. package/dist/types/{url.d.ts → ui/link-picker/url.d.ts} +0 -0
  95. package/dist/types/{utils.d.ts → ui/link-picker/utils.d.ts} +0 -0
  96. package/dist/types/{types.d.ts → ui/types.d.ts} +0 -0
  97. package/package.json +3 -2
  98. package/report.api.md +56 -21
  99. package/dist/cjs/ui/styled.js +0 -32
  100. package/dist/esm/ui/styled.js +0 -16
@@ -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 => {
@@ -265,6 +262,7 @@ class LinkPicker extends PureComponent {
265
262
  selectedIndex: -1,
266
263
  activeIndex: -1,
267
264
  isLoading: false,
265
+ isEditing: !!props.url,
268
266
  url: normalizeUrl(props.url) || '',
269
267
  displayText: props.displayText || '',
270
268
  items: [],
@@ -358,6 +356,7 @@ class LinkPicker extends PureComponent {
358
356
  const {
359
357
  items,
360
358
  isLoading,
359
+ isEditing,
361
360
  activeIndex,
362
361
  selectedIndex,
363
362
  url,
@@ -390,11 +389,7 @@ class LinkPicker extends PureComponent {
390
389
  const noResults = activePlugin && !isLoading && !items.length && !isSafeUrl(url);
391
390
  return jsx("div", {
392
391
  "data-testid": "link-picker",
393
- className: "recent-list",
394
- css: recentListStyles
395
- }, jsx("div", {
396
- css: containerStyles,
397
- ref: this.wrapperRef
392
+ css: rootContainerStyles
398
393
  }, screenReaderText && jsx(Announcer, {
399
394
  ariaLive: "assertive",
400
395
  text: screenReaderText,
@@ -474,7 +469,7 @@ class LinkPicker extends PureComponent {
474
469
  appearance: "primary",
475
470
  onClick: this.handleSubmit,
476
471
  testId: "link-picker-insert-button"
477
- }, formatMessage(messages.insertButton))))));
472
+ }, formatMessage(isEditing ? messages.saveButton : messages.insertButton)))));
478
473
  }
479
474
 
480
475
  }
@@ -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 = ({
@@ -99,5 +99,10 @@ export const messages = defineMessages({
99
99
  id: 'fabric.linkPicker.search.noResults.description',
100
100
  defaultMessage: 'Try again with a different term.',
101
101
  description: 'Describes possible action when a search returns no results'
102
+ },
103
+ saveButton: {
104
+ id: 'fabric.linkPicker.button.save',
105
+ defaultMessage: 'Save',
106
+ description: 'Button to save edited link'
102
107
  }
103
108
  });
@@ -6,15 +6,13 @@ 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;
18
16
  `;
19
17
  export const searchIconStyles = css`
20
18
  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
File without changes
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/link-picker",
3
- "version": "1.1.3",
3
+ "version": "1.2.1",
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,19 @@
1
+ import React, { memo } from 'react';
2
+ import { AnalyticsErrorBoundary } from '@atlaskit/analytics-next';
3
+ import { name as packageName, version as packageVersion } from '../version.json';
4
+ import { ErrorBoundaryFallback } from './error-boundary-fallback';
5
+ import { LinkPickerWithIntl } from './link-picker';
6
+ var COMPONENT_NAME = 'LinkPicker';
7
+ var ANALYTICS_CHANNEL = 'media';
8
+ var PACKAGE_DATA = {
9
+ packageName: packageName,
10
+ packageVersion: packageVersion,
11
+ componentName: COMPONENT_NAME
12
+ };
13
+ export var ComposedLinkPicker = /*#__PURE__*/memo(function (props) {
14
+ return /*#__PURE__*/React.createElement(AnalyticsErrorBoundary, {
15
+ channel: ANALYTICS_CHANNEL,
16
+ data: PACKAGE_DATA,
17
+ ErrorComponent: ErrorBoundaryFallback
18
+ }, /*#__PURE__*/React.createElement(LinkPickerWithIntl, props));
19
+ });
@@ -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) {
@@ -294,6 +290,7 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
294
290
  selectedIndex: -1,
295
291
  activeIndex: -1,
296
292
  isLoading: false,
293
+ isEditing: !!props.url,
297
294
  url: normalizeUrl(props.url) || '',
298
295
  displayText: props.displayText || '',
299
296
  items: [],
@@ -451,6 +448,7 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
451
448
  var _this$state7 = this.state,
452
449
  items = _this$state7.items,
453
450
  isLoading = _this$state7.isLoading,
451
+ isEditing = _this$state7.isEditing,
454
452
  activeIndex = _this$state7.activeIndex,
455
453
  selectedIndex = _this$state7.selectedIndex,
456
454
  url = _this$state7.url,
@@ -478,11 +476,7 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
478
476
  var noResults = activePlugin && !isLoading && !items.length && !isSafeUrl(url);
479
477
  return jsx("div", {
480
478
  "data-testid": "link-picker",
481
- className: "recent-list",
482
- css: recentListStyles
483
- }, jsx("div", {
484
- css: containerStyles,
485
- ref: this.wrapperRef
479
+ css: rootContainerStyles
486
480
  }, screenReaderText && jsx(Announcer, {
487
481
  ariaLive: "assertive",
488
482
  text: screenReaderText,
@@ -562,7 +556,7 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
562
556
  appearance: "primary",
563
557
  onClick: this.handleSubmit,
564
558
  testId: "link-picker-insert-button"
565
- }, formatMessage(messages.insertButton))))));
559
+ }, formatMessage(isEditing ? messages.saveButton : messages.insertButton)))));
566
560
  }
567
561
  }]);
568
562
 
@@ -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) {
@@ -99,5 +99,10 @@ export var messages = defineMessages({
99
99
  id: 'fabric.linkPicker.search.noResults.description',
100
100
  defaultMessage: 'Try again with a different term.',
101
101
  description: 'Describes possible action when a search returns no results'
102
+ },
103
+ saveButton: {
104
+ id: 'fabric.linkPicker.button.save',
105
+ defaultMessage: 'Save',
106
+ description: 'Button to save edited link'
102
107
  }
103
108
  });
@@ -0,0 +1,16 @@
1
+ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
+
3
+ var _templateObject, _templateObject2, _templateObject3;
4
+
5
+ import { token } from '@atlaskit/tokens';
6
+ import { css } from '@emotion/react';
7
+ import { N500 } from '@atlaskit/theme/colors'; // AFP-2532 TODO: Fix automatic suppressions below
8
+ // eslint-disable-next-line @atlassian/tangerine/import/entry-points
9
+
10
+ import { typography } from '@atlaskit/theme';
11
+ import { gridSize } from '@atlaskit/theme/constants';
12
+ var LINK_PICKER_WIDTH_IN_PX = 342;
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 searchIconStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n margin-left: ", "px;\n color: ", ";\n cursor: default;\n"])), gridSize() / 2, token('color.icon', N500));
16
+ export var listTitleStyles = css(_templateObject3 || (_templateObject3 = _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
File without changes
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/link-picker",
3
- "version": "1.1.3",
3
+ "version": "1.2.1",
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;
@@ -42,10 +41,11 @@ export interface State {
42
41
  activeIndex: number;
43
42
  url: string;
44
43
  isLoading: boolean;
44
+ isEditing: boolean;
45
45
  displayText: string;
46
46
  invalidUrl: string | null;
47
47
  }
48
- export declare const LinkPickerWithIntl: React.FC<import("react-intl-next").WithIntlProps<WrappedComponentProps<"intl"> & LinkPickerProps>> & {
49
- WrappedComponent: React.ComponentType<WrappedComponentProps<"intl"> & LinkPickerProps>;
48
+ export declare const LinkPickerWithIntl: import("react").FC<import("react-intl-next").WithIntlProps<WrappedComponentProps<"intl"> & LinkPickerProps>> & {
49
+ WrappedComponent: import("react").ComponentType<WrappedComponentProps<"intl"> & LinkPickerProps>;
50
50
  };
51
51
  export {};
@@ -99,4 +99,9 @@ export declare const messages: {
99
99
  defaultMessage: string;
100
100
  description: string;
101
101
  };
102
+ saveButton: {
103
+ id: string;
104
+ defaultMessage: string;
105
+ description: string;
106
+ };
102
107
  };
@@ -1,4 +1,3 @@
1
- export declare const recentListStyles: import("@emotion/react").SerializedStyles;
2
- export declare const containerStyles: import("@emotion/react").SerializedStyles;
1
+ export declare const rootContainerStyles: import("@emotion/react").SerializedStyles;
3
2
  export declare const searchIconStyles: import("@emotion/react").SerializedStyles;
4
3
  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