@atlaskit/link-picker 1.10.2 → 1.10.4
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 +12 -0
- package/dist/cjs/common/analytics/experiences.js +62 -0
- package/dist/cjs/controllers/session-provider/index.js +61 -0
- package/dist/cjs/ui/error-boundary/error-boundary-base/index.js +76 -0
- package/dist/cjs/ui/{error-boundary-fallback → error-boundary/error-boundary-fallback}/index.js +2 -2
- package/dist/cjs/ui/error-boundary/index.js +33 -81
- package/dist/cjs/ui/index.js +6 -9
- package/dist/cjs/ui/link-picker/index.js +15 -7
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/common/analytics/experiences.js +39 -0
- package/dist/es2019/controllers/session-provider/index.js +32 -0
- package/dist/es2019/ui/error-boundary/error-boundary-base/index.js +37 -0
- package/dist/es2019/ui/{error-boundary-fallback → error-boundary/error-boundary-fallback}/index.js +2 -2
- package/dist/es2019/ui/error-boundary/index.js +30 -59
- package/dist/es2019/ui/index.js +5 -8
- package/dist/es2019/ui/link-picker/index.js +13 -7
- package/dist/es2019/version.json +1 -1
- package/dist/esm/common/analytics/experiences.js +40 -0
- package/dist/esm/controllers/session-provider/index.js +38 -0
- package/dist/esm/ui/error-boundary/error-boundary-base/index.js +56 -0
- package/dist/esm/ui/{error-boundary-fallback → error-boundary/error-boundary-fallback}/index.js +2 -2
- package/dist/esm/ui/error-boundary/index.js +30 -79
- package/dist/esm/ui/index.js +5 -8
- package/dist/esm/ui/link-picker/index.js +13 -7
- package/dist/esm/version.json +1 -1
- package/dist/types/common/analytics/experiences.d.ts +11 -0
- package/dist/types/controllers/session-provider/index.d.ts +10 -0
- package/dist/types/ui/error-boundary/error-boundary-base/index.d.ts +18 -0
- package/dist/types/ui/error-boundary/error-boundary-fallback/index.d.ts +3 -0
- package/dist/types/ui/error-boundary/index.d.ts +4 -24
- package/dist/types-ts4.0/analytics.codegen.d.ts +52 -0
- package/dist/types-ts4.0/common/analytics/context.d.ts +28 -0
- package/dist/types-ts4.0/common/analytics/experiences.d.ts +11 -0
- package/dist/types-ts4.0/common/analytics/index.d.ts +2 -0
- package/dist/types-ts4.0/common/analytics/input-field-tracking.d.ts +17 -0
- package/dist/types-ts4.0/common/constants.d.ts +2 -0
- package/dist/types-ts4.0/common/generic-error-svg/index.d.ts +4 -0
- package/dist/types-ts4.0/common/generic-error-svg/styled.d.ts +1 -0
- package/dist/types-ts4.0/common/utils/url.d.ts +5 -0
- package/dist/types-ts4.0/controllers/session-provider/index.d.ts +10 -0
- package/dist/types-ts4.0/controllers/use-fix-height/index.d.ts +8 -0
- package/dist/types-ts4.0/index.d.ts +3 -0
- package/dist/types-ts4.0/services/use-plugins/index.d.ts +14 -0
- package/dist/types-ts4.0/services/use-plugins/reducer.d.ts +33 -0
- package/dist/types-ts4.0/services/use-plugins/utils.d.ts +18 -0
- package/dist/types-ts4.0/services/use-search-query/index.d.ts +3 -0
- package/dist/types-ts4.0/ui/error-boundary/error-boundary-base/index.d.ts +18 -0
- package/dist/{types/ui → types-ts4.0/ui/error-boundary}/error-boundary-fallback/index.d.ts +0 -0
- package/dist/types-ts4.0/ui/error-boundary/index.d.ts +7 -0
- package/dist/types-ts4.0/ui/index.d.ts +5 -0
- package/dist/types-ts4.0/ui/link-picker/announcer.d.ts +22 -0
- package/dist/types-ts4.0/ui/link-picker/browser.d.ts +15 -0
- package/dist/types-ts4.0/ui/link-picker/form-footer/index.d.ts +13 -0
- package/dist/types-ts4.0/ui/link-picker/form-footer/styled.d.ts +1 -0
- package/dist/types-ts4.0/ui/link-picker/index.d.ts +69 -0
- package/dist/types-ts4.0/ui/link-picker/link-search-error/index.d.ts +20 -0
- package/dist/types-ts4.0/ui/link-picker/link-search-list/index.d.ts +43 -0
- package/dist/types-ts4.0/ui/link-picker/link-search-list/link-search-no-results/index.d.ts +19 -0
- package/dist/types-ts4.0/ui/link-picker/link-search-list/link-search-no-results/no-results-svg/index.d.ts +4 -0
- package/dist/types-ts4.0/ui/link-picker/link-search-list/link-search-no-results/no-results-svg/styled.d.ts +1 -0
- package/dist/types-ts4.0/ui/link-picker/link-search-list/link-search-no-results/styled.d.ts +1 -0
- package/dist/types-ts4.0/ui/link-picker/link-search-list/styled.d.ts +4 -0
- package/dist/types-ts4.0/ui/link-picker/list-item/index.d.ts +17 -0
- package/dist/types-ts4.0/ui/link-picker/list-item/styled.d.ts +9 -0
- package/dist/types-ts4.0/ui/link-picker/messages.d.ts +85 -0
- package/dist/types-ts4.0/ui/link-picker/styled.d.ts +9 -0
- package/dist/types-ts4.0/ui/link-picker/text-input/index.d.ts +14 -0
- package/dist/types-ts4.0/ui/link-picker/text-input/styled.d.ts +2 -0
- package/dist/types-ts4.0/ui/link-picker/transformTimeStamp.d.ts +3 -0
- package/dist/types-ts4.0/ui/link-picker/utils.d.ts +10 -0
- package/dist/types-ts4.0/ui/loader-fallback/index.d.ts +3 -0
- package/dist/types-ts4.0/ui/types.d.ts +57 -0
- package/package.json +15 -5
- package/report.api.md +45 -65
|
@@ -1,62 +1,33 @@
|
|
|
1
|
-
import
|
|
2
|
-
import React, { Component } from 'react';
|
|
1
|
+
import React, { useCallback } from 'react';
|
|
3
2
|
import { withAnalyticsEvents } from '@atlaskit/analytics-next';
|
|
4
3
|
import createEventPayload from '../../analytics.codegen';
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
} = this.props;
|
|
33
|
-
const payload = {
|
|
34
|
-
error,
|
|
35
|
-
info
|
|
36
|
-
};
|
|
37
|
-
this.fireAnalytics(payload);
|
|
38
|
-
onError && onError(error, info);
|
|
39
|
-
this.setState({
|
|
40
|
-
hasError: true
|
|
41
|
-
});
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
render() {
|
|
45
|
-
const {
|
|
46
|
-
children,
|
|
47
|
-
ErrorComponent
|
|
48
|
-
} = this.props;
|
|
49
|
-
const {
|
|
50
|
-
hasError
|
|
51
|
-
} = this.state;
|
|
52
|
-
|
|
53
|
-
if (hasError && ErrorComponent) {
|
|
54
|
-
return /*#__PURE__*/React.createElement(ErrorComponent, null);
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
return children;
|
|
58
|
-
}
|
|
59
|
-
|
|
4
|
+
import { ANALYTICS_CHANNEL } from '../../common/constants';
|
|
5
|
+
import { failUfoExperience, ufoExperience } from '../../common/analytics/experiences';
|
|
6
|
+
import { useLinkPickerSessionId } from '../../controllers/session-provider';
|
|
7
|
+
import { ErrorBoundaryFallback } from './error-boundary-fallback';
|
|
8
|
+
import { BaseErrorBoundary } from './error-boundary-base';
|
|
9
|
+
|
|
10
|
+
function ErrorBoundary({
|
|
11
|
+
children,
|
|
12
|
+
createAnalyticsEvent
|
|
13
|
+
}) {
|
|
14
|
+
const linkPickerSessionId = useLinkPickerSessionId();
|
|
15
|
+
const handleError = useCallback((error, info) => {
|
|
16
|
+
var _window, _window$navigator, _info$componentStack;
|
|
17
|
+
|
|
18
|
+
// Fire Analytics event
|
|
19
|
+
createAnalyticsEvent(createEventPayload('ui.linkPicker.unhandledErrorCaught', {
|
|
20
|
+
browserInfo: ((_window = window) === null || _window === void 0 ? void 0 : (_window$navigator = _window.navigator) === null || _window$navigator === void 0 ? void 0 : _window$navigator.userAgent) || 'unknown',
|
|
21
|
+
error: error.toString(),
|
|
22
|
+
componentStack: (_info$componentStack = info === null || info === void 0 ? void 0 : info.componentStack) !== null && _info$componentStack !== void 0 ? _info$componentStack : ''
|
|
23
|
+
})).fire(ANALYTICS_CHANNEL); // Fire UFO failed experience
|
|
24
|
+
|
|
25
|
+
failUfoExperience(ufoExperience.mounted, linkPickerSessionId);
|
|
26
|
+
}, [createAnalyticsEvent, linkPickerSessionId]);
|
|
27
|
+
return /*#__PURE__*/React.createElement(BaseErrorBoundary, {
|
|
28
|
+
onError: handleError,
|
|
29
|
+
ErrorComponent: ErrorBoundaryFallback
|
|
30
|
+
}, children);
|
|
60
31
|
}
|
|
61
|
-
|
|
62
|
-
export default ErrorBoundary;
|
|
32
|
+
|
|
33
|
+
export default withAnalyticsEvents()(ErrorBoundary);
|
package/dist/es2019/ui/index.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
+
import { AnalyticsContext } from '@atlaskit/analytics-next';
|
|
1
2
|
import React, { memo } from 'react';
|
|
2
3
|
import { LazySuspense, lazyForPaint } from 'react-loosely-lazy';
|
|
3
|
-
import {
|
|
4
|
-
import { COMPONENT_NAME, ANALYTICS_CHANNEL } from '../common/constants';
|
|
4
|
+
import { COMPONENT_NAME } from '../common/constants';
|
|
5
5
|
import { name as packageName, version as packageVersion } from '../version.json';
|
|
6
6
|
import ErrorBoundary from './error-boundary';
|
|
7
|
-
import { ErrorBoundaryFallback } from './error-boundary-fallback';
|
|
8
7
|
import { LoaderFallback } from './loader-fallback';
|
|
8
|
+
import { LinkPickerSessionProvider } from '../controllers/session-provider';
|
|
9
9
|
export const PACKAGE_DATA = {
|
|
10
10
|
packageName,
|
|
11
11
|
packageVersion,
|
|
@@ -17,9 +17,6 @@ const LazyLinkPicker = lazyForPaint(() => import(
|
|
|
17
17
|
'./link-picker'));
|
|
18
18
|
export const ComposedLinkPicker = /*#__PURE__*/memo(props => /*#__PURE__*/React.createElement(AnalyticsContext, {
|
|
19
19
|
data: PACKAGE_DATA
|
|
20
|
-
}, /*#__PURE__*/React.createElement(ErrorBoundary, {
|
|
21
|
-
channel: ANALYTICS_CHANNEL,
|
|
22
|
-
ErrorComponent: ErrorBoundaryFallback
|
|
23
|
-
}, /*#__PURE__*/React.createElement(LazySuspense, {
|
|
20
|
+
}, /*#__PURE__*/React.createElement(LinkPickerSessionProvider, null, /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement(LazySuspense, {
|
|
24
21
|
fallback: LoaderFallback
|
|
25
|
-
}, /*#__PURE__*/React.createElement(LazyLinkPicker, props)))));
|
|
22
|
+
}, /*#__PURE__*/React.createElement(LazyLinkPicker, props))))));
|
|
@@ -24,6 +24,8 @@ import LinkSearchList, { testIds as listTestIds } from './link-search-list';
|
|
|
24
24
|
import LinkSearchError, { testIds as searchErrorTestIds } from './link-search-error';
|
|
25
25
|
import FormFooter, { testIds as formFooterTestIds } from './form-footer';
|
|
26
26
|
import { getDataSource, getScreenReaderText } from './utils';
|
|
27
|
+
import { succeedUfoExperience, ufoExperience } from '../../common/analytics/experiences';
|
|
28
|
+
import { useLinkPickerSessionId } from '../../controllers/session-provider';
|
|
27
29
|
export const RECENT_SEARCH_LIST_SIZE = 5;
|
|
28
30
|
export const testIds = {
|
|
29
31
|
linkPicker: 'link-picker',
|
|
@@ -123,6 +125,10 @@ function LinkPicker({
|
|
|
123
125
|
trackAttribute,
|
|
124
126
|
getAttributes
|
|
125
127
|
} = useLinkPickerAnalytics();
|
|
128
|
+
const linkPickerSessionId = useLinkPickerSessionId();
|
|
129
|
+
useLayoutEffect(() => {
|
|
130
|
+
succeedUfoExperience(ufoExperience.mounted, linkPickerSessionId);
|
|
131
|
+
}, [linkPickerSessionId]);
|
|
126
132
|
useEffect(() => {
|
|
127
133
|
// Anything in here is fired on component mount.
|
|
128
134
|
const event = createAnalyticsEvent(createEventPayload('ui.inlineDialog.viewed.linkPicker', {}));
|
|
@@ -152,10 +158,10 @@ function LinkPicker({
|
|
|
152
158
|
}, []);
|
|
153
159
|
const handleKeyDown = useCallback(event => {
|
|
154
160
|
const {
|
|
155
|
-
|
|
161
|
+
key
|
|
156
162
|
} = event;
|
|
157
|
-
const
|
|
158
|
-
const
|
|
163
|
+
const KEY_ARROW_DOWN = 'ArrowDown';
|
|
164
|
+
const KEY_ARROW_UP = 'ArrowUp';
|
|
159
165
|
|
|
160
166
|
if (!items || !items.length) {
|
|
161
167
|
return;
|
|
@@ -163,14 +169,14 @@ function LinkPicker({
|
|
|
163
169
|
|
|
164
170
|
let updatedIndex = activeIndex;
|
|
165
171
|
|
|
166
|
-
switch (
|
|
167
|
-
case
|
|
172
|
+
switch (key) {
|
|
173
|
+
case KEY_ARROW_DOWN:
|
|
168
174
|
// down
|
|
169
175
|
event.preventDefault();
|
|
170
176
|
updatedIndex = (activeIndex + 1) % items.length;
|
|
171
177
|
break;
|
|
172
178
|
|
|
173
|
-
case
|
|
179
|
+
case KEY_ARROW_UP:
|
|
174
180
|
// up
|
|
175
181
|
event.preventDefault();
|
|
176
182
|
updatedIndex = activeIndex > 0 ? activeIndex - 1 : items.length - 1;
|
|
@@ -179,7 +185,7 @@ function LinkPicker({
|
|
|
179
185
|
|
|
180
186
|
const item = items[updatedIndex];
|
|
181
187
|
|
|
182
|
-
if ([
|
|
188
|
+
if ([KEY_ARROW_DOWN, KEY_ARROW_UP].includes(key) && item) {
|
|
183
189
|
/**
|
|
184
190
|
* Manually track that the url has been updated using searchResult method
|
|
185
191
|
*/
|
package/dist/es2019/version.json
CHANGED
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
+
import { ConcurrentExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atlaskit/ufo';
|
|
3
|
+
export var ufoExperience = {
|
|
4
|
+
mounted: 'component-mounted'
|
|
5
|
+
};
|
|
6
|
+
|
|
7
|
+
var ufoExperiences = _defineProperty({}, ufoExperience.mounted, new ConcurrentExperience(ufoExperience.mounted, {
|
|
8
|
+
type: ExperienceTypes.Load,
|
|
9
|
+
performanceType: ExperiencePerformanceTypes.PageSegmentLoad,
|
|
10
|
+
platform: {
|
|
11
|
+
component: 'link-picker'
|
|
12
|
+
}
|
|
13
|
+
}));
|
|
14
|
+
|
|
15
|
+
export var startUfoExperience = function startUfoExperience(experienceName, id, metadata) {
|
|
16
|
+
var experience = ufoExperiences[experienceName].getInstance(id);
|
|
17
|
+
experience.start();
|
|
18
|
+
|
|
19
|
+
if (metadata) {
|
|
20
|
+
experience.addMetadata(metadata);
|
|
21
|
+
}
|
|
22
|
+
};
|
|
23
|
+
export var succeedUfoExperience = function succeedUfoExperience(experienceName, id, metadata) {
|
|
24
|
+
var experience = ufoExperiences[experienceName].getInstance(id);
|
|
25
|
+
experience.success({
|
|
26
|
+
metadata: metadata
|
|
27
|
+
});
|
|
28
|
+
};
|
|
29
|
+
export var failUfoExperience = function failUfoExperience(experienceName, id, metadata) {
|
|
30
|
+
var experience = ufoExperiences[experienceName].getInstance(id);
|
|
31
|
+
experience.failure({
|
|
32
|
+
metadata: metadata
|
|
33
|
+
});
|
|
34
|
+
};
|
|
35
|
+
export var abortUfoExperience = function abortUfoExperience(experienceName, id, metadata) {
|
|
36
|
+
var experience = ufoExperiences[experienceName].getInstance(id);
|
|
37
|
+
experience.abort({
|
|
38
|
+
metadata: metadata
|
|
39
|
+
});
|
|
40
|
+
};
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import React, { createContext, useContext, useEffect, useRef } from 'react';
|
|
2
|
+
import { v4 as uuidv4 } from 'uuid';
|
|
3
|
+
import { abortUfoExperience, startUfoExperience, ufoExperience } from '../../common/analytics/experiences';
|
|
4
|
+
export var INIT_CONTEXT = 'SESSION_UNINITIALIZED';
|
|
5
|
+
export var SessionContext = /*#__PURE__*/createContext(INIT_CONTEXT);
|
|
6
|
+
|
|
7
|
+
var useConstructor = function useConstructor(callback) {
|
|
8
|
+
var hasBeenFired = useRef(false);
|
|
9
|
+
|
|
10
|
+
if (!hasBeenFired.current) {
|
|
11
|
+
callback();
|
|
12
|
+
hasBeenFired.current = true;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
return null;
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
export var LinkPickerSessionProvider = function LinkPickerSessionProvider(_ref) {
|
|
19
|
+
var children = _ref.children;
|
|
20
|
+
|
|
21
|
+
var _useRef = useRef(uuidv4()),
|
|
22
|
+
sessionId = _useRef.current;
|
|
23
|
+
|
|
24
|
+
useEffect(function () {
|
|
25
|
+
return function () {
|
|
26
|
+
return abortUfoExperience(ufoExperience.mounted, sessionId);
|
|
27
|
+
};
|
|
28
|
+
}, [sessionId]);
|
|
29
|
+
useConstructor(function () {
|
|
30
|
+
return startUfoExperience(ufoExperience.mounted, sessionId);
|
|
31
|
+
});
|
|
32
|
+
return /*#__PURE__*/React.createElement(SessionContext.Provider, {
|
|
33
|
+
value: sessionId
|
|
34
|
+
}, children);
|
|
35
|
+
};
|
|
36
|
+
export var useLinkPickerSessionId = function useLinkPickerSessionId() {
|
|
37
|
+
return useContext(SessionContext);
|
|
38
|
+
};
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
2
|
+
import _createClass from "@babel/runtime/helpers/createClass";
|
|
3
|
+
import _inherits from "@babel/runtime/helpers/inherits";
|
|
4
|
+
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
|
5
|
+
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
6
|
+
|
|
7
|
+
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
8
|
+
|
|
9
|
+
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; } }
|
|
10
|
+
|
|
11
|
+
import React, { Component } from 'react';
|
|
12
|
+
// eslint-disable-next-line @repo/internal/react/no-class-components
|
|
13
|
+
export var BaseErrorBoundary = /*#__PURE__*/function (_Component) {
|
|
14
|
+
_inherits(BaseErrorBoundary, _Component);
|
|
15
|
+
|
|
16
|
+
var _super = _createSuper(BaseErrorBoundary);
|
|
17
|
+
|
|
18
|
+
function BaseErrorBoundary(props) {
|
|
19
|
+
var _this;
|
|
20
|
+
|
|
21
|
+
_classCallCheck(this, BaseErrorBoundary);
|
|
22
|
+
|
|
23
|
+
_this = _super.call(this, props);
|
|
24
|
+
_this.state = {
|
|
25
|
+
hasError: false
|
|
26
|
+
};
|
|
27
|
+
return _this;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
_createClass(BaseErrorBoundary, [{
|
|
31
|
+
key: "componentDidCatch",
|
|
32
|
+
value: function componentDidCatch(error, info) {
|
|
33
|
+
var onError = this.props.onError;
|
|
34
|
+
onError && onError(error, info);
|
|
35
|
+
this.setState({
|
|
36
|
+
hasError: true
|
|
37
|
+
});
|
|
38
|
+
}
|
|
39
|
+
}, {
|
|
40
|
+
key: "render",
|
|
41
|
+
value: function render() {
|
|
42
|
+
var _this$props = this.props,
|
|
43
|
+
children = _this$props.children,
|
|
44
|
+
ErrorComponent = _this$props.ErrorComponent;
|
|
45
|
+
var hasError = this.state.hasError;
|
|
46
|
+
|
|
47
|
+
if (hasError && ErrorComponent) {
|
|
48
|
+
return /*#__PURE__*/React.createElement(ErrorComponent, null);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
return children;
|
|
52
|
+
}
|
|
53
|
+
}]);
|
|
54
|
+
|
|
55
|
+
return BaseErrorBoundary;
|
|
56
|
+
}(Component);
|
package/dist/esm/ui/{error-boundary-fallback → error-boundary/error-boundary-fallback}/index.js
RENAMED
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
import { jsx } from '@emotion/react';
|
|
3
3
|
import EmptyState from '@atlaskit/empty-state';
|
|
4
4
|
import { defineMessages, useIntl } from 'react-intl-next';
|
|
5
|
-
import GenericErrorSVG from '
|
|
6
|
-
import { rootContainerStyles } from '
|
|
5
|
+
import GenericErrorSVG from '../../../common/generic-error-svg';
|
|
6
|
+
import { rootContainerStyles } from '../../link-picker/styled';
|
|
7
7
|
var messages = defineMessages({
|
|
8
8
|
heading: {
|
|
9
9
|
defaultMessage: 'Something went wrong!',
|
|
@@ -1,81 +1,32 @@
|
|
|
1
|
-
import
|
|
2
|
-
import _createClass from "@babel/runtime/helpers/createClass";
|
|
3
|
-
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
|
|
4
|
-
import _inherits from "@babel/runtime/helpers/inherits";
|
|
5
|
-
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
|
6
|
-
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
7
|
-
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
8
|
-
|
|
9
|
-
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
10
|
-
|
|
11
|
-
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; } }
|
|
12
|
-
|
|
13
|
-
import React, { Component } from 'react';
|
|
1
|
+
import React, { useCallback } from 'react';
|
|
14
2
|
import { withAnalyticsEvents } from '@atlaskit/analytics-next';
|
|
15
3
|
import createEventPayload from '../../analytics.codegen';
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
return _this;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
_createClass(BaseErrorBoundary, [{
|
|
49
|
-
key: "componentDidCatch",
|
|
50
|
-
value: function componentDidCatch(error, info) {
|
|
51
|
-
var onError = this.props.onError;
|
|
52
|
-
var payload = {
|
|
53
|
-
error: error,
|
|
54
|
-
info: info
|
|
55
|
-
};
|
|
56
|
-
this.fireAnalytics(payload);
|
|
57
|
-
onError && onError(error, info);
|
|
58
|
-
this.setState({
|
|
59
|
-
hasError: true
|
|
60
|
-
});
|
|
61
|
-
}
|
|
62
|
-
}, {
|
|
63
|
-
key: "render",
|
|
64
|
-
value: function render() {
|
|
65
|
-
var _this$props2 = this.props,
|
|
66
|
-
children = _this$props2.children,
|
|
67
|
-
ErrorComponent = _this$props2.ErrorComponent;
|
|
68
|
-
var hasError = this.state.hasError;
|
|
69
|
-
|
|
70
|
-
if (hasError && ErrorComponent) {
|
|
71
|
-
return /*#__PURE__*/React.createElement(ErrorComponent, null);
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
return children;
|
|
75
|
-
}
|
|
76
|
-
}]);
|
|
77
|
-
|
|
78
|
-
return BaseErrorBoundary;
|
|
79
|
-
}(Component);
|
|
80
|
-
var ErrorBoundary = withAnalyticsEvents()(BaseErrorBoundary);
|
|
81
|
-
export default ErrorBoundary;
|
|
4
|
+
import { ANALYTICS_CHANNEL } from '../../common/constants';
|
|
5
|
+
import { failUfoExperience, ufoExperience } from '../../common/analytics/experiences';
|
|
6
|
+
import { useLinkPickerSessionId } from '../../controllers/session-provider';
|
|
7
|
+
import { ErrorBoundaryFallback } from './error-boundary-fallback';
|
|
8
|
+
import { BaseErrorBoundary } from './error-boundary-base';
|
|
9
|
+
|
|
10
|
+
function ErrorBoundary(_ref) {
|
|
11
|
+
var children = _ref.children,
|
|
12
|
+
createAnalyticsEvent = _ref.createAnalyticsEvent;
|
|
13
|
+
var linkPickerSessionId = useLinkPickerSessionId();
|
|
14
|
+
var handleError = useCallback(function (error, info) {
|
|
15
|
+
var _window, _window$navigator, _info$componentStack;
|
|
16
|
+
|
|
17
|
+
// Fire Analytics event
|
|
18
|
+
createAnalyticsEvent(createEventPayload('ui.linkPicker.unhandledErrorCaught', {
|
|
19
|
+
browserInfo: ((_window = window) === null || _window === void 0 ? void 0 : (_window$navigator = _window.navigator) === null || _window$navigator === void 0 ? void 0 : _window$navigator.userAgent) || 'unknown',
|
|
20
|
+
error: error.toString(),
|
|
21
|
+
componentStack: (_info$componentStack = info === null || info === void 0 ? void 0 : info.componentStack) !== null && _info$componentStack !== void 0 ? _info$componentStack : ''
|
|
22
|
+
})).fire(ANALYTICS_CHANNEL); // Fire UFO failed experience
|
|
23
|
+
|
|
24
|
+
failUfoExperience(ufoExperience.mounted, linkPickerSessionId);
|
|
25
|
+
}, [createAnalyticsEvent, linkPickerSessionId]);
|
|
26
|
+
return /*#__PURE__*/React.createElement(BaseErrorBoundary, {
|
|
27
|
+
onError: handleError,
|
|
28
|
+
ErrorComponent: ErrorBoundaryFallback
|
|
29
|
+
}, children);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
export default withAnalyticsEvents()(ErrorBoundary);
|
package/dist/esm/ui/index.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
+
import { AnalyticsContext } from '@atlaskit/analytics-next';
|
|
1
2
|
import React, { memo } from 'react';
|
|
2
3
|
import { LazySuspense, lazyForPaint } from 'react-loosely-lazy';
|
|
3
|
-
import {
|
|
4
|
-
import { COMPONENT_NAME, ANALYTICS_CHANNEL } from '../common/constants';
|
|
4
|
+
import { COMPONENT_NAME } from '../common/constants';
|
|
5
5
|
import { name as packageName, version as packageVersion } from '../version.json';
|
|
6
6
|
import ErrorBoundary from './error-boundary';
|
|
7
|
-
import { ErrorBoundaryFallback } from './error-boundary-fallback';
|
|
8
7
|
import { LoaderFallback } from './loader-fallback';
|
|
8
|
+
import { LinkPickerSessionProvider } from '../controllers/session-provider';
|
|
9
9
|
export var PACKAGE_DATA = {
|
|
10
10
|
packageName: packageName,
|
|
11
11
|
packageVersion: packageVersion,
|
|
@@ -20,10 +20,7 @@ var LazyLinkPicker = lazyForPaint(function () {
|
|
|
20
20
|
export var ComposedLinkPicker = /*#__PURE__*/memo(function (props) {
|
|
21
21
|
return /*#__PURE__*/React.createElement(AnalyticsContext, {
|
|
22
22
|
data: PACKAGE_DATA
|
|
23
|
-
}, /*#__PURE__*/React.createElement(ErrorBoundary, {
|
|
24
|
-
channel: ANALYTICS_CHANNEL,
|
|
25
|
-
ErrorComponent: ErrorBoundaryFallback
|
|
26
|
-
}, /*#__PURE__*/React.createElement(LazySuspense, {
|
|
23
|
+
}, /*#__PURE__*/React.createElement(LinkPickerSessionProvider, null, /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement(LazySuspense, {
|
|
27
24
|
fallback: LoaderFallback
|
|
28
|
-
}, /*#__PURE__*/React.createElement(LazyLinkPicker, props))));
|
|
25
|
+
}, /*#__PURE__*/React.createElement(LazyLinkPicker, props)))));
|
|
29
26
|
});
|
|
@@ -30,6 +30,8 @@ import LinkSearchList, { testIds as listTestIds } from './link-search-list';
|
|
|
30
30
|
import LinkSearchError, { testIds as searchErrorTestIds } from './link-search-error';
|
|
31
31
|
import FormFooter, { testIds as formFooterTestIds } from './form-footer';
|
|
32
32
|
import { getDataSource, getScreenReaderText } from './utils';
|
|
33
|
+
import { succeedUfoExperience, ufoExperience } from '../../common/analytics/experiences';
|
|
34
|
+
import { useLinkPickerSessionId } from '../../controllers/session-provider';
|
|
33
35
|
export var RECENT_SEARCH_LIST_SIZE = 5;
|
|
34
36
|
export var testIds = _objectSpread(_objectSpread(_objectSpread(_objectSpread({
|
|
35
37
|
linkPicker: 'link-picker',
|
|
@@ -130,6 +132,10 @@ function LinkPicker(_ref) {
|
|
|
130
132
|
trackAttribute = _useLinkPickerAnalyti.trackAttribute,
|
|
131
133
|
getAttributes = _useLinkPickerAnalyti.getAttributes;
|
|
132
134
|
|
|
135
|
+
var linkPickerSessionId = useLinkPickerSessionId();
|
|
136
|
+
useLayoutEffect(function () {
|
|
137
|
+
succeedUfoExperience(ufoExperience.mounted, linkPickerSessionId);
|
|
138
|
+
}, [linkPickerSessionId]);
|
|
133
139
|
useEffect(function () {
|
|
134
140
|
// Anything in here is fired on component mount.
|
|
135
141
|
var event = createAnalyticsEvent(createEventPayload('ui.inlineDialog.viewed.linkPicker', {}));
|
|
@@ -158,9 +164,9 @@ function LinkPicker(_ref) {
|
|
|
158
164
|
});
|
|
159
165
|
}, []);
|
|
160
166
|
var handleKeyDown = useCallback(function (event) {
|
|
161
|
-
var
|
|
162
|
-
var
|
|
163
|
-
var
|
|
167
|
+
var key = event.key;
|
|
168
|
+
var KEY_ARROW_DOWN = 'ArrowDown';
|
|
169
|
+
var KEY_ARROW_UP = 'ArrowUp';
|
|
164
170
|
|
|
165
171
|
if (!items || !items.length) {
|
|
166
172
|
return;
|
|
@@ -168,14 +174,14 @@ function LinkPicker(_ref) {
|
|
|
168
174
|
|
|
169
175
|
var updatedIndex = activeIndex;
|
|
170
176
|
|
|
171
|
-
switch (
|
|
172
|
-
case
|
|
177
|
+
switch (key) {
|
|
178
|
+
case KEY_ARROW_DOWN:
|
|
173
179
|
// down
|
|
174
180
|
event.preventDefault();
|
|
175
181
|
updatedIndex = (activeIndex + 1) % items.length;
|
|
176
182
|
break;
|
|
177
183
|
|
|
178
|
-
case
|
|
184
|
+
case KEY_ARROW_UP:
|
|
179
185
|
// up
|
|
180
186
|
event.preventDefault();
|
|
181
187
|
updatedIndex = activeIndex > 0 ? activeIndex - 1 : items.length - 1;
|
|
@@ -184,7 +190,7 @@ function LinkPicker(_ref) {
|
|
|
184
190
|
|
|
185
191
|
var item = items[updatedIndex];
|
|
186
192
|
|
|
187
|
-
if ([
|
|
193
|
+
if ([KEY_ARROW_DOWN, KEY_ARROW_UP].includes(key) && item) {
|
|
188
194
|
/**
|
|
189
195
|
* Manually track that the url has been updated using searchResult method
|
|
190
196
|
*/
|
package/dist/esm/version.json
CHANGED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { CustomData } from '@atlaskit/ufo';
|
|
2
|
+
export declare const ufoExperience: {
|
|
3
|
+
readonly mounted: "component-mounted";
|
|
4
|
+
};
|
|
5
|
+
declare type ExperienceType = keyof typeof ufoExperience;
|
|
6
|
+
declare type ExperienceName = typeof ufoExperience[ExperienceType];
|
|
7
|
+
export declare const startUfoExperience: (experienceName: ExperienceName, id: string, metadata?: CustomData | undefined) => void;
|
|
8
|
+
export declare const succeedUfoExperience: (experienceName: ExperienceName, id: string, metadata?: CustomData | undefined) => void;
|
|
9
|
+
export declare const failUfoExperience: (experienceName: ExperienceName, id: string, metadata?: CustomData | undefined) => void;
|
|
10
|
+
export declare const abortUfoExperience: (experienceName: ExperienceName, id: string, metadata?: CustomData | undefined) => void;
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
2
|
+
export declare type LinkPickerSessionId = string;
|
|
3
|
+
export declare const INIT_CONTEXT = "SESSION_UNINITIALIZED";
|
|
4
|
+
export declare const SessionContext: React.Context<string>;
|
|
5
|
+
interface SessionProviderProps {
|
|
6
|
+
children: ReactNode;
|
|
7
|
+
}
|
|
8
|
+
export declare const LinkPickerSessionProvider: ({ children, }: SessionProviderProps) => JSX.Element;
|
|
9
|
+
export declare const useLinkPickerSessionId: () => string;
|
|
10
|
+
export {};
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React, { Component, ReactNode } from 'react';
|
|
2
|
+
export declare type ErrorBoundaryErrorInfo = {
|
|
3
|
+
componentStack: string;
|
|
4
|
+
};
|
|
5
|
+
declare type BaseErrorBoundaryState = {
|
|
6
|
+
hasError: boolean;
|
|
7
|
+
};
|
|
8
|
+
interface BaseErrorBoundaryProps {
|
|
9
|
+
children: ReactNode;
|
|
10
|
+
ErrorComponent?: React.ComponentType;
|
|
11
|
+
onError?: (error: Error, info?: ErrorBoundaryErrorInfo) => void;
|
|
12
|
+
}
|
|
13
|
+
export declare class BaseErrorBoundary extends Component<BaseErrorBoundaryProps, BaseErrorBoundaryState> {
|
|
14
|
+
constructor(props: BaseErrorBoundaryProps);
|
|
15
|
+
componentDidCatch(error: Error, info?: ErrorBoundaryErrorInfo): void;
|
|
16
|
+
render(): React.ReactNode;
|
|
17
|
+
}
|
|
18
|
+
export {};
|
|
@@ -1,27 +1,7 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
2
2
|
import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
|
|
3
|
-
|
|
4
|
-
componentStack: string;
|
|
5
|
-
};
|
|
6
|
-
export interface ErrorBoundaryProps extends WithAnalyticsEventsProps {
|
|
3
|
+
interface ErrorBoundaryProps extends WithAnalyticsEventsProps {
|
|
7
4
|
children: ReactNode;
|
|
8
|
-
channel: string;
|
|
9
|
-
ErrorComponent?: React.ComponentType;
|
|
10
|
-
onError?: (error: Error, info?: ErrorBoundaryErrorInfo) => void;
|
|
11
5
|
}
|
|
12
|
-
declare
|
|
13
|
-
|
|
14
|
-
info?: ErrorBoundaryErrorInfo;
|
|
15
|
-
[key: string]: any;
|
|
16
|
-
};
|
|
17
|
-
declare type ErrorBoundaryState = {
|
|
18
|
-
hasError: boolean;
|
|
19
|
-
};
|
|
20
|
-
export declare class BaseErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
|
|
21
|
-
constructor(props: ErrorBoundaryProps);
|
|
22
|
-
fireAnalytics: (analyticsErrorPayload: ErrorBoundaryPayload) => void;
|
|
23
|
-
componentDidCatch(error: Error, info?: ErrorBoundaryErrorInfo): void;
|
|
24
|
-
render(): React.ReactNode;
|
|
25
|
-
}
|
|
26
|
-
declare const ErrorBoundary: React.ForwardRefExoticComponent<Omit<ErrorBoundaryProps, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;
|
|
27
|
-
export default ErrorBoundary;
|
|
6
|
+
declare const _default: React.ForwardRefExoticComponent<Omit<ErrorBoundaryProps, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;
|
|
7
|
+
export default _default;
|