@atlaskit/share 3.1.5 → 3.2.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/share
 
+## 3.2.0
+
+### Minor Changes
+
+- [`bbadcbc3c29`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bbadcbc3c29) - Add analytics through @atlassian/ufo
+
+## 3.1.7
+
+### Patch Changes
+
+- [`a424e62b264`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a424e62b264) - Changes to support Node 16 Typescript definitions from `@types/node`.
+
+## 3.1.6
+
+### Patch Changes
+
+- [`cb2392f6d33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb2392f6d33) - Upgrade to TypeScript 4.2.4
+- Updated dependencies
+
 ## 3.1.5
 
 ### Patch Changes

package/dist/cjs/components/ErrorBoundary.js

@@ -25,7 +25,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _analyticsNext = require("@atlaskit/analytics-next");
 
-var _analytics = require("./analytics");
+var _analytics = require("./analytics/analytics");
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 

package/dist/cjs/components/LazyShareForm/LazyShareForm.js

@@ -11,7 +11,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _analyticsNext = require("@atlaskit/analytics-next");
 
-var _analytics = require("../analytics");
+var _analytics = require("../analytics/analytics");
 
 var _IntegrationForm = require("../IntegrationForm");
 

package/dist/cjs/components/ShareDialogContainer.js

@@ -9,6 +9,8 @@ exports.defaultConfig = exports.ShareDialogContainerInternal = exports.ShareDial
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -43,7 +45,9 @@ var _ShareServiceClient = require("../clients/ShareServiceClient");
 
 var _i18n = require("../i18n");
 
-var _analytics = require("./analytics");
+var _analytics = require("./analytics/analytics");
+
+var _ufoExperiences = require("./analytics/ufoExperiences");
 
 var _ErrorBoundary = _interopRequireDefault(require("./ErrorBoundary"));
 
@@ -105,16 +109,19 @@ var ShareDialogContainerInternal = /*#__PURE__*/function (_React$Component) {
       _this.setState({
         isFetchingConfig: true
       }, /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-        var config;
+        var config, errObj;
         return _regenerator.default.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
                 _context.prev = 0;
-                _context.next = 3;
+
+                _ufoExperiences.renderShareDialogExp.start();
+
+                _context.next = 4;
                 return _this.shareClient.getConfig(_this.props.cloudId);
 
-              case 3:
+              case 4:
                 config = _context.sent;
 
                 if (_this._isMounted) {
@@ -124,11 +131,13 @@ var ShareDialogContainerInternal = /*#__PURE__*/function (_React$Component) {
                   });
                 }
 
-                _context.next = 10;
+                _ufoExperiences.renderShareDialogExp.success();
+
+                _context.next = 15;
                 break;
 
-              case 7:
-                _context.prev = 7;
+              case 9:
+                _context.prev = 9;
                 _context.t0 = _context["catch"](0);
 
                 if (_this._isMounted) {
@@ -138,12 +147,26 @@ var ShareDialogContainerInternal = /*#__PURE__*/function (_React$Component) {
                   });
                 }
 
-              case 10:
+                errObj = (0, _extends2.default)({}, _context.t0);
+
+                if (_context.t0 instanceof Error) {
+                  errObj = _objectSpread(_objectSpread({}, errObj), {}, {
+                    className: _context.t0.constructor.name
+                  });
+                }
+
+                _ufoExperiences.renderShareDialogExp.failure({
+                  metadata: {
+                    error: errObj
+                  }
+                });
+
+              case 15:
               case "end":
                 return _context.stop();
             }
           }
-        }, _callee, null, [[0, 7]]);
+        }, _callee, null, [[0, 9]]);
       })));
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSubmitShare", function (_ref2) {

package/dist/cjs/components/ShareDialogWithTrigger.js

@@ -47,7 +47,9 @@ var _i18n = require("../i18n");
 
 var _types = require("../types");
 
-var _analytics = require("./analytics");
+var _analytics = require("./analytics/analytics");
+
+var _ufoExperiences = require("./analytics/ufoExperiences");
 
 var _lazy = _interopRequireDefault(require("./LazyShareForm/lazy"));
 
@@ -197,6 +199,11 @@ var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureComponent
 
 
             if (shouldCloseOnEscapePress) {
+              // This experience should be aborted in a scenario when a user closes the dialog before the shareClient.getConfig() call is finished
+              // It is a race condition between the `SUCCEEDED` case and the `ABORTED` case of this experience
+              // UFO experiences can only have one FINAL state so it doesn't matter if we call .abort() after the experience has succeeded and vice versa
+              _ufoExperiences.renderShareDialogExp.abort();
+
               _this.createAndFireEvent((0, _analytics.cancelShare)(_this.start));
 
               _this.closeAndResetDialog();
@@ -250,7 +257,12 @@ var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureComponent
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleCloseDialog", function () {
       if (_this.props.onDialogClose) {
         _this.props.onDialogClose();
-      }
+      } // This experience should be aborted in a scenario when a user closes the dialog before the shareClient.getConfig() call is finished
+      // It is a race condition between the `SUCCEEDED` case and the `ABORTED` case of this experience
+      // UFO experiences can only have one FINAL state so it doesn't matter if we call .abort() after the experience has succeeded and vice versa
+
+
+      _ufoExperiences.renderShareDialogExp.abort();
 
       _this.setState({
         isDialogOpen: false,
@@ -271,6 +283,8 @@ var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureComponent
         return;
       }
 
+      _ufoExperiences.shareSubmitExp.start();
+
       _this.setState({
         isSharing: true
       });
@@ -285,6 +299,8 @@ var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureComponent
         });
 
         showFlags(_this.getFlags());
+
+        _ufoExperiences.shareSubmitExp.success();
       }).catch(function (err) {
         _this.setState({
           isSharing: false,
@@ -292,6 +308,15 @@ var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureComponent
             message: err.message
           }
         });
+
+        _ufoExperiences.shareSubmitExp.failure({
+          metadata: {
+            error: {
+              message: err.message,
+              name: err.name
+            }
+          }
+        });
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleFormDismiss", function (data) {

package/dist/cjs/components/ShareForm.js

@@ -55,7 +55,7 @@ var _i18n = require("../i18n");
 
 var _types = require("../types");
 
-var _analytics = require("./analytics");
+var _analytics = require("./analytics/analytics");
 
 var _CommentField = require("./CommentField");
 

package/dist/cjs/components/SplitButton.js

@@ -35,7 +35,7 @@ var _tokens = require("@atlaskit/tokens");
 
 var _i18n = require("../i18n");
 
-var _analytics = require("./analytics");
+var _analytics = require("./analytics/analytics");
 
 var _IntegrationButton = _interopRequireDefault(require("./IntegrationButton"));
 

package/dist/cjs/components/{analytics.js → analytics/analytics.js}

@@ -11,7 +11,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _smartUserPicker = require("@atlaskit/smart-user-picker");
 
-var _version = require("../version.json");
+var _version = require("../../version.json");
 
 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; }
 

package/dist/cjs/components/analytics/ufoExperiences.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shareSubmitExp = exports.renderShareDialogExp = void 0;
+
+var _ufo = require("@atlaskit/ufo");
+
+var renderShareDialogExp = new _ufo.UFOExperience('render-share-dialog', {
+  type: _ufo.ExperienceTypes.Experience,
+  performanceType: _ufo.ExperiencePerformanceTypes.InlineResult,
+  platform: {
+    component: 'people'
+  }
+});
+exports.renderShareDialogExp = renderShareDialogExp;
+var shareSubmitExp = new _ufo.UFOExperience('share-submit-action', {
+  type: _ufo.ExperienceTypes.Experience,
+  performanceType: _ufo.ExperiencePerformanceTypes.InlineResult,
+  platform: {
+    component: 'people'
+  }
+});
+exports.shareSubmitExp = shareSubmitExp;

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/share",
-	"version": "3.1.5"
+	"version": "3.2.0"
 }

package/dist/es2019/components/ErrorBoundary.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { CHANNEL_ID, errorEncountered } from './analytics';
+import { CHANNEL_ID, errorEncountered } from './analytics/analytics';
 
 // ErrorBoundary does not support in functional component
 // eslint-disable-next-line @repo/internal/react/no-class-components

package/dist/es2019/components/LazyShareForm/LazyShareForm.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
-import { INTEGRATION_MODAL_SOURCE } from '../analytics';
+import { INTEGRATION_MODAL_SOURCE } from '../analytics/analytics';
 import { IntegrationForm } from '../IntegrationForm';
 import { ShareForm } from '../ShareForm';
 import { ShareFormWrapper } from '../ShareFormWrapper';

package/dist/es2019/components/ShareDialogContainer.js

@@ -8,7 +8,8 @@ import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { AtlassianUrlShortenerClient } from '../clients/AtlassianUrlShortenerClient';
 import { ShareServiceClient } from '../clients/ShareServiceClient';
 import { messages } from '../i18n';
-import { CHANNEL_ID, copyLinkButtonClicked, errorEncountered, shortUrlGenerated, shortUrlRequested } from './analytics';
+import { CHANNEL_ID, copyLinkButtonClicked, errorEncountered, shortUrlGenerated, shortUrlRequested } from './analytics/analytics';
+import { renderShareDialogExp } from './analytics/ufoExperiences';
 import ErrorBoundary from './ErrorBoundary';
 import MessagesIntlProvider from './MessagesIntlProvider';
 import { ShareDialogWithTrigger } from './ShareDialogWithTrigger';
@@ -54,6 +55,7 @@ export class ShareDialogContainerInternal extends React.Component {
         isFetchingConfig: true
       }, async () => {
         try {
+          renderShareDialogExp.start();
           const config = await this.shareClient.getConfig(this.props.cloudId);
 
           if (this._isMounted) {
@@ -62,6 +64,8 @@ export class ShareDialogContainerInternal extends React.Component {
               isFetchingConfig: false
             });
           }
+
+          renderShareDialogExp.success();
         } catch (error) {
           if (this._isMounted) {
             this.setState({
@@ -69,6 +73,21 @@ export class ShareDialogContainerInternal extends React.Component {
               isFetchingConfig: false
             });
           }
+
+          let { ...errObj
+          } = error;
+
+          if (error instanceof Error) {
+            errObj = { ...errObj,
+              className: error.constructor.name
+            };
+          }
+
+          renderShareDialogExp.failure({
+            metadata: {
+              error: errObj
+            }
+          });
         }
       });
     });

package/dist/es2019/components/ShareDialogWithTrigger.js

@@ -12,8 +12,9 @@ import Aktooltip from '@atlaskit/tooltip';
 import { messages } from '../i18n';
 import { OBJECT_SHARED } from '../types';
 import { cancelShare, CHANNEL_ID, copyLinkButtonClicked, formShareSubmitted, screenEvent, shareSplitButtonEvent, shareTabClicked, shareTriggerButtonClicked // type TabSubjectIdType,
-} from './analytics'; // eslint-disable-next-line no-duplicate-imports
+} from './analytics/analytics'; // eslint-disable-next-line no-duplicate-imports
 
+import { renderShareDialogExp, shareSubmitExp } from './analytics/ufoExperiences';
 import LazyShareFormLazy from './LazyShareForm/lazy';
 import ShareButton from './ShareButton';
 import SplitButton from './SplitButton';
@@ -153,6 +154,10 @@ export class ShareDialogWithTriggerInternal extends React.PureComponent {
 
 
             if (shouldCloseOnEscapePress) {
+              // This experience should be aborted in a scenario when a user closes the dialog before the shareClient.getConfig() call is finished
+              // It is a race condition between the `SUCCEEDED` case and the `ABORTED` case of this experience
+              // UFO experiences can only have one FINAL state so it doesn't matter if we call .abort() after the experience has succeeded and vice versa
+              renderShareDialogExp.abort();
               this.createAndFireEvent(cancelShare(this.start));
               this.closeAndResetDialog();
             }
@@ -208,8 +213,12 @@ export class ShareDialogWithTriggerInternal extends React.PureComponent {
     _defineProperty(this, "handleCloseDialog", () => {
       if (this.props.onDialogClose) {
         this.props.onDialogClose();
-      }
+      } // This experience should be aborted in a scenario when a user closes the dialog before the shareClient.getConfig() call is finished
+      // It is a race condition between the `SUCCEEDED` case and the `ABORTED` case of this experience
+      // UFO experiences can only have one FINAL state so it doesn't matter if we call .abort() after the experience has succeeded and vice versa
+
 
+      renderShareDialogExp.abort();
       this.setState({
         isDialogOpen: false,
         showIntegrationForm: false,
@@ -231,6 +240,7 @@ export class ShareDialogWithTriggerInternal extends React.PureComponent {
         return;
       }
 
+      shareSubmitExp.start();
       this.setState({
         isSharing: true
       });
@@ -241,6 +251,7 @@ export class ShareDialogWithTriggerInternal extends React.PureComponent {
           isSharing: false
         });
         showFlags(this.getFlags());
+        shareSubmitExp.success();
       }).catch(err => {
         this.setState({
           isSharing: false,
@@ -248,6 +259,14 @@ export class ShareDialogWithTriggerInternal extends React.PureComponent {
             message: err.message
           }
         });
+        shareSubmitExp.failure({
+          metadata: {
+            error: {
+              message: err.message,
+              name: err.name
+            }
+          }
+        });
       });
     });
 

package/dist/es2019/components/ShareForm.js

@@ -14,7 +14,7 @@ import { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
 import { messages } from '../i18n';
 import { TabType } from '../types';
-import { ANALYTICS_SOURCE, INTEGRATION_MODAL_SOURCE } from './analytics';
+import { ANALYTICS_SOURCE, INTEGRATION_MODAL_SOURCE } from './analytics/analytics';
 import { CommentField } from './CommentField';
 import CopyLinkButton from './CopyLinkButton';
 import { IntegrationForm } from './IntegrationForm';

package/dist/es2019/components/SplitButton.js

@@ -9,7 +9,7 @@ import { N800 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { token } from '@atlaskit/tokens';
 import { messages } from '../i18n';
-import { shareIntegrationButtonEvent } from './analytics';
+import { shareIntegrationButtonEvent } from './analytics/analytics';
 import IntegrationButton from './IntegrationButton';
 const SplitButtonWrapper = styled.div`
   display: flex;

package/dist/es2019/components/{analytics.js → analytics/analytics.js}

@@ -1,5 +1,5 @@
 import { isEmail, isTeam, isUser } from '@atlaskit/smart-user-picker';
-import { name as packageName, version as packageVersion } from '../version.json';
+import { name as packageName, version as packageVersion } from '../../version.json';
 
 const buildAttributes = (attributes = {}) => ({
   packageName,

package/dist/es2019/components/analytics/ufoExperiences.js

@@ -0,0 +1,15 @@
+import { ExperiencePerformanceTypes, ExperienceTypes, UFOExperience } from '@atlaskit/ufo';
+export const renderShareDialogExp = new UFOExperience('render-share-dialog', {
+  type: ExperienceTypes.Experience,
+  performanceType: ExperiencePerformanceTypes.InlineResult,
+  platform: {
+    component: 'people'
+  }
+});
+export const shareSubmitExp = new UFOExperience('share-submit-action', {
+  type: ExperienceTypes.Experience,
+  performanceType: ExperiencePerformanceTypes.InlineResult,
+  platform: {
+    component: 'people'
+  }
+});

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/share",
-	"version": "3.1.5"
+	"version": "3.2.0"
 }

package/dist/esm/components/ErrorBoundary.js

@@ -12,7 +12,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import React from 'react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { CHANNEL_ID, errorEncountered } from './analytics';
+import { CHANNEL_ID, errorEncountered } from './analytics/analytics';
 
 // ErrorBoundary does not support in functional component
 // eslint-disable-next-line @repo/internal/react/no-class-components

package/dist/esm/components/LazyShareForm/LazyShareForm.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
-import { INTEGRATION_MODAL_SOURCE } from '../analytics';
+import { INTEGRATION_MODAL_SOURCE } from '../analytics/analytics';
 import { IntegrationForm } from '../IntegrationForm';
 import { ShareForm } from '../ShareForm';
 import { ShareFormWrapper } from '../ShareFormWrapper';

package/dist/esm/components/ShareDialogContainer.js

@@ -1,4 +1,5 @@
 import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _extends from "@babel/runtime/helpers/extends";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
@@ -25,7 +26,8 @@ import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { AtlassianUrlShortenerClient } from '../clients/AtlassianUrlShortenerClient';
 import { ShareServiceClient } from '../clients/ShareServiceClient';
 import { messages } from '../i18n';
-import { CHANNEL_ID, copyLinkButtonClicked, errorEncountered, shortUrlGenerated, shortUrlRequested } from './analytics';
+import { CHANNEL_ID, copyLinkButtonClicked, errorEncountered, shortUrlGenerated, shortUrlRequested } from './analytics/analytics';
+import { renderShareDialogExp } from './analytics/ufoExperiences';
 import ErrorBoundary from './ErrorBoundary';
 import MessagesIntlProvider from './MessagesIntlProvider';
 import { ShareDialogWithTrigger } from './ShareDialogWithTrigger';
@@ -78,16 +80,17 @@ export var ShareDialogContainerInternal = /*#__PURE__*/function (_React$Componen
       _this.setState({
         isFetchingConfig: true
       }, /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-        var config;
+        var config, errObj;
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
                 _context.prev = 0;
-                _context.next = 3;
+                renderShareDialogExp.start();
+                _context.next = 4;
                 return _this.shareClient.getConfig(_this.props.cloudId);
 
-              case 3:
+              case 4:
                 config = _context.sent;
 
                 if (_this._isMounted) {
@@ -97,11 +100,12 @@ export var ShareDialogContainerInternal = /*#__PURE__*/function (_React$Componen
                   });
                 }
 
-                _context.next = 10;
+                renderShareDialogExp.success();
+                _context.next = 15;
                 break;
 
-              case 7:
-                _context.prev = 7;
+              case 9:
+                _context.prev = 9;
                 _context.t0 = _context["catch"](0);
 
                 if (_this._isMounted) {
@@ -111,12 +115,26 @@ export var ShareDialogContainerInternal = /*#__PURE__*/function (_React$Componen
                   });
                 }
 
-              case 10:
+                errObj = _extends({}, _context.t0);
+
+                if (_context.t0 instanceof Error) {
+                  errObj = _objectSpread(_objectSpread({}, errObj), {}, {
+                    className: _context.t0.constructor.name
+                  });
+                }
+
+                renderShareDialogExp.failure({
+                  metadata: {
+                    error: errObj
+                  }
+                });
+
+              case 15:
               case "end":
                 return _context.stop();
             }
           }
-        }, _callee, null, [[0, 7]]);
+        }, _callee, null, [[0, 9]]);
       })));
     });
 

package/dist/esm/components/ShareDialogWithTrigger.js

@@ -30,8 +30,9 @@ import Aktooltip from '@atlaskit/tooltip';
 import { messages } from '../i18n';
 import { OBJECT_SHARED } from '../types';
 import { cancelShare, CHANNEL_ID, copyLinkButtonClicked, formShareSubmitted, screenEvent, shareSplitButtonEvent, shareTabClicked, shareTriggerButtonClicked // type TabSubjectIdType,
-} from './analytics'; // eslint-disable-next-line no-duplicate-imports
+} from './analytics/analytics'; // eslint-disable-next-line no-duplicate-imports
 
+import { renderShareDialogExp, shareSubmitExp } from './analytics/ufoExperiences';
 import LazyShareFormLazy from './LazyShareForm/lazy';
 import ShareButton from './ShareButton';
 import SplitButton from './SplitButton';
@@ -172,6 +173,11 @@ export var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureCo
 
 
             if (shouldCloseOnEscapePress) {
+              // This experience should be aborted in a scenario when a user closes the dialog before the shareClient.getConfig() call is finished
+              // It is a race condition between the `SUCCEEDED` case and the `ABORTED` case of this experience
+              // UFO experiences can only have one FINAL state so it doesn't matter if we call .abort() after the experience has succeeded and vice versa
+              renderShareDialogExp.abort();
+
               _this.createAndFireEvent(cancelShare(_this.start));
 
               _this.closeAndResetDialog();
@@ -228,7 +234,12 @@ export var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureCo
     _defineProperty(_assertThisInitialized(_this), "handleCloseDialog", function () {
       if (_this.props.onDialogClose) {
         _this.props.onDialogClose();
-      }
+      } // This experience should be aborted in a scenario when a user closes the dialog before the shareClient.getConfig() call is finished
+      // It is a race condition between the `SUCCEEDED` case and the `ABORTED` case of this experience
+      // UFO experiences can only have one FINAL state so it doesn't matter if we call .abort() after the experience has succeeded and vice versa
+
+
+      renderShareDialogExp.abort();
 
       _this.setState({
         isDialogOpen: false,
@@ -250,6 +261,8 @@ export var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureCo
         return;
       }
 
+      shareSubmitExp.start();
+
       _this.setState({
         isSharing: true
       });
@@ -264,6 +277,7 @@ export var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureCo
         });
 
         showFlags(_this.getFlags());
+        shareSubmitExp.success();
       }).catch(function (err) {
         _this.setState({
           isSharing: false,
@@ -271,6 +285,15 @@ export var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureCo
             message: err.message
           }
         });
+
+        shareSubmitExp.failure({
+          metadata: {
+            error: {
+              message: err.message,
+              name: err.name
+            }
+          }
+        });
       });
     });
 

package/dist/esm/components/ShareForm.js

@@ -32,7 +32,7 @@ import { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
 import { messages } from '../i18n';
 import { TabType } from '../types';
-import { ANALYTICS_SOURCE, INTEGRATION_MODAL_SOURCE } from './analytics';
+import { ANALYTICS_SOURCE, INTEGRATION_MODAL_SOURCE } from './analytics/analytics';
 import { CommentField } from './CommentField';
 import CopyLinkButton from './CopyLinkButton';
 import { IntegrationForm } from './IntegrationForm';

package/dist/esm/components/SplitButton.js

@@ -15,7 +15,7 @@ import { N800 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { token } from '@atlaskit/tokens';
 import { messages } from '../i18n';
-import { shareIntegrationButtonEvent } from './analytics';
+import { shareIntegrationButtonEvent } from './analytics/analytics';
 import IntegrationButton from './IntegrationButton';
 var SplitButtonWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  button {\n    border-radius: ", "px 0 0 ", "px;\n  }\n  button:hover {\n    border-radius: ", "px 0 0 ", "px;\n  }\n"])), borderRadius(), borderRadius(), borderRadius(), borderRadius());
 var DropdownMenuWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-left: 1px;\n  button {\n    border-radius: 0 ", "px ", "px 0;\n  }\n  button:hover {\n    border-radius: 0 ", "px ", "px 0;\n  }\n"])), borderRadius(), borderRadius(), borderRadius(), borderRadius());

package/dist/esm/components/{analytics.js → analytics/analytics.js}

@@ -5,7 +5,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import { isEmail, isTeam, isUser } from '@atlaskit/smart-user-picker';
-import { name as packageName, version as packageVersion } from '../version.json';
+import { name as packageName, version as packageVersion } from '../../version.json';
 
 var buildAttributes = function buildAttributes() {
   var attributes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

package/dist/esm/components/analytics/ufoExperiences.js

@@ -0,0 +1,15 @@
+import { ExperiencePerformanceTypes, ExperienceTypes, UFOExperience } from '@atlaskit/ufo';
+export var renderShareDialogExp = new UFOExperience('render-share-dialog', {
+  type: ExperienceTypes.Experience,
+  performanceType: ExperiencePerformanceTypes.InlineResult,
+  platform: {
+    component: 'people'
+  }
+});
+export var shareSubmitExp = new UFOExperience('share-submit-action', {
+  type: ExperienceTypes.Experience,
+  performanceType: ExperiencePerformanceTypes.InlineResult,
+  platform: {
+    component: 'people'
+  }
+});

package/dist/esm/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/share",
-	"version": "3.1.5"
+	"version": "3.2.0"
 }

package/dist/types/components/CopyLinkButton.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { WrappedComponentProps } from 'react-intl-next';
 import { TriggerProps } from '@atlaskit/popup';
 export declare const AUTO_DISMISS_MS: number;
-export declare const MessageContainer: import("styled-components").StyledComponentClass<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const MessageContainer: import("styled-components").StyledComponentClass<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, any, React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>>;
 declare type InputProps = {
     text: string;
 };

package/dist/types/components/ErrorBoundary.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
-declare const _default: React.ForwardRefExoticComponent<Pick<WithAnalyticsEventsProps, never> & React.RefAttributes<any>>;
+declare const _default: React.ForwardRefExoticComponent<Omit<WithAnalyticsEventsProps, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;
 export default _default;

package/dist/types/components/IntegrationForm.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IntegrationContentProps } from '../types';
-export declare const FormWrapper: import("styled-components").StyledComponentClass<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const FormWrapper: import("styled-components").StyledComponentClass<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, any, React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>>;
 export declare type IntegrationFormProps = {
     Content: React.ComponentType<IntegrationContentProps> | null;
     onIntegrationClose?: () => void;

package/dist/types/components/LazyShareForm/styled.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-export declare const BottomMessageWrapper: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
-export declare const CustomFooterWrapper: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
-export declare const SpinnerWrapper: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const BottomMessageWrapper: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+export declare const CustomFooterWrapper: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+export declare const SpinnerWrapper: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;

package/dist/types/components/ShareDialogContainer.d.ts

@@ -52,7 +52,7 @@ export declare class ShareDialogContainerInternal extends React.Component<WithAn
     getFormShareLink: () => string;
     render(): JSX.Element;
 }
-export declare const ShareDialogContainer: React.ForwardRefExoticComponent<Pick<Pick<WithAnalyticsEventsProps & ShareDialogContainerProps, "onTriggerButtonClick" | "isAutoOpenDialog" | "shouldCloseOnEscapePress" | "dialogPlacement" | "loadUserOptions" | "onDialogOpen" | "onDialogClose" | "onUserSelectionChange" | "renderCustomTriggerButton" | "shareContentType" | "shareFormTitle" | "shareFormHelperMessage" | "showFlags" | "enableSmartUserPicker" | "loggedInAccountId" | "triggerButtonAppearance" | "triggerButtonIcon" | "triggerButtonStyle" | "triggerButtonTooltipPosition" | "triggerButtonTooltipText" | "cloudId" | "bottomMessage" | "product" | "customFooter" | "isCopyDisabled" | "isPublicLink" | "integrationMode" | "shareFieldsFooter" | "shareIntegrations" | "shareAri" | "tabIndex" | "copyTooltipText" | "dialogZIndex" | "shareClient" | "urlShortenerClient" | "shortLinkData" | "formatCopyLink" | "originTracingFactory" | "productId" | "shareLink" | "shareTitle" | "useUrlShortener" | "shareeAction">, "onTriggerButtonClick" | "isAutoOpenDialog" | "shouldCloseOnEscapePress" | "dialogPlacement" | "loadUserOptions" | "onDialogOpen" | "onDialogClose" | "onUserSelectionChange" | "renderCustomTriggerButton" | "shareContentType" | "shareFormTitle" | "shareFormHelperMessage" | "showFlags" | "loggedInAccountId" | "triggerButtonAppearance" | "triggerButtonIcon" | "triggerButtonStyle" | "triggerButtonTooltipPosition" | "triggerButtonTooltipText" | "cloudId" | "bottomMessage" | "customFooter" | "isCopyDisabled" | "isPublicLink" | "integrationMode" | "shareFieldsFooter" | "shareIntegrations" | "shareAri" | "tabIndex" | "copyTooltipText" | "dialogZIndex" | "shareClient" | "urlShortenerClient" | "shortLinkData" | "formatCopyLink" | "originTracingFactory" | "productId" | "shareLink" | "shareTitle" | "useUrlShortener"> & Partial<Pick<Pick<WithAnalyticsEventsProps & ShareDialogContainerProps, "onTriggerButtonClick" | "isAutoOpenDialog" | "shouldCloseOnEscapePress" | "dialogPlacement" | "loadUserOptions" | "onDialogOpen" | "onDialogClose" | "onUserSelectionChange" | "renderCustomTriggerButton" | "shareContentType" | "shareFormTitle" | "shareFormHelperMessage" | "showFlags" | "enableSmartUserPicker" | "loggedInAccountId" | "triggerButtonAppearance" | "triggerButtonIcon" | "triggerButtonStyle" | "triggerButtonTooltipPosition" | "triggerButtonTooltipText" | "cloudId" | "bottomMessage" | "product" | "customFooter" | "isCopyDisabled" | "isPublicLink" | "integrationMode" | "shareFieldsFooter" | "shareIntegrations" | "shareAri" | "tabIndex" | "copyTooltipText" | "dialogZIndex" | "shareClient" | "urlShortenerClient" | "shortLinkData" | "formatCopyLink" | "originTracingFactory" | "productId" | "shareLink" | "shareTitle" | "useUrlShortener" | "shareeAction">, "enableSmartUserPicker" | "product" | "shareeAction">> & Partial<Pick<{
+export declare const ShareDialogContainer: React.ForwardRefExoticComponent<Pick<Omit<WithAnalyticsEventsProps & ShareDialogContainerProps, keyof WithAnalyticsEventsProps>, "onTriggerButtonClick" | "isAutoOpenDialog" | "shouldCloseOnEscapePress" | "dialogPlacement" | "loadUserOptions" | "onDialogOpen" | "onDialogClose" | "onUserSelectionChange" | "renderCustomTriggerButton" | "shareContentType" | "shareFormTitle" | "shareFormHelperMessage" | "showFlags" | "loggedInAccountId" | "triggerButtonAppearance" | "triggerButtonIcon" | "triggerButtonStyle" | "triggerButtonTooltipPosition" | "triggerButtonTooltipText" | "cloudId" | "bottomMessage" | "customFooter" | "isCopyDisabled" | "isPublicLink" | "integrationMode" | "shareFieldsFooter" | "shareIntegrations" | "shareAri" | "tabIndex" | "copyTooltipText" | "dialogZIndex" | "shareClient" | "urlShortenerClient" | "shortLinkData" | "formatCopyLink" | "originTracingFactory" | "productId" | "shareLink" | "shareTitle" | "useUrlShortener"> & Partial<Pick<Omit<WithAnalyticsEventsProps & ShareDialogContainerProps, keyof WithAnalyticsEventsProps>, "enableSmartUserPicker" | "product" | "shareeAction">> & Partial<Pick<{
     enableSmartUserPicker: boolean;
     shareeAction: "view" | "edit";
     product: string;

package/dist/types/components/ShareForm.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import { WrappedComponentProps } from 'react-intl-next';
 import { FormChildrenArgs, ShareData, ShareFormProps, TabType } from '../types';
-export declare const FormWrapper: import("styled-components").StyledComponentClass<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
-export declare const FormFooter: import("styled-components").StyledComponentClass<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const FormWrapper: import("styled-components").StyledComponentClass<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, any, React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>>;
+export declare const FormFooter: import("styled-components").StyledComponentClass<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, any, React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>>;
 export declare type State = {
     selectedTab: TabType;
 };

package/dist/types/components/ShareFormWrapper/styled.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-export declare const InlineDialogFormWrapper: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const InlineDialogFormWrapper: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
 /**
  * Apply the same styling, as previous @atlaskit/inline-dialog had,
  * compared to the @atlaskit/popup we are now using.
  *
  * packages/design-system/inline-dialog/src/InlineDialog/styled.ts:20:3
  */
-export declare const InlineDialogContentWrapper: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const InlineDialogContentWrapper: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;

package/dist/types/components/ShareHeader.d.ts

@@ -2,5 +2,5 @@ import React from 'react';
 export declare type Props = {
     title?: React.ReactNode;
 };
-export declare const FormHeaderTitle: import("styled-components").StyledComponentClass<(React.ClassAttributes<HTMLHeadingElement> & React.HTMLAttributes<HTMLHeadingElement> & import("@atlaskit/theme").AtlaskitThemeProps) | (React.ClassAttributes<HTMLHeadingElement> & React.HTMLAttributes<HTMLHeadingElement> & import("@atlaskit/theme").CustomThemeProps) | (React.ClassAttributes<HTMLHeadingElement> & React.HTMLAttributes<HTMLHeadingElement> & import("@atlaskit/theme").NoThemeProps), any, (React.ClassAttributes<HTMLHeadingElement> & React.HTMLAttributes<HTMLHeadingElement> & import("@atlaskit/theme").AtlaskitThemeProps) | (React.ClassAttributes<HTMLHeadingElement> & React.HTMLAttributes<HTMLHeadingElement> & import("@atlaskit/theme").CustomThemeProps) | (React.ClassAttributes<HTMLHeadingElement> & React.HTMLAttributes<HTMLHeadingElement> & import("@atlaskit/theme").NoThemeProps)>;
+export declare const FormHeaderTitle: import("styled-components").StyledComponentClass<React.ClassAttributes<HTMLHeadingElement> & React.HTMLAttributes<HTMLHeadingElement> & (import("@atlaskit/theme").ThemeProps | undefined), any, React.ClassAttributes<HTMLHeadingElement> & React.HTMLAttributes<HTMLHeadingElement> & (import("@atlaskit/theme").ThemeProps | undefined)>;
 export declare const ShareHeader: React.StatelessComponent<Props>;

package/dist/types/components/{analytics.d.ts → analytics/analytics.d.ts}

@@ -1,18 +1,19 @@
-import { DialogContentState, OriginTracing } from '../types';
+import { AnalyticsEventPayload } from '@atlaskit/analytics-next';
+import { DialogContentState, OriginTracing } from '../../types';
 export declare const CHANNEL_ID = "fabric-elements";
 export declare const ANALYTICS_SOURCE = "shareModal";
 export declare const INTEGRATION_MODAL_SOURCE = "integrationShareDialog";
 export declare const screenEvent: ({ isPublicLink }: {
     isPublicLink?: boolean | undefined;
-}) => Record<string, any>;
-export declare const shareSplitButtonEvent: () => Record<string, any>;
-export declare const shareIntegrationButtonEvent: (type?: string) => Record<string, any>;
-export declare const errorEncountered: (actionSubjectId: string | undefined, attributes?: any) => Record<string, any>;
-export declare const shareTriggerButtonClicked: () => Record<string, any>;
+}) => AnalyticsEventPayload;
+export declare const shareSplitButtonEvent: () => AnalyticsEventPayload;
+export declare const shareIntegrationButtonEvent: (type?: string) => AnalyticsEventPayload;
+export declare const errorEncountered: (actionSubjectId: string | undefined, attributes?: any) => AnalyticsEventPayload;
+export declare const shareTriggerButtonClicked: () => AnalyticsEventPayload;
 export declare type TabSubjectIdType = 'shareTab' | 'shareToSlackTab';
-export declare const shareTabClicked: (subjectId: TabSubjectIdType) => Record<string, any>;
-export declare const cancelShare: (start: number) => Record<string, any>;
-export declare const shortUrlRequested: () => Record<string, any>;
-export declare const shortUrlGenerated: (start: number, tooSlow: boolean) => Record<string, any>;
-export declare const copyLinkButtonClicked: (start: number, shareContentType?: string | undefined, shareOrigin?: OriginTracing | undefined, isPublicLink?: boolean, ari?: string | undefined) => Record<string, any>;
-export declare const formShareSubmitted: (start: number, data: DialogContentState, shareContentType?: string | undefined, shareOrigin?: OriginTracing | undefined, isPublicLink?: boolean) => Record<string, any>;
+export declare const shareTabClicked: (subjectId: TabSubjectIdType) => AnalyticsEventPayload;
+export declare const cancelShare: (start: number) => AnalyticsEventPayload;
+export declare const shortUrlRequested: () => AnalyticsEventPayload;
+export declare const shortUrlGenerated: (start: number, tooSlow: boolean) => AnalyticsEventPayload;
+export declare const copyLinkButtonClicked: (start: number, shareContentType?: string | undefined, shareOrigin?: OriginTracing | undefined, isPublicLink?: boolean, ari?: string | undefined) => AnalyticsEventPayload;
+export declare const formShareSubmitted: (start: number, data: DialogContentState, shareContentType?: string | undefined, shareOrigin?: OriginTracing | undefined, isPublicLink?: boolean) => AnalyticsEventPayload;

package/dist/types/components/analytics/ufoExperiences.d.ts

@@ -0,0 +1,3 @@
+import { UFOExperience } from '@atlaskit/ufo';
+export declare const renderShareDialogExp: UFOExperience;
+export declare const shareSubmitExp: UFOExperience;

package/dist/types/components/utils.d.ts

@@ -14,7 +14,7 @@ export declare const generateSelectZIndex: (dialogZIndex?: number | undefined) =
  * Helper to get around TS error of property `current` not being
  * part of React's `ref` object.
  */
-export declare const getMenuPortalTargetCurrentHTML: (ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined) => HTMLDivElement | null;
+export declare const getMenuPortalTargetCurrentHTML: (ref?: import("react").Ref<HTMLDivElement> | undefined) => HTMLDivElement | null;
 export declare const optionDataToUsers: (optionDataArray: OptionData[]) => User[];
 export declare const allowEmails: (config?: ConfigResponse | undefined) => boolean;
 export declare const resolveShareFooter: (integrationMode: IntegrationMode | undefined, tabIndex: number, customFooter: React.ReactNode) => React.ReactNode | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/share",
-  "version": "3.1.5",
+  "version": "3.2.0",
   "description": "Fabric Share Element",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
-    "@atlaskit/button": "^16.2.0",
+    "@atlaskit/button": "^16.3.0",
     "@atlaskit/dropdown-menu": "^11.1.0",
     "@atlaskit/form": "^8.5.0",
     "@atlaskit/icon": "^21.10.0",
@@ -44,6 +44,7 @@
     "@atlaskit/theme": "^12.1.0",
     "@atlaskit/tokens": "^0.9.0",
     "@atlaskit/tooltip": "^17.5.0",
+    "@atlaskit/ufo": "^0.1.0",
     "@atlaskit/user-picker": "^9.0.0",
     "@atlaskit/util-service-support": "^6.1.0",
     "@babel/runtime": "^7.0.0",
@@ -69,9 +70,8 @@
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.15.1",
     "enzyme-react-intl": "^2.0.6",
-    "jest-fetch-mock": "^3.0.3",
     "react": "^16.8.0",
-    "typescript": "3.9.10"
+    "typescript": "4.2.4"
   },
   "keywords": [
     "ui",
@@ -79,10 +79,6 @@
     "fabric",
     "teams"
   ],
-  "af:exports": {
-    ".": "./src/index.ts",
-    "./clients": "./src/clients/index.ts"
-  },
   "techstack": {
     "@atlassian/frontend": {
       "package-boundaries": [
@@ -105,5 +101,9 @@
       "theming": "tokens"
     }
   },
+  "af:exports": {
+    ".": "./src/index.ts",
+    "./clients": "./src/clients/index.ts"
+  },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }