@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.
- package/CHANGELOG.md +18 -0
- package/dist/cjs/index.js +2 -2
- package/dist/cjs/ui/error-boundary-fallback/generic-error-svg/index.js +67 -0
- package/dist/cjs/ui/error-boundary-fallback/generic-error-svg/styled.js +20 -0
- package/dist/cjs/ui/error-boundary-fallback/index.js +50 -0
- package/dist/cjs/ui/index.js +49 -0
- package/dist/cjs/ui/{announcer.js → link-picker/announcer.js} +0 -0
- package/dist/cjs/{browser.js → ui/link-picker/browser.js} +0 -0
- package/dist/cjs/ui/{link-picker.js → link-picker/index.js} +24 -30
- package/dist/cjs/ui/{link-search-list → link-picker/link-search-list}/index.js +0 -0
- package/dist/cjs/ui/{link-search-list → link-picker/link-search-list}/styled.js +0 -0
- package/dist/cjs/ui/{link-search-no-results → link-picker/link-search-no-results}/index.js +0 -0
- package/dist/cjs/ui/{link-search-no-results → link-picker/link-search-no-results}/no-results-svg/index.js +0 -0
- package/dist/cjs/ui/{link-search-no-results → link-picker/link-search-no-results}/no-results-svg/styled.js +0 -0
- package/dist/cjs/ui/{list-item → link-picker/list-item}/index.js +1 -1
- package/dist/cjs/ui/{list-item → link-picker/list-item}/styled.js +0 -0
- package/dist/cjs/{messages.js → ui/link-picker/messages.js} +0 -0
- package/dist/cjs/ui/{styled.js → link-picker/styled.js} +6 -5
- package/dist/cjs/ui/{text-input → link-picker/text-input}/index.js +1 -1
- package/dist/cjs/ui/{text-input → link-picker/text-input}/styled.js +0 -0
- package/dist/cjs/{transformTimeStamp.js → ui/link-picker/transformTimeStamp.js} +0 -0
- package/dist/cjs/{url.js → ui/link-picker/url.js} +0 -0
- package/dist/cjs/{utils.js → ui/link-picker/utils.js} +0 -0
- package/dist/cjs/ui/loader-fallback/index.js +24 -0
- package/dist/cjs/{types.js → ui/types.js} +0 -0
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/index.js +1 -1
- package/dist/es2019/ui/error-boundary-fallback/generic-error-svg/index.js +56 -0
- package/dist/es2019/ui/error-boundary-fallback/generic-error-svg/styled.js +8 -0
- package/dist/es2019/ui/error-boundary-fallback/index.js +31 -0
- package/dist/es2019/ui/index.js +23 -0
- package/dist/es2019/ui/{announcer.js → link-picker/announcer.js} +0 -0
- package/dist/es2019/{browser.js → ui/link-picker/browser.js} +0 -0
- package/dist/es2019/ui/{link-picker.js → link-picker/index.js} +23 -30
- package/dist/es2019/ui/{link-search-list → link-picker/link-search-list}/index.js +0 -0
- package/dist/es2019/ui/{link-search-list → link-picker/link-search-list}/styled.js +0 -0
- package/dist/es2019/ui/{link-search-no-results → link-picker/link-search-no-results}/index.js +0 -0
- package/dist/es2019/ui/{link-search-no-results → link-picker/link-search-no-results}/no-results-svg/index.js +0 -0
- package/dist/es2019/ui/{link-search-no-results → link-picker/link-search-no-results}/no-results-svg/styled.js +0 -0
- package/dist/es2019/ui/{list-item → link-picker/list-item}/index.js +1 -1
- package/dist/es2019/ui/{list-item → link-picker/list-item}/styled.js +0 -0
- package/dist/es2019/{messages.js → ui/link-picker/messages.js} +0 -0
- package/dist/es2019/ui/{styled.js → link-picker/styled.js} +10 -6
- package/dist/es2019/ui/{text-input → link-picker/text-input}/index.js +1 -1
- package/dist/es2019/ui/{text-input → link-picker/text-input}/styled.js +0 -0
- package/dist/es2019/{transformTimeStamp.js → ui/link-picker/transformTimeStamp.js} +0 -0
- package/dist/es2019/{url.js → ui/link-picker/url.js} +0 -0
- package/dist/es2019/{utils.js → ui/link-picker/utils.js} +0 -0
- package/dist/es2019/ui/loader-fallback/index.js +11 -0
- package/dist/es2019/{types.js → ui/types.js} +0 -0
- package/dist/es2019/version.json +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/ui/error-boundary-fallback/generic-error-svg/index.js +56 -0
- package/dist/esm/ui/error-boundary-fallback/generic-error-svg/styled.js +8 -0
- package/dist/esm/ui/error-boundary-fallback/index.js +33 -0
- package/dist/esm/ui/index.js +27 -0
- package/dist/esm/ui/{announcer.js → link-picker/announcer.js} +0 -0
- package/dist/esm/{browser.js → ui/link-picker/browser.js} +0 -0
- package/dist/esm/ui/{link-picker.js → link-picker/index.js} +22 -30
- package/dist/esm/ui/{link-search-list → link-picker/link-search-list}/index.js +0 -0
- package/dist/esm/ui/{link-search-list → link-picker/link-search-list}/styled.js +0 -0
- package/dist/esm/ui/{link-search-no-results → link-picker/link-search-no-results}/index.js +0 -0
- package/dist/esm/ui/{link-search-no-results → link-picker/link-search-no-results}/no-results-svg/index.js +0 -0
- package/dist/esm/ui/{link-search-no-results → link-picker/link-search-no-results}/no-results-svg/styled.js +0 -0
- package/dist/esm/ui/{list-item → link-picker/list-item}/index.js +1 -1
- package/dist/esm/ui/{list-item → link-picker/list-item}/styled.js +0 -0
- package/dist/esm/{messages.js → ui/link-picker/messages.js} +0 -0
- package/dist/esm/ui/{styled.js → link-picker/styled.js} +3 -2
- package/dist/esm/ui/{text-input → link-picker/text-input}/index.js +1 -1
- package/dist/esm/ui/{text-input → link-picker/text-input}/styled.js +0 -0
- package/dist/esm/{transformTimeStamp.js → ui/link-picker/transformTimeStamp.js} +0 -0
- package/dist/esm/{url.js → ui/link-picker/url.js} +0 -0
- package/dist/esm/{utils.js → ui/link-picker/utils.js} +0 -0
- package/dist/esm/ui/loader-fallback/index.js +11 -0
- package/dist/esm/{types.js → ui/types.js} +0 -0
- package/dist/esm/version.json +1 -1
- package/dist/types/index.d.ts +2 -2
- package/dist/types/ui/error-boundary-fallback/generic-error-svg/index.d.ts +4 -0
- package/dist/types/ui/error-boundary-fallback/generic-error-svg/styled.d.ts +1 -0
- package/dist/types/ui/error-boundary-fallback/index.d.ts +3 -0
- package/dist/types/ui/index.d.ts +3 -0
- package/dist/types/ui/{announcer.d.ts → link-picker/announcer.d.ts} +0 -0
- package/dist/types/{browser.d.ts → ui/link-picker/browser.d.ts} +0 -0
- package/dist/types/ui/{link-picker.d.ts → link-picker/index.d.ts} +4 -5
- package/dist/types/ui/{link-search-list → link-picker/link-search-list}/index.d.ts +0 -0
- package/dist/types/ui/{link-search-list → link-picker/link-search-list}/styled.d.ts +0 -0
- package/dist/types/ui/{link-search-no-results → link-picker/link-search-no-results}/index.d.ts +0 -0
- package/dist/types/ui/{link-search-no-results → link-picker/link-search-no-results}/no-results-svg/index.d.ts +0 -0
- package/dist/types/ui/{link-search-no-results → link-picker/link-search-no-results}/no-results-svg/styled.d.ts +0 -0
- package/dist/types/ui/{list-item → link-picker/list-item}/index.d.ts +0 -0
- package/dist/types/ui/{list-item → link-picker/list-item}/styled.d.ts +0 -0
- package/dist/types/{messages.d.ts → ui/link-picker/messages.d.ts} +0 -0
- package/dist/types/ui/link-picker/styled.d.ts +4 -0
- package/dist/types/ui/{text-input → link-picker/text-input}/index.d.ts +0 -0
- package/dist/types/ui/{text-input → link-picker/text-input}/styled.d.ts +0 -0
- package/dist/types/{transformTimeStamp.d.ts → ui/link-picker/transformTimeStamp.d.ts} +1 -1
- package/dist/types/{url.d.ts → ui/link-picker/url.d.ts} +0 -0
- package/dist/types/{utils.d.ts → ui/link-picker/utils.d.ts} +0 -0
- package/dist/types/ui/loader-fallback/index.d.ts +3 -0
- package/dist/types/{types.d.ts → ui/types.d.ts} +0 -0
- package/package.json +8 -4
- 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
|
|
4
|
+
import { PureComponent } from 'react';
|
|
5
5
|
import { jsx } from '@emotion/react';
|
|
6
6
|
import { injectIntl } from 'react-intl-next';
|
|
7
|
-
import { messages } from '
|
|
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 '
|
|
11
|
-
import {
|
|
12
|
-
import { browser } from '
|
|
13
|
-
import { transformTimeStamp } from '
|
|
14
|
-
import Announcer from '
|
|
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
|
-
}
|
|
191
|
-
const normalized = normalizeUrl(url);
|
|
190
|
+
return this.handleInsert(selectedItem.url, selectedItem.name, 'typeAhead');
|
|
191
|
+
}
|
|
192
192
|
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
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
|
-
|
|
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
|
|
494
|
+
export default injectIntl(LinkPicker);
|
|
File without changes
|
|
File without changes
|
package/dist/es2019/ui/{link-search-no-results → link-picker/link-search-no-results}/index.js
RENAMED
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
@@ -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 '
|
|
5
|
+
import { transformTimeStamp } from '../transformTimeStamp';
|
|
6
6
|
import { itemNameStyles, itemIconStyles, listItemContextStyles, listItemNameStyles, composeListItemStyles, imgStyles } from './styled';
|
|
7
7
|
|
|
8
8
|
const LinkSearchListItem = ({
|
|
File without changes
|
|
File without changes
|
|
@@ -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
|
-
|
|
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 '
|
|
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
|
|
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 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
|
package/dist/es2019/version.json
CHANGED
package/dist/esm/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export {
|
|
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
|
+
});
|
|
File without changes
|
|
File without changes
|
|
@@ -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
|
|
21
|
+
import { PureComponent } from 'react';
|
|
22
22
|
import { jsx } from '@emotion/react';
|
|
23
23
|
import { injectIntl } from 'react-intl-next';
|
|
24
|
-
import { messages } from '
|
|
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 '
|
|
28
|
-
import {
|
|
29
|
-
import { browser } from '
|
|
30
|
-
import { transformTimeStamp } from '
|
|
31
|
-
import Announcer from '
|
|
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
|
-
}
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
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
|
-
|
|
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
|
|
583
|
+
export default injectIntl(LinkPicker);
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
@@ -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 '
|
|
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) {
|
|
File without changes
|
|
File without changes
|
|
@@ -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
|
-
|
|
14
|
-
export var
|
|
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 '
|
|
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
|
|
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
|
package/dist/esm/version.json
CHANGED
package/dist/types/index.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
+
export { ComposedLinkPicker as LinkPicker } from './ui';
|
|
1
2
|
export type { LinkPickerProps } from './ui/link-picker';
|
|
2
|
-
export {
|
|
3
|
-
export type { LinkInputType, LinkPickerPlugin, LinkPickerState, LinkSearchListItemData, } from './types';
|
|
3
|
+
export type { LinkInputType, LinkPickerPlugin, LinkPickerState, LinkSearchListItemData, } from './ui/types';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const genericErrorStyles: import("@emotion/react").SerializedStyles;
|
|
File without changes
|
|
File without changes
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
|
|
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
|
-
|
|
50
|
-
WrappedComponent:
|
|
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;
|
|
File without changes
|
|
File without changes
|
package/dist/types/ui/{link-search-no-results → link-picker/link-search-no-results}/index.d.ts
RENAMED
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
@@ -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;
|
|
File without changes
|
|
File without changes
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { IntlShape } from 'react-intl-next';
|
|
2
|
-
import { ListItemTimeStamp } from '
|
|
2
|
+
import { ListItemTimeStamp } from '../types';
|
|
3
3
|
export declare const transformTimeStamp: (intl: IntlShape, lastViewedDate?: Date | undefined, lastUpdatedDate?: Date | undefined) => ListItemTimeStamp | undefined;
|
|
File without changes
|
|
File without changes
|
|
File without changes
|