@atlaskit/link-picker 1.1.4 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/link-picker
 
+## 1.2.0
+
+### Minor Changes
+
+- [`21b0c90e0d4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/21b0c90e0d4) - Adds error boundary around the link picker to track errors and display an error message.
+
 ## 1.1.4
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "LinkPicker", {
   enumerable: true,
   get: function get() {
-    return _linkPicker.LinkPickerWithIntl;
+    return _ui.ComposedLinkPicker;
   }
 });
 
-var _linkPicker = require("./ui/link-picker");
+var _ui = require("./ui");

package/dist/cjs/ui/error-boundary-fallback/generic-error-svg/index.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = require("@emotion/react");
+
+var _styled = require("./styled");
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+
+/** @jsx jsx */
+var GenericErrorSVG = function GenericErrorSVG(props) {
+  var id = 'link-picker-ui-generic-error-svg';
+  return (0, _react.jsx)("svg", (0, _extends2.default)({
+    height: "90",
+    viewBox: "0 0 164 212",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    css: _styled.genericErrorStyles
+  }, props), (0, _react.jsx)("path", {
+    d: "m95.43 74.16 66.44 115.08c5.84 10.12-1.46 22.76-13.14 22.76H15.85c-11.68 0-18.98-12.65-13.14-22.76L69.15 74.16c5.84-10.12 20.44-10.12 26.28 0Zm-7.56 83.55 2.88-44.35c.34-5.29-3.86-9.78-9.16-9.78-5.31 0-9.51 4.48-9.16 9.78l2.88 44.35a6.3 6.3 0 0 0 6.28 5.89c3.31 0 6.06-2.58 6.28-5.89Zm-15.84 23.54c0 5.66 4.76 10.1 10.39 9.58 4.85-.45 8.73-4.5 8.83-9.37.11-5.45-4.31-9.94-9.73-9.94-5.23-.01-9.49 4.37-9.49 9.73Z",
+    fill: "url(#".concat(id, ")")
+  }), (0, _react.jsx)("path", {
+    opacity: ".6",
+    d: "M93.35 27.17 85.94.45c-.17-.62-1.07-.58-1.19.05l-4.66 25.1-5.8-1.08a.612.612 0 0 0-.7.76L81 52c.17.62 1.07.58 1.19-.05l4.66-25.1 5.8 1.08c.45.08.82-.33.7-.76ZM66.77 41.81 55.9 33.26c-.22-.18-.53.07-.41.33l5.53 11.43-2.66 1.29c-.18.09-.2.33-.05.45l10.87 8.55c.22.18.53-.07.41-.33l-5.53-11.43 2.66-1.29c.17-.08.2-.33.05-.45Z",
+    fill: "#C1C7D0"
+  }), (0, _react.jsx)("path", {
+    opacity: ".6",
+    d: "M102.78 56.75a.993.993 0 0 1-.92-1.38c-.24-.77-2.29-2.85-3.54-4.11-2.97-3.01-4.93-5-3.84-6.49 1.09-1.48 3.58-.22 7.35 1.7 1.32.67 3.35 1.7 4.45 2.03-.64-.95-2.24-2.58-3.28-3.63-2.97-3.01-4.93-5-3.84-6.49 1.08-1.48 3.58-.22 7.34 1.7 1.32.67 3.34 1.7 4.45 2.03-.64-.95-2.24-2.57-3.28-3.62-2.97-3.01-4.93-5-3.84-6.49 1.08-1.48 3.57-.22 7.34 1.7 1.58.8 4.18 2.13 4.98 2.13a1.005 1.005 0 0 1 1.46 1.36c-1.09 1.48-3.57.22-7.34-1.7-1.32-.67-3.34-1.7-4.44-2.03.64.95 2.24 2.57 3.28 3.62 2.97 3.01 4.93 5 3.84 6.49-1.08 1.48-3.57.22-7.34-1.7-1.32-.67-3.35-1.7-4.45-2.03.64.95 2.24 2.57 3.28 3.63 2.97 3.01 4.93 5 3.84 6.49-1.09 1.48-3.58.22-7.35-1.7-1.32-.67-3.35-1.71-4.45-2.03.64.95 2.24 2.58 3.28 3.63 2.97 3.01 4.93 5 3.84 6.49-.21.26-.51.4-.82.4Zm5.56 14.32c-.35 0-.69-.19-.88-.52-1.04-1.88-2.22-4.02-.91-5.21 1.31-1.2 3.34.18 5.49 1.63.87.59 2.26 1.53 2.93 1.71-.12-.68-.93-2.15-1.45-3.07-1.26-2.27-2.45-4.41-1.14-5.61 1.31-1.2 3.34.18 5.49 1.63.96.65 2.54 1.72 3.1 1.74a1 1 0 0 1 1.27 1.54c-1.31 1.2-3.34-.17-5.49-1.63-.87-.59-2.26-1.53-2.93-1.71.12.68.93 2.15 1.45 3.07 1.26 2.27 2.45 4.41 1.14 5.61-1.31 1.2-3.34-.18-5.49-1.63-.87-.59-2.26-1.53-2.93-1.71.12.68.93 2.14 1.22 2.67.27.48.09 1.09-.39 1.36-.15.09-.32.13-.48.13Zm-54.32-2.89c-.22 0-.44-.04-.67-.14-1.64-.69-1.24-3.11-.81-5.67.17-1.04.45-2.7.33-3.38-.57.39-1.56 1.75-2.18 2.6-1.53 2.09-2.99 4.07-4.62 3.38a.991.991 0 0 1-.53-1.31c.2-.48.73-.72 1.21-.57.52-.21 1.65-1.75 2.34-2.68 1.53-2.09 2.98-4.08 4.62-3.38 1.64.69 1.24 3.11.81 5.67-.17 1.04-.45 2.7-.33 3.38.57-.39 1.56-1.75 2.18-2.6 1.53-2.09 2.98-4.08 4.62-3.38 1.63.69 1.24 3.09.89 5.21-.09.54-.6.91-1.15.83-.54-.09-.92-.6-.83-1.15.1-.59.37-2.24.26-2.92-.57.39-1.56 1.75-2.18 2.6-1.33 1.79-2.59 3.51-3.96 3.51Z",
+    fill: "#B3BAC5"
+  }), (0, _react.jsx)("defs", null, (0, _react.jsx)("linearGradient", {
+    id: id,
+    x1: "26.169",
+    y1: "228.621",
+    x2: "138.408",
+    y2: "116.382",
+    gradientUnits: "userSpaceOnUse"
+  }, (0, _react.jsx)("stop", {
+    stopColor: "#C1C7D0"
+  }), (0, _react.jsx)("stop", {
+    offset: ".297",
+    stopColor: "#C6CBD4",
+    stopOpacity: ".881"
+  }), (0, _react.jsx)("stop", {
+    offset: ".63",
+    stopColor: "#D3D7DE",
+    stopOpacity: ".748"
+  }), (0, _react.jsx)("stop", {
+    offset: ".98",
+    stopColor: "#E9EBEF",
+    stopOpacity: ".608"
+  }), (0, _react.jsx)("stop", {
+    offset: "1",
+    stopColor: "#EBECF0",
+    stopOpacity: ".6"
+  }))));
+};
+
+var _default = GenericErrorSVG;
+exports.default = _default;

package/dist/cjs/ui/error-boundary-fallback/generic-error-svg/styled.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.genericErrorStyles = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _react = require("@emotion/react");
+
+var _templateObject;
+
+var HEIGHT = 90;
+var genericErrorStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: ", "px;\n  margin: 0 auto ", "px;\n  display: block;\n"])), HEIGHT, (0, _constants.gridSize)() * 3);
+exports.genericErrorStyles = genericErrorStyles;

package/dist/cjs/ui/error-boundary-fallback/index.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ErrorBoundaryFallback = void 0;
+
+var _react = require("@emotion/react");
+
+var _emptyState = _interopRequireDefault(require("@atlaskit/empty-state"));
+
+var _reactIntlNext = require("react-intl-next");
+
+var _genericErrorSvg = _interopRequireDefault(require("./generic-error-svg"));
+
+var _styled = require("../link-picker/styled");
+
+/** @jsx jsx */
+var messages = (0, _reactIntlNext.defineMessages)({
+  heading: {
+    defaultMessage: 'Something went wrong!',
+    description: 'Heading displayed when an unhandled error occurs.',
+    id: 'fabric.linkPicker.unhandledError.heading'
+  },
+  description: {
+    defaultMessage: 'Try reloading the page.',
+    description: 'Body message shown underneath the heading when an unhandled error occurs.',
+    id: 'fabric.linkPicker.unhandledError.description'
+  }
+});
+
+var ErrorBoundaryFallback = function ErrorBoundaryFallback() {
+  var intl = (0, _reactIntlNext.useIntl)();
+  var header = intl.formatMessage(messages.heading);
+  var description = intl.formatMessage(messages.description);
+  return (0, _react.jsx)("div", {
+    css: _styled.rootContainerStyles,
+    "data-testid": "link-picker-root-error-boundary-ui"
+  }, (0, _react.jsx)(_emptyState.default, {
+    header: header,
+    renderImage: function renderImage() {
+      return (0, _react.jsx)(_genericErrorSvg.default, null);
+    },
+    description: description
+  }));
+};
+
+exports.ErrorBoundaryFallback = ErrorBoundaryFallback;

package/dist/cjs/ui/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ComposedLinkPicker = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _analyticsNext = require("@atlaskit/analytics-next");
+
+var _version = require("../version.json");
+
+var _errorBoundaryFallback = require("./error-boundary-fallback");
+
+var _linkPicker = require("./link-picker");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var COMPONENT_NAME = 'LinkPicker';
+var ANALYTICS_CHANNEL = 'media';
+var PACKAGE_DATA = {
+  packageName: _version.name,
+  packageVersion: _version.version,
+  componentName: COMPONENT_NAME
+};
+var ComposedLinkPicker = /*#__PURE__*/(0, _react.memo)(function (props) {
+  return /*#__PURE__*/_react.default.createElement(_analyticsNext.AnalyticsErrorBoundary, {
+    channel: ANALYTICS_CHANNEL,
+    data: PACKAGE_DATA,
+    ErrorComponent: _errorBoundaryFallback.ErrorBoundaryFallback
+  }, /*#__PURE__*/_react.default.createElement(_linkPicker.LinkPickerWithIntl, props));
+});
+exports.ComposedLinkPicker = ComposedLinkPicker;

package/dist/cjs/ui/{link-picker.js → link-picker/index.js}

@@ -27,27 +27,27 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _react2 = require("@emotion/react");
 
 var _reactIntlNext = require("react-intl-next");
 
-var _messages = require("../messages");
+var _messages = require("./messages");
 
 var _textInput = _interopRequireDefault(require("./text-input"));
 
 var _linkSearchList = _interopRequireDefault(require("./link-search-list"));
 
-var _url = require("../url");
+var _url = require("./url");
 
 var _styled = require("./styled");
 
-var _browser = require("../browser");
+var _browser = require("./browser");
 
-var _transformTimeStamp = require("../transformTimeStamp");
+var _transformTimeStamp = require("./transformTimeStamp");
 
-var _announcer = _interopRequireDefault(require("./announcer"));
+var _announcer = _interopRequireDefault(require(".//announcer"));
 
 var _button = _interopRequireWildcard(require("@atlaskit/button"));
 
@@ -84,7 +84,6 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
 
     (0, _classCallCheck2.default)(this, LinkPicker);
     _this = _super.call(this, props);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "wrapperRef", /*#__PURE__*/_react.default.createRef());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "queryVersion", 0);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateInput", /*#__PURE__*/function () {
       var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(input) {
@@ -502,11 +501,7 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
       var noResults = activePlugin && !isLoading && !items.length && !(0, _url.isSafeUrl)(url);
       return (0, _react2.jsx)("div", {
         "data-testid": "link-picker",
-        className: "recent-list",
-        css: _styled.recentListStyles
-      }, (0, _react2.jsx)("div", {
-        css: _styled.containerStyles,
-        ref: this.wrapperRef
+        css: _styled.rootContainerStyles
       }, screenReaderText && (0, _react2.jsx)(_announcer.default, {
         ariaLive: "assertive",
         text: screenReaderText,
@@ -586,7 +581,7 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
         appearance: "primary",
         onClick: this.handleSubmit,
         testId: "link-picker-insert-button"
-      }, formatMessage(isEditing ? _messages.messages.saveButton : _messages.messages.insertButton))))));
+      }, formatMessage(isEditing ? _messages.messages.saveButton : _messages.messages.insertButton)))));
     }
   }]);
   return LinkPicker;

package/dist/cjs/ui/{list-item → link-picker/list-item}/index.js

@@ -11,7 +11,7 @@ var _react2 = require("@emotion/react");
 
 var _reactIntlNext = require("react-intl-next");
 
-var _transformTimeStamp = require("../../transformTimeStamp");
+var _transformTimeStamp = require("../transformTimeStamp");
 
 var _styled = require("./styled");
 

package/dist/cjs/ui/link-picker/styled.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.searchIconStyles = exports.rootContainerStyles = exports.listTitleStyles = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _tokens = require("@atlaskit/tokens");
+
+var _react = require("@emotion/react");
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _theme = require("@atlaskit/theme");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _templateObject, _templateObject2, _templateObject3;
+
+var LINK_PICKER_WIDTH_IN_PX = 342;
+var LINK_PICKER_MIN_HEIGHT_IN_PX = 234;
+var rootContainerStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", "px;\n  padding: ", "px;\n  box-sizing: border-box;\n  line-height: initial;\n  min-height: ", "px;\n"])), LINK_PICKER_WIDTH_IN_PX, (0, _constants.gridSize)() * 2, LINK_PICKER_MIN_HEIGHT_IN_PX);
+exports.rootContainerStyles = rootContainerStyles;
+var searchIconStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: ", "px;\n  color: ", ";\n  cursor: default;\n"])), (0, _constants.gridSize)() / 2, (0, _tokens.token)('color.icon', _colors.N500));
+exports.searchIconStyles = searchIconStyles;
+var listTitleStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  text-transform: uppercase;\n  margin-bottom: ", "px;\n"])), _theme.typography.h100(), (0, _constants.gridSize)() / 2);
+exports.listTitleStyles = listTitleStyles;

package/dist/cjs/ui/{text-input → link-picker/text-input}/index.js

@@ -23,7 +23,7 @@ var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
 
 var _selectClear = _interopRequireDefault(require("@atlaskit/icon/glyph/select-clear"));
 
-var _utils = require("../../utils");
+var _utils = require("../utils");
 
 var _styled = require("./styled");
 

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-picker",
-	"version": "1.1.4",
+	"version": "1.2.0",
 	"sideEffects": false
 }

package/dist/es2019/index.js

@@ -1 +1 @@
-export { LinkPickerWithIntl as LinkPicker } from './ui/link-picker';
+export { ComposedLinkPicker as LinkPicker } from './ui';

package/dist/es2019/ui/error-boundary-fallback/generic-error-svg/index.js

@@ -0,0 +1,56 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { genericErrorStyles } from './styled';
+
+const GenericErrorSVG = props => {
+  const id = 'link-picker-ui-generic-error-svg';
+  return jsx("svg", _extends({
+    height: "90",
+    viewBox: "0 0 164 212",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    css: genericErrorStyles
+  }, props), jsx("path", {
+    d: "m95.43 74.16 66.44 115.08c5.84 10.12-1.46 22.76-13.14 22.76H15.85c-11.68 0-18.98-12.65-13.14-22.76L69.15 74.16c5.84-10.12 20.44-10.12 26.28 0Zm-7.56 83.55 2.88-44.35c.34-5.29-3.86-9.78-9.16-9.78-5.31 0-9.51 4.48-9.16 9.78l2.88 44.35a6.3 6.3 0 0 0 6.28 5.89c3.31 0 6.06-2.58 6.28-5.89Zm-15.84 23.54c0 5.66 4.76 10.1 10.39 9.58 4.85-.45 8.73-4.5 8.83-9.37.11-5.45-4.31-9.94-9.73-9.94-5.23-.01-9.49 4.37-9.49 9.73Z",
+    fill: `url(#${id})`
+  }), jsx("path", {
+    opacity: ".6",
+    d: "M93.35 27.17 85.94.45c-.17-.62-1.07-.58-1.19.05l-4.66 25.1-5.8-1.08a.612.612 0 0 0-.7.76L81 52c.17.62 1.07.58 1.19-.05l4.66-25.1 5.8 1.08c.45.08.82-.33.7-.76ZM66.77 41.81 55.9 33.26c-.22-.18-.53.07-.41.33l5.53 11.43-2.66 1.29c-.18.09-.2.33-.05.45l10.87 8.55c.22.18.53-.07.41-.33l-5.53-11.43 2.66-1.29c.17-.08.2-.33.05-.45Z",
+    fill: "#C1C7D0"
+  }), jsx("path", {
+    opacity: ".6",
+    d: "M102.78 56.75a.993.993 0 0 1-.92-1.38c-.24-.77-2.29-2.85-3.54-4.11-2.97-3.01-4.93-5-3.84-6.49 1.09-1.48 3.58-.22 7.35 1.7 1.32.67 3.35 1.7 4.45 2.03-.64-.95-2.24-2.58-3.28-3.63-2.97-3.01-4.93-5-3.84-6.49 1.08-1.48 3.58-.22 7.34 1.7 1.32.67 3.34 1.7 4.45 2.03-.64-.95-2.24-2.57-3.28-3.62-2.97-3.01-4.93-5-3.84-6.49 1.08-1.48 3.57-.22 7.34 1.7 1.58.8 4.18 2.13 4.98 2.13a1.005 1.005 0 0 1 1.46 1.36c-1.09 1.48-3.57.22-7.34-1.7-1.32-.67-3.34-1.7-4.44-2.03.64.95 2.24 2.57 3.28 3.62 2.97 3.01 4.93 5 3.84 6.49-1.08 1.48-3.57.22-7.34-1.7-1.32-.67-3.35-1.7-4.45-2.03.64.95 2.24 2.57 3.28 3.63 2.97 3.01 4.93 5 3.84 6.49-1.09 1.48-3.58.22-7.35-1.7-1.32-.67-3.35-1.71-4.45-2.03.64.95 2.24 2.58 3.28 3.63 2.97 3.01 4.93 5 3.84 6.49-.21.26-.51.4-.82.4Zm5.56 14.32c-.35 0-.69-.19-.88-.52-1.04-1.88-2.22-4.02-.91-5.21 1.31-1.2 3.34.18 5.49 1.63.87.59 2.26 1.53 2.93 1.71-.12-.68-.93-2.15-1.45-3.07-1.26-2.27-2.45-4.41-1.14-5.61 1.31-1.2 3.34.18 5.49 1.63.96.65 2.54 1.72 3.1 1.74a1 1 0 0 1 1.27 1.54c-1.31 1.2-3.34-.17-5.49-1.63-.87-.59-2.26-1.53-2.93-1.71.12.68.93 2.15 1.45 3.07 1.26 2.27 2.45 4.41 1.14 5.61-1.31 1.2-3.34-.18-5.49-1.63-.87-.59-2.26-1.53-2.93-1.71.12.68.93 2.14 1.22 2.67.27.48.09 1.09-.39 1.36-.15.09-.32.13-.48.13Zm-54.32-2.89c-.22 0-.44-.04-.67-.14-1.64-.69-1.24-3.11-.81-5.67.17-1.04.45-2.7.33-3.38-.57.39-1.56 1.75-2.18 2.6-1.53 2.09-2.99 4.07-4.62 3.38a.991.991 0 0 1-.53-1.31c.2-.48.73-.72 1.21-.57.52-.21 1.65-1.75 2.34-2.68 1.53-2.09 2.98-4.08 4.62-3.38 1.64.69 1.24 3.11.81 5.67-.17 1.04-.45 2.7-.33 3.38.57-.39 1.56-1.75 2.18-2.6 1.53-2.09 2.98-4.08 4.62-3.38 1.63.69 1.24 3.09.89 5.21-.09.54-.6.91-1.15.83-.54-.09-.92-.6-.83-1.15.1-.59.37-2.24.26-2.92-.57.39-1.56 1.75-2.18 2.6-1.33 1.79-2.59 3.51-3.96 3.51Z",
+    fill: "#B3BAC5"
+  }), jsx("defs", null, jsx("linearGradient", {
+    id: id,
+    x1: "26.169",
+    y1: "228.621",
+    x2: "138.408",
+    y2: "116.382",
+    gradientUnits: "userSpaceOnUse"
+  }, jsx("stop", {
+    stopColor: "#C1C7D0"
+  }), jsx("stop", {
+    offset: ".297",
+    stopColor: "#C6CBD4",
+    stopOpacity: ".881"
+  }), jsx("stop", {
+    offset: ".63",
+    stopColor: "#D3D7DE",
+    stopOpacity: ".748"
+  }), jsx("stop", {
+    offset: ".98",
+    stopColor: "#E9EBEF",
+    stopOpacity: ".608"
+  }), jsx("stop", {
+    offset: "1",
+    stopColor: "#EBECF0",
+    stopOpacity: ".6"
+  }))));
+};
+
+export default GenericErrorSVG;

package/dist/es2019/ui/error-boundary-fallback/generic-error-svg/styled.js

@@ -0,0 +1,8 @@
+import { gridSize as getGridSize } from '@atlaskit/theme/constants';
+import { css } from '@emotion/react';
+const HEIGHT = 90;
+export const genericErrorStyles = css`
+  height: ${HEIGHT}px;
+  margin: 0 auto ${getGridSize() * 3}px;
+  display: block;
+`;

package/dist/es2019/ui/error-boundary-fallback/index.js

@@ -0,0 +1,31 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import EmptyState from '@atlaskit/empty-state';
+import { defineMessages, useIntl } from 'react-intl-next';
+import GenericErrorSVG from './generic-error-svg';
+import { rootContainerStyles } from '../link-picker/styled';
+const messages = defineMessages({
+  heading: {
+    defaultMessage: 'Something went wrong!',
+    description: 'Heading displayed when an unhandled error occurs.',
+    id: 'fabric.linkPicker.unhandledError.heading'
+  },
+  description: {
+    defaultMessage: 'Try reloading the page.',
+    description: 'Body message shown underneath the heading when an unhandled error occurs.',
+    id: 'fabric.linkPicker.unhandledError.description'
+  }
+});
+export const ErrorBoundaryFallback = () => {
+  const intl = useIntl();
+  const header = intl.formatMessage(messages.heading);
+  const description = intl.formatMessage(messages.description);
+  return jsx("div", {
+    css: rootContainerStyles,
+    "data-testid": "link-picker-root-error-boundary-ui"
+  }, jsx(EmptyState, {
+    header: header,
+    renderImage: () => jsx(GenericErrorSVG, null),
+    description: description
+  }));
+};

package/dist/es2019/ui/index.js

@@ -0,0 +1,17 @@
+import React, { memo } from 'react';
+import { AnalyticsErrorBoundary } from '@atlaskit/analytics-next';
+import { name as packageName, version as packageVersion } from '../version.json';
+import { ErrorBoundaryFallback } from './error-boundary-fallback';
+import { LinkPickerWithIntl } from './link-picker';
+const COMPONENT_NAME = 'LinkPicker';
+const ANALYTICS_CHANNEL = 'media';
+const PACKAGE_DATA = {
+  packageName,
+  packageVersion,
+  componentName: COMPONENT_NAME
+};
+export const ComposedLinkPicker = /*#__PURE__*/memo(props => /*#__PURE__*/React.createElement(AnalyticsErrorBoundary, {
+  channel: ANALYTICS_CHANNEL,
+  data: PACKAGE_DATA,
+  ErrorComponent: ErrorBoundaryFallback
+}, /*#__PURE__*/React.createElement(LinkPickerWithIntl, props)));

package/dist/es2019/ui/{link-picker.js → link-picker/index.js}

@@ -1,17 +1,17 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 /** @jsx jsx */
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
-import { messages } from '../messages';
+import { messages } from './messages';
 import PanelTextInput from './text-input';
 import LinkSearchList from './link-search-list';
-import { normalizeUrl, isSafeUrl } from '../url';
-import { recentListStyles, containerStyles, searchIconStyles, listTitleStyles } from './styled';
-import { browser } from '../browser';
-import { transformTimeStamp } from '../transformTimeStamp';
-import Announcer from './announcer';
+import { normalizeUrl, isSafeUrl } from './url';
+import { rootContainerStyles, searchIconStyles, listTitleStyles } from './styled';
+import { browser } from './browser';
+import { transformTimeStamp } from './transformTimeStamp';
+import Announcer from './/announcer';
 import Button, { ButtonGroup } from '@atlaskit/button';
 import { FormFooter } from '@atlaskit/form';
 import EditorSearchIcon from '@atlaskit/icon/glyph/editor/search';
@@ -23,8 +23,6 @@ class LinkPicker extends PureComponent {
   constructor(props) {
     super(props);
 
-    _defineProperty(this, "wrapperRef", /*#__PURE__*/React.createRef());
-
     _defineProperty(this, "queryVersion", 0);
 
     _defineProperty(this, "updateInput", async input => {
@@ -392,11 +390,7 @@ class LinkPicker extends PureComponent {
     const noResults = activePlugin && !isLoading && !items.length && !isSafeUrl(url);
     return jsx("div", {
       "data-testid": "link-picker",
-      className: "recent-list",
-      css: recentListStyles
-    }, jsx("div", {
-      css: containerStyles,
-      ref: this.wrapperRef
+      css: rootContainerStyles
     }, screenReaderText && jsx(Announcer, {
       ariaLive: "assertive",
       text: screenReaderText,
@@ -476,7 +470,7 @@ class LinkPicker extends PureComponent {
       appearance: "primary",
       onClick: this.handleSubmit,
       testId: "link-picker-insert-button"
-    }, formatMessage(isEditing ? messages.saveButton : messages.insertButton))))));
+    }, formatMessage(isEditing ? messages.saveButton : messages.insertButton)))));
   }
 
 }

package/dist/es2019/ui/{list-item → link-picker/list-item}/index.js

@@ -2,7 +2,7 @@
 import { Fragment } from 'react';
 import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
-import { transformTimeStamp } from '../../transformTimeStamp';
+import { transformTimeStamp } from '../transformTimeStamp';
 import { itemNameStyles, itemIconStyles, listItemContextStyles, listItemNameStyles, composeListItemStyles, imgStyles } from './styled';
 
 const LinkSearchListItem = ({

package/dist/es2019/ui/{styled.js → link-picker/styled.js}

@@ -6,15 +6,13 @@ import { N500 } from '@atlaskit/theme/colors'; // AFP-2532 TODO: Fix automatic s
 import { typography } from '@atlaskit/theme';
 import { gridSize } from '@atlaskit/theme/constants';
 const LINK_PICKER_WIDTH_IN_PX = 342;
-export const recentListStyles = css`
+const LINK_PICKER_MIN_HEIGHT_IN_PX = 234;
+export const rootContainerStyles = css`
   width: ${LINK_PICKER_WIDTH_IN_PX}px;
-`;
-export const containerStyles = css`
   padding: ${gridSize() * 2}px;
-  width: 100%;
-  overflow: hidden;
-  line-height: initial;
   box-sizing: border-box;
+  line-height: initial;
+  min-height: ${LINK_PICKER_MIN_HEIGHT_IN_PX}px;
 `;
 export const searchIconStyles = css`
   margin-left: ${gridSize() / 2}px;

package/dist/es2019/ui/{text-input → link-picker/text-input}/index.js

@@ -7,7 +7,7 @@ import { ErrorMessage, Field } from '@atlaskit/form';
 import Tooltip from '@atlaskit/tooltip';
 import Textfield from '@atlaskit/textfield';
 import Selectclear from '@atlaskit/icon/glyph/select-clear';
-import { isRedoEvent, isUndoEvent } from '../../utils';
+import { isRedoEvent, isUndoEvent } from '../utils';
 import { clearTextButtonStyles, fieldStyles } from './styled';
 
 const PanelTextInput = props => {

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-picker",
-	"version": "1.1.4",
+	"version": "1.2.0",
 	"sideEffects": false
 }

package/dist/esm/index.js

@@ -1 +1 @@
-export { LinkPickerWithIntl as LinkPicker } from './ui/link-picker';
+export { ComposedLinkPicker as LinkPicker } from './ui';

package/dist/esm/ui/error-boundary-fallback/generic-error-svg/index.js

@@ -0,0 +1,56 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { genericErrorStyles } from './styled';
+
+var GenericErrorSVG = function GenericErrorSVG(props) {
+  var id = 'link-picker-ui-generic-error-svg';
+  return jsx("svg", _extends({
+    height: "90",
+    viewBox: "0 0 164 212",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    css: genericErrorStyles
+  }, props), jsx("path", {
+    d: "m95.43 74.16 66.44 115.08c5.84 10.12-1.46 22.76-13.14 22.76H15.85c-11.68 0-18.98-12.65-13.14-22.76L69.15 74.16c5.84-10.12 20.44-10.12 26.28 0Zm-7.56 83.55 2.88-44.35c.34-5.29-3.86-9.78-9.16-9.78-5.31 0-9.51 4.48-9.16 9.78l2.88 44.35a6.3 6.3 0 0 0 6.28 5.89c3.31 0 6.06-2.58 6.28-5.89Zm-15.84 23.54c0 5.66 4.76 10.1 10.39 9.58 4.85-.45 8.73-4.5 8.83-9.37.11-5.45-4.31-9.94-9.73-9.94-5.23-.01-9.49 4.37-9.49 9.73Z",
+    fill: "url(#".concat(id, ")")
+  }), jsx("path", {
+    opacity: ".6",
+    d: "M93.35 27.17 85.94.45c-.17-.62-1.07-.58-1.19.05l-4.66 25.1-5.8-1.08a.612.612 0 0 0-.7.76L81 52c.17.62 1.07.58 1.19-.05l4.66-25.1 5.8 1.08c.45.08.82-.33.7-.76ZM66.77 41.81 55.9 33.26c-.22-.18-.53.07-.41.33l5.53 11.43-2.66 1.29c-.18.09-.2.33-.05.45l10.87 8.55c.22.18.53-.07.41-.33l-5.53-11.43 2.66-1.29c.17-.08.2-.33.05-.45Z",
+    fill: "#C1C7D0"
+  }), jsx("path", {
+    opacity: ".6",
+    d: "M102.78 56.75a.993.993 0 0 1-.92-1.38c-.24-.77-2.29-2.85-3.54-4.11-2.97-3.01-4.93-5-3.84-6.49 1.09-1.48 3.58-.22 7.35 1.7 1.32.67 3.35 1.7 4.45 2.03-.64-.95-2.24-2.58-3.28-3.63-2.97-3.01-4.93-5-3.84-6.49 1.08-1.48 3.58-.22 7.34 1.7 1.32.67 3.34 1.7 4.45 2.03-.64-.95-2.24-2.57-3.28-3.62-2.97-3.01-4.93-5-3.84-6.49 1.08-1.48 3.57-.22 7.34 1.7 1.58.8 4.18 2.13 4.98 2.13a1.005 1.005 0 0 1 1.46 1.36c-1.09 1.48-3.57.22-7.34-1.7-1.32-.67-3.34-1.7-4.44-2.03.64.95 2.24 2.57 3.28 3.62 2.97 3.01 4.93 5 3.84 6.49-1.08 1.48-3.57.22-7.34-1.7-1.32-.67-3.35-1.7-4.45-2.03.64.95 2.24 2.57 3.28 3.63 2.97 3.01 4.93 5 3.84 6.49-1.09 1.48-3.58.22-7.35-1.7-1.32-.67-3.35-1.71-4.45-2.03.64.95 2.24 2.58 3.28 3.63 2.97 3.01 4.93 5 3.84 6.49-.21.26-.51.4-.82.4Zm5.56 14.32c-.35 0-.69-.19-.88-.52-1.04-1.88-2.22-4.02-.91-5.21 1.31-1.2 3.34.18 5.49 1.63.87.59 2.26 1.53 2.93 1.71-.12-.68-.93-2.15-1.45-3.07-1.26-2.27-2.45-4.41-1.14-5.61 1.31-1.2 3.34.18 5.49 1.63.96.65 2.54 1.72 3.1 1.74a1 1 0 0 1 1.27 1.54c-1.31 1.2-3.34-.17-5.49-1.63-.87-.59-2.26-1.53-2.93-1.71.12.68.93 2.15 1.45 3.07 1.26 2.27 2.45 4.41 1.14 5.61-1.31 1.2-3.34-.18-5.49-1.63-.87-.59-2.26-1.53-2.93-1.71.12.68.93 2.14 1.22 2.67.27.48.09 1.09-.39 1.36-.15.09-.32.13-.48.13Zm-54.32-2.89c-.22 0-.44-.04-.67-.14-1.64-.69-1.24-3.11-.81-5.67.17-1.04.45-2.7.33-3.38-.57.39-1.56 1.75-2.18 2.6-1.53 2.09-2.99 4.07-4.62 3.38a.991.991 0 0 1-.53-1.31c.2-.48.73-.72 1.21-.57.52-.21 1.65-1.75 2.34-2.68 1.53-2.09 2.98-4.08 4.62-3.38 1.64.69 1.24 3.11.81 5.67-.17 1.04-.45 2.7-.33 3.38.57-.39 1.56-1.75 2.18-2.6 1.53-2.09 2.98-4.08 4.62-3.38 1.63.69 1.24 3.09.89 5.21-.09.54-.6.91-1.15.83-.54-.09-.92-.6-.83-1.15.1-.59.37-2.24.26-2.92-.57.39-1.56 1.75-2.18 2.6-1.33 1.79-2.59 3.51-3.96 3.51Z",
+    fill: "#B3BAC5"
+  }), jsx("defs", null, jsx("linearGradient", {
+    id: id,
+    x1: "26.169",
+    y1: "228.621",
+    x2: "138.408",
+    y2: "116.382",
+    gradientUnits: "userSpaceOnUse"
+  }, jsx("stop", {
+    stopColor: "#C1C7D0"
+  }), jsx("stop", {
+    offset: ".297",
+    stopColor: "#C6CBD4",
+    stopOpacity: ".881"
+  }), jsx("stop", {
+    offset: ".63",
+    stopColor: "#D3D7DE",
+    stopOpacity: ".748"
+  }), jsx("stop", {
+    offset: ".98",
+    stopColor: "#E9EBEF",
+    stopOpacity: ".608"
+  }), jsx("stop", {
+    offset: "1",
+    stopColor: "#EBECF0",
+    stopOpacity: ".6"
+  }))));
+};
+
+export default GenericErrorSVG;

package/dist/esm/ui/error-boundary-fallback/generic-error-svg/styled.js

@@ -0,0 +1,8 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+import { gridSize as getGridSize } from '@atlaskit/theme/constants';
+import { css } from '@emotion/react';
+var HEIGHT = 90;
+export var genericErrorStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: ", "px;\n  margin: 0 auto ", "px;\n  display: block;\n"])), HEIGHT, getGridSize() * 3);

package/dist/esm/ui/error-boundary-fallback/index.js

@@ -0,0 +1,33 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import EmptyState from '@atlaskit/empty-state';
+import { defineMessages, useIntl } from 'react-intl-next';
+import GenericErrorSVG from './generic-error-svg';
+import { rootContainerStyles } from '../link-picker/styled';
+var messages = defineMessages({
+  heading: {
+    defaultMessage: 'Something went wrong!',
+    description: 'Heading displayed when an unhandled error occurs.',
+    id: 'fabric.linkPicker.unhandledError.heading'
+  },
+  description: {
+    defaultMessage: 'Try reloading the page.',
+    description: 'Body message shown underneath the heading when an unhandled error occurs.',
+    id: 'fabric.linkPicker.unhandledError.description'
+  }
+});
+export var ErrorBoundaryFallback = function ErrorBoundaryFallback() {
+  var intl = useIntl();
+  var header = intl.formatMessage(messages.heading);
+  var description = intl.formatMessage(messages.description);
+  return jsx("div", {
+    css: rootContainerStyles,
+    "data-testid": "link-picker-root-error-boundary-ui"
+  }, jsx(EmptyState, {
+    header: header,
+    renderImage: function renderImage() {
+      return jsx(GenericErrorSVG, null);
+    },
+    description: description
+  }));
+};

package/dist/esm/ui/index.js

@@ -0,0 +1,19 @@
+import React, { memo } from 'react';
+import { AnalyticsErrorBoundary } from '@atlaskit/analytics-next';
+import { name as packageName, version as packageVersion } from '../version.json';
+import { ErrorBoundaryFallback } from './error-boundary-fallback';
+import { LinkPickerWithIntl } from './link-picker';
+var COMPONENT_NAME = 'LinkPicker';
+var ANALYTICS_CHANNEL = 'media';
+var PACKAGE_DATA = {
+  packageName: packageName,
+  packageVersion: packageVersion,
+  componentName: COMPONENT_NAME
+};
+export var ComposedLinkPicker = /*#__PURE__*/memo(function (props) {
+  return /*#__PURE__*/React.createElement(AnalyticsErrorBoundary, {
+    channel: ANALYTICS_CHANNEL,
+    data: PACKAGE_DATA,
+    ErrorComponent: ErrorBoundaryFallback
+  }, /*#__PURE__*/React.createElement(LinkPickerWithIntl, props));
+});

package/dist/esm/ui/{link-picker.js → link-picker/index.js}

@@ -18,17 +18,17 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 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; } }
 
 /** @jsx jsx */
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
-import { messages } from '../messages';
+import { messages } from './messages';
 import PanelTextInput from './text-input';
 import LinkSearchList from './link-search-list';
-import { normalizeUrl, isSafeUrl } from '../url';
-import { recentListStyles, containerStyles, searchIconStyles, listTitleStyles } from './styled';
-import { browser } from '../browser';
-import { transformTimeStamp } from '../transformTimeStamp';
-import Announcer from './announcer';
+import { normalizeUrl, isSafeUrl } from './url';
+import { rootContainerStyles, searchIconStyles, listTitleStyles } from './styled';
+import { browser } from './browser';
+import { transformTimeStamp } from './transformTimeStamp';
+import Announcer from './/announcer';
 import Button, { ButtonGroup } from '@atlaskit/button';
 import { FormFooter } from '@atlaskit/form';
 import EditorSearchIcon from '@atlaskit/icon/glyph/editor/search';
@@ -48,8 +48,6 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
 
     _this = _super.call(this, props);
 
-    _defineProperty(_assertThisInitialized(_this), "wrapperRef", /*#__PURE__*/React.createRef());
-
     _defineProperty(_assertThisInitialized(_this), "queryVersion", 0);
 
     _defineProperty(_assertThisInitialized(_this), "updateInput", /*#__PURE__*/function () {
@@ -480,11 +478,7 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
       var noResults = activePlugin && !isLoading && !items.length && !isSafeUrl(url);
       return jsx("div", {
         "data-testid": "link-picker",
-        className: "recent-list",
-        css: recentListStyles
-      }, jsx("div", {
-        css: containerStyles,
-        ref: this.wrapperRef
+        css: rootContainerStyles
       }, screenReaderText && jsx(Announcer, {
         ariaLive: "assertive",
         text: screenReaderText,
@@ -564,7 +558,7 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
         appearance: "primary",
         onClick: this.handleSubmit,
         testId: "link-picker-insert-button"
-      }, formatMessage(isEditing ? messages.saveButton : messages.insertButton))))));
+      }, formatMessage(isEditing ? messages.saveButton : messages.insertButton)))));
     }
   }]);
 

package/dist/esm/ui/{list-item → link-picker/list-item}/index.js

@@ -2,7 +2,7 @@
 import { Fragment } from 'react';
 import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
-import { transformTimeStamp } from '../../transformTimeStamp';
+import { transformTimeStamp } from '../transformTimeStamp';
 import { itemNameStyles, itemIconStyles, listItemContextStyles, listItemNameStyles, composeListItemStyles, imgStyles } from './styled';
 
 var LinkSearchListItem = function LinkSearchListItem(_ref) {

package/dist/esm/ui/link-picker/styled.js

@@ -0,0 +1,16 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3;
+
+import { token } from '@atlaskit/tokens';
+import { css } from '@emotion/react';
+import { N500 } from '@atlaskit/theme/colors'; // AFP-2532 TODO: Fix automatic suppressions below
+// eslint-disable-next-line @atlassian/tangerine/import/entry-points
+
+import { typography } from '@atlaskit/theme';
+import { gridSize } from '@atlaskit/theme/constants';
+var LINK_PICKER_WIDTH_IN_PX = 342;
+var LINK_PICKER_MIN_HEIGHT_IN_PX = 234;
+export var rootContainerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: ", "px;\n  padding: ", "px;\n  box-sizing: border-box;\n  line-height: initial;\n  min-height: ", "px;\n"])), LINK_PICKER_WIDTH_IN_PX, gridSize() * 2, LINK_PICKER_MIN_HEIGHT_IN_PX);
+export var searchIconStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-left: ", "px;\n  color: ", ";\n  cursor: default;\n"])), gridSize() / 2, token('color.icon', N500));
+export var listTitleStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n  text-transform: uppercase;\n  margin-bottom: ", "px;\n"])), typography.h100(), gridSize() / 2);

package/dist/esm/ui/{text-input → link-picker/text-input}/index.js

@@ -9,7 +9,7 @@ import { ErrorMessage, Field } from '@atlaskit/form';
 import Tooltip from '@atlaskit/tooltip';
 import Textfield from '@atlaskit/textfield';
 import Selectclear from '@atlaskit/icon/glyph/select-clear';
-import { isRedoEvent, isUndoEvent } from '../../utils';
+import { isRedoEvent, isUndoEvent } from '../utils';
 import { clearTextButtonStyles, fieldStyles } from './styled';
 
 var PanelTextInput = function PanelTextInput(props) {

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-picker",
-	"version": "1.1.4",
+	"version": "1.2.0",
 	"sideEffects": false
 }

package/dist/types/index.d.ts

@@ -1,3 +1,3 @@
+export { ComposedLinkPicker as LinkPicker } from './ui';
 export type { LinkPickerProps } from './ui/link-picker';
-export { LinkPickerWithIntl as LinkPicker } from './ui/link-picker';
-export type { LinkInputType, LinkPickerPlugin, LinkPickerState, LinkSearchListItemData, } from './types';
+export type { LinkInputType, LinkPickerPlugin, LinkPickerState, LinkSearchListItemData, } from './ui/types';

package/dist/types/ui/error-boundary-fallback/generic-error-svg/index.d.ts

@@ -0,0 +1,4 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+declare const GenericErrorSVG: (props: React.SVGProps<SVGSVGElement>) => jsx.JSX.Element;
+export default GenericErrorSVG;

package/dist/types/ui/error-boundary-fallback/generic-error-svg/styled.d.ts

@@ -0,0 +1 @@
+export declare const genericErrorStyles: import("@emotion/react").SerializedStyles;

package/dist/types/ui/error-boundary-fallback/index.d.ts

@@ -0,0 +1,3 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+export declare const ErrorBoundaryFallback: () => jsx.JSX.Element;

package/dist/types/ui/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { LinkPickerProps } from './link-picker';
+export declare const ComposedLinkPicker: React.MemoExoticComponent<(props: LinkPickerProps) => JSX.Element>;

package/dist/types/ui/{link-picker.d.ts → link-picker/index.d.ts}

@@ -1,5 +1,4 @@
-/** @jsx jsx */
-import React from 'react';
+/// <reference types="react" />
 import { WrappedComponentProps } from 'react-intl-next';
 import { LinkSearchListItemData, LinkInputType, LinkPickerPlugin } from '../types';
 export declare const RECENT_SEARCH_LIST_SIZE = 5;
@@ -46,7 +45,7 @@ export interface State {
     displayText: string;
     invalidUrl: string | null;
 }
-export declare const LinkPickerWithIntl: React.FC<import("react-intl-next").WithIntlProps<WrappedComponentProps<"intl"> & LinkPickerProps>> & {
-    WrappedComponent: React.ComponentType<WrappedComponentProps<"intl"> & LinkPickerProps>;
+export declare const LinkPickerWithIntl: import("react").FC<import("react-intl-next").WithIntlProps<WrappedComponentProps<"intl"> & LinkPickerProps>> & {
+    WrappedComponent: import("react").ComponentType<WrappedComponentProps<"intl"> & LinkPickerProps>;
 };
 export {};

package/dist/types/ui/{styled.d.ts → link-picker/styled.d.ts}

@@ -1,4 +1,3 @@
-export declare const recentListStyles: import("@emotion/react").SerializedStyles;
-export declare const containerStyles: import("@emotion/react").SerializedStyles;
+export declare const rootContainerStyles: import("@emotion/react").SerializedStyles;
 export declare const searchIconStyles: import("@emotion/react").SerializedStyles;
 export declare const listTitleStyles: import("@emotion/react").SerializedStyles;

package/dist/types/{transformTimeStamp.d.ts → ui/link-picker/transformTimeStamp.d.ts}

@@ -1,3 +1,3 @@
 import { IntlShape } from 'react-intl-next';
-import { ListItemTimeStamp } from './types';
+import { ListItemTimeStamp } from '../types';
 export declare const transformTimeStamp: (intl: IntlShape, lastViewedDate?: Date | undefined, lastUpdatedDate?: Date | undefined) => ListItemTimeStamp | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-picker",
-  "version": "1.1.4",
+  "version": "1.2.0",
   "description": "Standalone link picker",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
@@ -29,6 +29,7 @@
     "ak-postbuild": "ls -d dist/* | grep -v dist/types | xargs -n 1 copyfiles -u 1 -V src/**/*.svg"
   },
   "dependencies": {
+    "@atlaskit/analytics-next": "^8.3.1",
     "@atlaskit/button": "^16.2.0",
     "@atlaskit/empty-state": "^7.3.0",
     "@atlaskit/form": "^8.5.1",
@@ -57,7 +58,7 @@
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
-    "@atlassian/link-picker-atlassian-plugin": "^11.0.0",
+    "@atlassian/link-picker-atlassian-plugin": "^12.0.0",
     "@atlassian/search-provider": "^2.3.0",
     "@testing-library/dom": "^7.7.3",
     "@testing-library/react": "^8.0.1",

package/dist/cjs/ui/styled.js

@@ -1,32 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.searchIconStyles = exports.recentListStyles = exports.listTitleStyles = exports.containerStyles = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _tokens = require("@atlaskit/tokens");
-
-var _react = require("@emotion/react");
-
-var _colors = require("@atlaskit/theme/colors");
-
-var _theme = require("@atlaskit/theme");
-
-var _constants = require("@atlaskit/theme/constants");
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-
-var LINK_PICKER_WIDTH_IN_PX = 342;
-var recentListStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", "px;\n"])), LINK_PICKER_WIDTH_IN_PX);
-exports.recentListStyles = recentListStyles;
-var containerStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", "px;\n  width: 100%;\n  overflow: hidden;\n  line-height: initial;\n  box-sizing: border-box;\n"])), (0, _constants.gridSize)() * 2);
-exports.containerStyles = containerStyles;
-var searchIconStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: ", "px;\n  color: ", ";\n  cursor: default;\n"])), (0, _constants.gridSize)() / 2, (0, _tokens.token)('color.icon', _colors.N500));
-exports.searchIconStyles = searchIconStyles;
-var listTitleStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  text-transform: uppercase;\n  margin-bottom: ", "px;\n"])), _theme.typography.h100(), (0, _constants.gridSize)() / 2);
-exports.listTitleStyles = listTitleStyles;

package/dist/esm/ui/styled.js

@@ -1,16 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-
-import { token } from '@atlaskit/tokens';
-import { css } from '@emotion/react';
-import { N500 } from '@atlaskit/theme/colors'; // AFP-2532 TODO: Fix automatic suppressions below
-// eslint-disable-next-line @atlassian/tangerine/import/entry-points
-
-import { typography } from '@atlaskit/theme';
-import { gridSize } from '@atlaskit/theme/constants';
-var LINK_PICKER_WIDTH_IN_PX = 342;
-export var recentListStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: ", "px;\n"])), LINK_PICKER_WIDTH_IN_PX);
-export var containerStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: ", "px;\n  width: 100%;\n  overflow: hidden;\n  line-height: initial;\n  box-sizing: border-box;\n"])), gridSize() * 2);
-export var searchIconStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-left: ", "px;\n  color: ", ";\n  cursor: default;\n"])), gridSize() / 2, token('color.icon', N500));
-export var listTitleStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", "\n  text-transform: uppercase;\n  margin-bottom: ", "px;\n"])), typography.h100(), gridSize() / 2);