@atlaskit/link-picker 1.10.3 → 1.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/CHANGELOG.md +14 -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 +28 -1
  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 +24 -1
  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 +25 -1
  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-fallback → error-boundary/error-boundary-fallback}/index.d.ts +0 -0
  30. package/dist/types/ui/error-boundary/index.d.ts +4 -24
  31. package/dist/types/ui/link-picker/index.d.ts +5 -0
  32. package/dist/types-ts4.0/common/analytics/experiences.d.ts +11 -0
  33. package/dist/types-ts4.0/controllers/session-provider/index.d.ts +10 -0
  34. package/dist/types-ts4.0/ui/error-boundary/error-boundary-base/index.d.ts +18 -0
  35. package/dist/types-ts4.0/ui/{error-boundary-fallback → error-boundary/error-boundary-fallback}/index.d.ts +0 -0
  36. package/dist/types-ts4.0/ui/error-boundary/index.d.ts +4 -24
  37. package/dist/types-ts4.0/ui/link-picker/index.d.ts +5 -0
  38. package/package.json +9 -5
  39. package/report.api.md +5 -0
@@ -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,8 +24,11 @@ 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 = {
31
+ linkPickerRoot: 'link-picker-root',
29
32
  linkPicker: 'link-picker',
30
33
  urlInputField: 'link-url',
31
34
  textInputField: 'link-text',
@@ -123,6 +126,10 @@ function LinkPicker({
123
126
  trackAttribute,
124
127
  getAttributes
125
128
  } = useLinkPickerAnalytics();
129
+ const linkPickerSessionId = useLinkPickerSessionId();
130
+ useLayoutEffect(() => {
131
+ succeedUfoExperience(ufoExperience.mounted, linkPickerSessionId);
132
+ }, [linkPickerSessionId]);
126
133
  useEffect(() => {
127
134
  // Anything in here is fired on component mount.
128
135
  const event = createAnalyticsEvent(createEventPayload('ui.inlineDialog.viewed.linkPicker', {}));
@@ -371,4 +378,20 @@ function LinkPicker({
371
378
  }));
372
379
  }
373
380
 
374
- export default withLinkPickerAnalyticsContext( /*#__PURE__*/memo(LinkPicker));
381
+ const DefaultRootComponent = ({
382
+ children
383
+ }) => {
384
+ return jsx("div", {
385
+ "data-testid": testIds.linkPickerRoot
386
+ }, children);
387
+ };
388
+
389
+ export default withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
390
+ component,
391
+ ...props
392
+ }) => {
393
+ const RootComponent = component !== null && component !== void 0 ? component : DefaultRootComponent;
394
+ return jsx(RootComponent, _extends({}, props, {
395
+ "data-testid": testIds.linkPickerRoot
396
+ }), jsx(LinkPicker, props));
397
+ }));
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/link-picker",
3
- "version": "1.10.3",
3
+ "version": "1.11.0",
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
  });
@@ -1,6 +1,8 @@
1
+ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
1
2
  import _extends from "@babel/runtime/helpers/extends";
2
3
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
4
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
5
+ var _excluded = ["component"];
4
6
 
5
7
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
6
8
 
@@ -30,8 +32,11 @@ import LinkSearchList, { testIds as listTestIds } from './link-search-list';
30
32
  import LinkSearchError, { testIds as searchErrorTestIds } from './link-search-error';
31
33
  import FormFooter, { testIds as formFooterTestIds } from './form-footer';
32
34
  import { getDataSource, getScreenReaderText } from './utils';
35
+ import { succeedUfoExperience, ufoExperience } from '../../common/analytics/experiences';
36
+ import { useLinkPickerSessionId } from '../../controllers/session-provider';
33
37
  export var RECENT_SEARCH_LIST_SIZE = 5;
34
38
  export var testIds = _objectSpread(_objectSpread(_objectSpread(_objectSpread({
39
+ linkPickerRoot: 'link-picker-root',
35
40
  linkPicker: 'link-picker',
36
41
  urlInputField: 'link-url',
37
42
  textInputField: 'link-text',
@@ -130,6 +135,10 @@ function LinkPicker(_ref) {
130
135
  trackAttribute = _useLinkPickerAnalyti.trackAttribute,
131
136
  getAttributes = _useLinkPickerAnalyti.getAttributes;
132
137
 
138
+ var linkPickerSessionId = useLinkPickerSessionId();
139
+ useLayoutEffect(function () {
140
+ succeedUfoExperience(ufoExperience.mounted, linkPickerSessionId);
141
+ }, [linkPickerSessionId]);
133
142
  useEffect(function () {
134
143
  // Anything in here is fired on component mount.
135
144
  var event = createAnalyticsEvent(createEventPayload('ui.inlineDialog.viewed.linkPicker', {}));
@@ -381,4 +390,19 @@ function LinkPicker(_ref) {
381
390
  }));
382
391
  }
383
392
 
384
- export default withLinkPickerAnalyticsContext( /*#__PURE__*/memo(LinkPicker));
393
+ var DefaultRootComponent = function DefaultRootComponent(_ref2) {
394
+ var children = _ref2.children;
395
+ return jsx("div", {
396
+ "data-testid": testIds.linkPickerRoot
397
+ }, children);
398
+ };
399
+
400
+ export default withLinkPickerAnalyticsContext( /*#__PURE__*/memo(function (_ref3) {
401
+ var component = _ref3.component,
402
+ props = _objectWithoutProperties(_ref3, _excluded);
403
+
404
+ var RootComponent = component !== null && component !== void 0 ? component : DefaultRootComponent;
405
+ return jsx(RootComponent, _extends({}, props, {
406
+ "data-testid": testIds.linkPickerRoot
407
+ }), jsx(LinkPicker, props));
408
+ }));
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/link-picker",
3
- "version": "1.10.3",
3
+ "version": "1.11.0",
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 {};
@@ -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;
@@ -15,6 +15,7 @@ export declare const testIds: {
15
15
  readonly searchError: string;
16
16
  readonly insertButton: "link-picker-insert-button";
17
17
  readonly cancelButton: "link-picker-cancel-button";
18
+ readonly linkPickerRoot: "link-picker-root";
18
19
  readonly linkPicker: "link-picker";
19
20
  readonly urlInputField: "link-url";
20
21
  readonly textInputField: "link-text";
@@ -56,6 +57,10 @@ export interface LinkPickerProps {
56
57
  displayText?: string | null;
57
58
  /** Plugins that provide link suggestions / search capabilities. */
58
59
  plugins?: LinkPickerPlugin[];
60
+ /** Customise the link picker root component */
61
+ component?: React.ComponentType<Partial<LinkPickerProps> & {
62
+ children: React.ReactElement;
63
+ }>;
59
64
  }
60
65
  export interface PickerState {
61
66
  selectedIndex: number;
@@ -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 {};