@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.
Files changed (74) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/common/analytics/experiences.js +62 -0
  3. package/dist/cjs/controllers/session-provider/index.js +61 -0
  4. package/dist/cjs/ui/error-boundary/error-boundary-base/index.js +76 -0
  5. package/dist/cjs/ui/{error-boundary-fallback → error-boundary/error-boundary-fallback}/index.js +2 -2
  6. package/dist/cjs/ui/error-boundary/index.js +33 -81
  7. package/dist/cjs/ui/index.js +6 -9
  8. package/dist/cjs/ui/link-picker/index.js +15 -7
  9. package/dist/cjs/version.json +1 -1
  10. package/dist/es2019/common/analytics/experiences.js +39 -0
  11. package/dist/es2019/controllers/session-provider/index.js +32 -0
  12. package/dist/es2019/ui/error-boundary/error-boundary-base/index.js +37 -0
  13. package/dist/es2019/ui/{error-boundary-fallback → error-boundary/error-boundary-fallback}/index.js +2 -2
  14. package/dist/es2019/ui/error-boundary/index.js +30 -59
  15. package/dist/es2019/ui/index.js +5 -8
  16. package/dist/es2019/ui/link-picker/index.js +13 -7
  17. package/dist/es2019/version.json +1 -1
  18. package/dist/esm/common/analytics/experiences.js +40 -0
  19. package/dist/esm/controllers/session-provider/index.js +38 -0
  20. package/dist/esm/ui/error-boundary/error-boundary-base/index.js +56 -0
  21. package/dist/esm/ui/{error-boundary-fallback → error-boundary/error-boundary-fallback}/index.js +2 -2
  22. package/dist/esm/ui/error-boundary/index.js +30 -79
  23. package/dist/esm/ui/index.js +5 -8
  24. package/dist/esm/ui/link-picker/index.js +13 -7
  25. package/dist/esm/version.json +1 -1
  26. package/dist/types/common/analytics/experiences.d.ts +11 -0
  27. package/dist/types/controllers/session-provider/index.d.ts +10 -0
  28. package/dist/types/ui/error-boundary/error-boundary-base/index.d.ts +18 -0
  29. package/dist/types/ui/error-boundary/error-boundary-fallback/index.d.ts +3 -0
  30. package/dist/types/ui/error-boundary/index.d.ts +4 -24
  31. package/dist/types-ts4.0/analytics.codegen.d.ts +52 -0
  32. package/dist/types-ts4.0/common/analytics/context.d.ts +28 -0
  33. package/dist/types-ts4.0/common/analytics/experiences.d.ts +11 -0
  34. package/dist/types-ts4.0/common/analytics/index.d.ts +2 -0
  35. package/dist/types-ts4.0/common/analytics/input-field-tracking.d.ts +17 -0
  36. package/dist/types-ts4.0/common/constants.d.ts +2 -0
  37. package/dist/types-ts4.0/common/generic-error-svg/index.d.ts +4 -0
  38. package/dist/types-ts4.0/common/generic-error-svg/styled.d.ts +1 -0
  39. package/dist/types-ts4.0/common/utils/url.d.ts +5 -0
  40. package/dist/types-ts4.0/controllers/session-provider/index.d.ts +10 -0
  41. package/dist/types-ts4.0/controllers/use-fix-height/index.d.ts +8 -0
  42. package/dist/types-ts4.0/index.d.ts +3 -0
  43. package/dist/types-ts4.0/services/use-plugins/index.d.ts +14 -0
  44. package/dist/types-ts4.0/services/use-plugins/reducer.d.ts +33 -0
  45. package/dist/types-ts4.0/services/use-plugins/utils.d.ts +18 -0
  46. package/dist/types-ts4.0/services/use-search-query/index.d.ts +3 -0
  47. package/dist/types-ts4.0/ui/error-boundary/error-boundary-base/index.d.ts +18 -0
  48. package/dist/{types/ui → types-ts4.0/ui/error-boundary}/error-boundary-fallback/index.d.ts +0 -0
  49. package/dist/types-ts4.0/ui/error-boundary/index.d.ts +7 -0
  50. package/dist/types-ts4.0/ui/index.d.ts +5 -0
  51. package/dist/types-ts4.0/ui/link-picker/announcer.d.ts +22 -0
  52. package/dist/types-ts4.0/ui/link-picker/browser.d.ts +15 -0
  53. package/dist/types-ts4.0/ui/link-picker/form-footer/index.d.ts +13 -0
  54. package/dist/types-ts4.0/ui/link-picker/form-footer/styled.d.ts +1 -0
  55. package/dist/types-ts4.0/ui/link-picker/index.d.ts +69 -0
  56. package/dist/types-ts4.0/ui/link-picker/link-search-error/index.d.ts +20 -0
  57. package/dist/types-ts4.0/ui/link-picker/link-search-list/index.d.ts +43 -0
  58. package/dist/types-ts4.0/ui/link-picker/link-search-list/link-search-no-results/index.d.ts +19 -0
  59. package/dist/types-ts4.0/ui/link-picker/link-search-list/link-search-no-results/no-results-svg/index.d.ts +4 -0
  60. package/dist/types-ts4.0/ui/link-picker/link-search-list/link-search-no-results/no-results-svg/styled.d.ts +1 -0
  61. package/dist/types-ts4.0/ui/link-picker/link-search-list/link-search-no-results/styled.d.ts +1 -0
  62. package/dist/types-ts4.0/ui/link-picker/link-search-list/styled.d.ts +4 -0
  63. package/dist/types-ts4.0/ui/link-picker/list-item/index.d.ts +17 -0
  64. package/dist/types-ts4.0/ui/link-picker/list-item/styled.d.ts +9 -0
  65. package/dist/types-ts4.0/ui/link-picker/messages.d.ts +85 -0
  66. package/dist/types-ts4.0/ui/link-picker/styled.d.ts +9 -0
  67. package/dist/types-ts4.0/ui/link-picker/text-input/index.d.ts +14 -0
  68. package/dist/types-ts4.0/ui/link-picker/text-input/styled.d.ts +2 -0
  69. package/dist/types-ts4.0/ui/link-picker/transformTimeStamp.d.ts +3 -0
  70. package/dist/types-ts4.0/ui/link-picker/utils.d.ts +10 -0
  71. package/dist/types-ts4.0/ui/loader-fallback/index.d.ts +3 -0
  72. package/dist/types-ts4.0/ui/types.d.ts +57 -0
  73. package/package.json +15 -5
  74. package/report.api.md +45 -65
@@ -1,62 +1,33 @@
1
- import _defineProperty from "@babel/runtime/helpers/defineProperty";
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
- // eslint-disable-next-line @repo/internal/react/no-class-components
6
- export class BaseErrorBoundary extends Component {
7
- constructor(props) {
8
- super(props);
9
-
10
- _defineProperty(this, "fireAnalytics", analyticsErrorPayload => {
11
- var _window, _window$navigator, _analyticsErrorPayloa, _analyticsErrorPayloa2;
12
-
13
- const {
14
- createAnalyticsEvent,
15
- channel
16
- } = this.props;
17
- createAnalyticsEvent(createEventPayload('ui.linkPicker.unhandledErrorCaught', {
18
- browserInfo: ((_window = window) === null || _window === void 0 ? void 0 : (_window$navigator = _window.navigator) === null || _window$navigator === void 0 ? void 0 : _window$navigator.userAgent) || 'unknown',
19
- error: analyticsErrorPayload.error.toString(),
20
- componentStack: (_analyticsErrorPayloa = (_analyticsErrorPayloa2 = analyticsErrorPayload.info) === null || _analyticsErrorPayloa2 === void 0 ? void 0 : _analyticsErrorPayloa2.componentStack) !== null && _analyticsErrorPayloa !== void 0 ? _analyticsErrorPayloa : ''
21
- })).fire(channel);
22
- });
23
-
24
- this.state = {
25
- hasError: false
26
- };
27
- }
28
-
29
- componentDidCatch(error, info) {
30
- const {
31
- onError
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
- const ErrorBoundary = withAnalyticsEvents()(BaseErrorBoundary);
62
- export default ErrorBoundary;
32
+
33
+ export default withAnalyticsEvents()(ErrorBoundary);
@@ -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 { AnalyticsContext } from '@atlaskit/analytics-next';
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
- keyCode
161
+ key
156
162
  } = event;
157
- const KEY_CODE_ARROW_DOWN = 40;
158
- const KEY_CODE_ARROW_UP = 38;
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 (keyCode) {
167
- case KEY_CODE_ARROW_DOWN:
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 KEY_CODE_ARROW_UP:
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 ([KEY_CODE_ARROW_DOWN, KEY_CODE_ARROW_UP].includes(keyCode) && item) {
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
  */
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/link-picker",
3
- "version": "1.10.2",
3
+ "version": "1.10.4",
4
4
  "sideEffects": false
5
5
  }
@@ -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);
@@ -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 '../../common/generic-error-svg';
6
- import { rootContainerStyles } from '../link-picker/styled';
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 _classCallCheck from "@babel/runtime/helpers/classCallCheck";
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
- // eslint-disable-next-line @repo/internal/react/no-class-components
17
- export var BaseErrorBoundary = /*#__PURE__*/function (_Component) {
18
- _inherits(BaseErrorBoundary, _Component);
19
-
20
- var _super = _createSuper(BaseErrorBoundary);
21
-
22
- function BaseErrorBoundary(props) {
23
- var _this;
24
-
25
- _classCallCheck(this, BaseErrorBoundary);
26
-
27
- _this = _super.call(this, props);
28
-
29
- _defineProperty(_assertThisInitialized(_this), "fireAnalytics", function (analyticsErrorPayload) {
30
- var _window, _window$navigator, _analyticsErrorPayloa, _analyticsErrorPayloa2;
31
-
32
- var _this$props = _this.props,
33
- createAnalyticsEvent = _this$props.createAnalyticsEvent,
34
- channel = _this$props.channel;
35
- createAnalyticsEvent(createEventPayload('ui.linkPicker.unhandledErrorCaught', {
36
- browserInfo: ((_window = window) === null || _window === void 0 ? void 0 : (_window$navigator = _window.navigator) === null || _window$navigator === void 0 ? void 0 : _window$navigator.userAgent) || 'unknown',
37
- error: analyticsErrorPayload.error.toString(),
38
- componentStack: (_analyticsErrorPayloa = (_analyticsErrorPayloa2 = analyticsErrorPayload.info) === null || _analyticsErrorPayloa2 === void 0 ? void 0 : _analyticsErrorPayloa2.componentStack) !== null && _analyticsErrorPayloa !== void 0 ? _analyticsErrorPayloa : ''
39
- })).fire(channel);
40
- });
41
-
42
- _this.state = {
43
- hasError: false
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);
@@ -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 { AnalyticsContext } from '@atlaskit/analytics-next';
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 keyCode = event.keyCode;
162
- var KEY_CODE_ARROW_DOWN = 40;
163
- var KEY_CODE_ARROW_UP = 38;
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 (keyCode) {
172
- case KEY_CODE_ARROW_DOWN:
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 KEY_CODE_ARROW_UP:
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 ([KEY_CODE_ARROW_DOWN, KEY_CODE_ARROW_UP].includes(keyCode) && item) {
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
  */
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/link-picker",
3
- "version": "1.10.2",
3
+ "version": "1.10.4",
4
4
  "sideEffects": false
5
5
  }
@@ -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 {};
@@ -0,0 +1,3 @@
1
+ /** @jsx jsx */
2
+ import { jsx } from '@emotion/react';
3
+ export declare const ErrorBoundaryFallback: () => jsx.JSX.Element;
@@ -1,27 +1,7 @@
1
- import React, { Component, ReactNode } from 'react';
1
+ import React, { ReactNode } from 'react';
2
2
  import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
3
- declare type ErrorBoundaryErrorInfo = {
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 type ErrorBoundaryPayload = {
13
- error: Error | string;
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;