@atlaskit/link-picker 1.25.6 → 1.26.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/link-picker
 
+## 1.26.0
+
+### Minor Changes
+
+- [`ae65b485bca`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ae65b485bca) - [ux] Better minimum height for link picker error and loading state
+
 ## 1.25.6
 
 ### Patch Changes

package/dist/cjs/common/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.RECENT_SEARCH_LIST_SIZE = exports.LINK_PICKER_WIDTH_IN_PX = exports.COMPONENT_NAME = exports.ANALYTICS_CHANNEL = void 0;
+exports.RECENT_SEARCH_LIST_SIZE = exports.LINK_PICKER_WIDTH_IN_PX = exports.LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITH_DISPLAYTEXT = exports.LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITHOUT_DISPLAYTEXT = exports.LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_DISPLAYTEXT = exports.LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITHOUT_DISPLAYTEXT = exports.LINK_PICKER_MIN_HEIGHT_IN_PX_FALLBACK = exports.COMPONENT_NAME = exports.ANALYTICS_CHANNEL = void 0;
 var ANALYTICS_CHANNEL = 'media';
 exports.ANALYTICS_CHANNEL = ANALYTICS_CHANNEL;
 var COMPONENT_NAME = 'linkPicker';
@@ -11,4 +11,14 @@ exports.COMPONENT_NAME = COMPONENT_NAME;
 var RECENT_SEARCH_LIST_SIZE = 5;
 exports.RECENT_SEARCH_LIST_SIZE = RECENT_SEARCH_LIST_SIZE;
 var LINK_PICKER_WIDTH_IN_PX = 342;
-exports.LINK_PICKER_WIDTH_IN_PX = LINK_PICKER_WIDTH_IN_PX;
+exports.LINK_PICKER_WIDTH_IN_PX = LINK_PICKER_WIDTH_IN_PX;
+var LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITHOUT_DISPLAYTEXT = '472px';
+exports.LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITHOUT_DISPLAYTEXT = LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITHOUT_DISPLAYTEXT;
+var LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITH_DISPLAYTEXT = '550px';
+exports.LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITH_DISPLAYTEXT = LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITH_DISPLAYTEXT;
+var LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_DISPLAYTEXT = '218px';
+exports.LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_DISPLAYTEXT = LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_DISPLAYTEXT;
+var LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITHOUT_DISPLAYTEXT = '141px';
+exports.LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITHOUT_DISPLAYTEXT = LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITHOUT_DISPLAYTEXT;
+var LINK_PICKER_MIN_HEIGHT_IN_PX_FALLBACK = '290px';
+exports.LINK_PICKER_MIN_HEIGHT_IN_PX_FALLBACK = LINK_PICKER_MIN_HEIGHT_IN_PX_FALLBACK;

package/dist/cjs/common/ui/min-height-container/index.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MinHeightContainer = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _styled = require("./styled");
+var _excluded = ["minHeight"];
+/** @jsx jsx */
+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 MinHeightContainer = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var minHeight = _ref.minHeight,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return (0, _react2.jsx)("div", (0, _extends2.default)({
+    ref: ref,
+    css: _styled.minHeightComponentStyles
+  }, props, {
+    style: (0, _defineProperty2.default)({}, '--link-picker-min-height', minHeight)
+  }));
+});
+exports.MinHeightContainer = MinHeightContainer;

package/dist/cjs/common/ui/min-height-container/styled.js

@@ -0,0 +1,12 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.minHeightComponentStyles = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _templateObject;
+var minHeightComponentStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: var(--link-picker-min-height);\n"])));
+exports.minHeightComponentStyles = minHeightComponentStyles;

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

@@ -8,8 +8,12 @@ exports.ErrorBoundaryFallback = void 0;
 var _react = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _emptyState = _interopRequireDefault(require("@atlaskit/empty-state"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _constants = require("../../../common/constants");
 var _genericErrorSvg = require("../../../common/generic-error-svg");
+var _minHeightContainer = require("../../../common/ui/min-height-container");
 var _styled = require("../../link-picker/styled");
+var _styled2 = require("./styled");
 /** @jsx jsx */
 
 // eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
@@ -30,6 +34,19 @@ var ErrorBoundaryFallback = function ErrorBoundaryFallback() {
   var intl = (0, _reactIntlNext.useIntl)();
   var header = intl.formatMessage(messages.heading);
   var description = intl.formatMessage(messages.description);
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.link-picker.fixed-height-search-results')) {
+    return (0, _react.jsx)(_minHeightContainer.MinHeightContainer, {
+      css: _styled2.errorBoundaryFallbackStyles,
+      minHeight: _constants.LINK_PICKER_MIN_HEIGHT_IN_PX_FALLBACK,
+      "data-testid": "link-picker-root-error-boundary-ui"
+    }, (0, _react.jsx)(_emptyState.default, {
+      header: header,
+      renderImage: function renderImage() {
+        return (0, _react.jsx)(_genericErrorSvg.GenericErrorSVG, null);
+      },
+      description: description
+    }));
+  }
   return (0, _react.jsx)("div", {
     css: _styled.rootContainerStyles,
     "data-testid": "link-picker-root-error-boundary-ui"

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

@@ -0,0 +1,12 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.errorBoundaryFallbackStyles = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _templateObject;
+var errorBoundaryFallbackStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  line-height: initial;\n"])));
+exports.errorBoundaryFallbackStyles = errorBoundaryFallbackStyles;

package/dist/cjs/ui/index.js

@@ -8,16 +8,19 @@ exports.testIds = exports.PACKAGE_DATA = exports.ComposedLinkPicker = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
 var _reactLooselyLazy = require("react-loosely-lazy");
 var _analyticsNext = require("@atlaskit/analytics-next");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("../common/constants");
 var _sessionProvider = require("../controllers/session-provider");
 var _version = require("../version.json");
 var _errorBoundary = require("./error-boundary");
 var _loaderFallback = require("./loader-fallback");
 var _messagesProvider = require("./messages-provider");
+var _styled = require("./styled");
 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 || (0, _typeof2.default)(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; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || (0, _typeof2.default)(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; } /** @jsx jsx */
 var testIds = {
   linkPickerRoot: 'link-picker-root'
 };
@@ -42,21 +45,36 @@ var LazyLinkPicker = (0, _reactLooselyLazy.lazyForPaint)(function () {
 });
 var DefaultRootComponent = function DefaultRootComponent(_ref2) {
   var children = _ref2.children;
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return (0, _react2.jsx)("div", {
     "data-testid": testIds.linkPickerRoot
   }, children);
 };
+var FixedWidthContainer = function FixedWidthContainer(props) {
+  return (0, _react2.jsx)("div", (0, _extends2.default)({
+    css: _styled.fixedWidthContainerStyles
+  }, props));
+};
 var ComposedLinkPicker = /*#__PURE__*/(0, _react.memo)(function (props) {
   var component = props.component;
   var RootComponent = component !== null && component !== void 0 ? component : DefaultRootComponent;
-  return /*#__PURE__*/_react.default.createElement(_analyticsNext.AnalyticsContext, {
+
+  /**
+   * When ff enabled: root container will provide width to component + loader + error boundary
+   * When ff disabled: component + loader + error boundary each providing their own width
+   * Cannot make this change easier at risk of regression as external adopters may have css override on the form element
+   */
+  var RootFixedWidthContainer = (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.link-picker.fixed-height-search-results') ? FixedWidthContainer : _react.Fragment;
+  var LoaderFallbackContainer = (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.link-picker.fixed-height-search-results') ? _react.Fragment : FixedWidthContainer;
+  return (0, _react2.jsx)(_analyticsNext.AnalyticsContext, {
     data: PACKAGE_DATA
-  }, /*#__PURE__*/_react.default.createElement(_sessionProvider.LinkPickerSessionProvider, null, /*#__PURE__*/_react.default.createElement(_messagesProvider.MessagesProvider, null, /*#__PURE__*/_react.default.createElement(_errorBoundary.ErrorBoundary, null, /*#__PURE__*/_react.default.createElement(_reactLooselyLazy.LazySuspense, {
-    fallback: /*#__PURE__*/_react.default.createElement(_loaderFallback.LoaderFallback, {
-      hideDisplayText: props.hideDisplayText
-    })
-  }, /*#__PURE__*/_react.default.createElement(RootComponent, (0, _extends2.default)({}, props, {
+  }, (0, _react2.jsx)(_sessionProvider.LinkPickerSessionProvider, null, (0, _react2.jsx)(_messagesProvider.MessagesProvider, null, (0, _react2.jsx)(RootFixedWidthContainer, null, (0, _react2.jsx)(_errorBoundary.ErrorBoundary, null, (0, _react2.jsx)(_reactLooselyLazy.LazySuspense, {
+    fallback: (0, _react2.jsx)(LoaderFallbackContainer, null, (0, _react2.jsx)(_loaderFallback.LoaderFallback, {
+      hideDisplayText: props.hideDisplayText,
+      isLoadingPlugins: props.isLoadingPlugins,
+      plugins: props.plugins
+    }))
+  }, (0, _react2.jsx)(RootComponent, (0, _extends2.default)({}, props, {
     "data-testid": testIds.linkPickerRoot
-  }), /*#__PURE__*/_react.default.createElement(LazyLinkPicker, props)))))));
+  }), (0, _react2.jsx)(LazyLinkPicker, props))))))));
 });
 exports.ComposedLinkPicker = ComposedLinkPicker;

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

@@ -7,13 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.tabsWrapperStyles = exports.rootContainerStyles = exports.formFooterMargin = exports.flexColumnStyles = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _constants = require("../../common/constants");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-var LINK_PICKER_WIDTH_IN_PX = 342;
-
 /**
  * Half padding on the top as the form field has a `gridSize()` margin top that cannot be overridden
  */
-var rootContainerStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", "px;\n  padding: ", " ", "\n    ", ";\n  box-sizing: border-box;\n  line-height: initial;\n"])), LINK_PICKER_WIDTH_IN_PX, "var(--ds-space-100, 8px)", "var(--ds-space-200, 16px)", "var(--ds-space-200, 16px)");
+var rootContainerStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";\n  padding: ", " ", "\n    ", ";\n  box-sizing: border-box;\n  line-height: initial;\n"])), (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.link-picker.fixed-height-search-results') ? undefined : "".concat(_constants.LINK_PICKER_WIDTH_IN_PX, "px"), "var(--ds-space-100, 8px)", "var(--ds-space-200, 16px)", "var(--ds-space-200, 16px)");
 exports.rootContainerStyles = rootContainerStyles;
 var tabsWrapperStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: ", ";\n  margin-left: calc(-1 * ", ");\n  margin-right: calc(-1 * ", ");\n"])), "var(--ds-space-150, 12px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)");
 exports.tabsWrapperStyles = tabsWrapperStyles;

package/dist/cjs/ui/loader-fallback/index.js

@@ -6,18 +6,36 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.LoaderFallback = void 0;
 var _react = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
-var _styled = require("./styled");
+var _constants = require("../../common/constants");
+var _minHeightContainer = require("../../common/ui/min-height-container");
 /** @jsx jsx */
 
+// EDM-7122: can delete these two consts once min height container for link picker is firm for the loader
+var LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_DISPLAYTEXT = '142px';
+var LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_DISPLAYTEXT = '220px';
+var getEstimatedMinHeight = function getEstimatedMinHeight(_ref) {
+  var hideDisplayText = _ref.hideDisplayText,
+    isLoadingPlugins = _ref.isLoadingPlugins,
+    plugins = _ref.plugins;
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.link-picker.fixed-height-search-results')) {
+    if (plugins !== null && plugins !== void 0 && plugins.length || isLoadingPlugins) {
+      return hideDisplayText ? _constants.LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITHOUT_DISPLAYTEXT : _constants.LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITH_DISPLAYTEXT;
+    }
+    return hideDisplayText ? _constants.LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITHOUT_DISPLAYTEXT : _constants.LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_DISPLAYTEXT;
+  }
+  return hideDisplayText ? LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_DISPLAYTEXT : LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_DISPLAYTEXT;
+};
+
 /**
- * Loader / skeleton for the Link Picker. Takes displayText prop - when no displayText is given the height of the skeleton
- * is shorter to prevent jump when loading in Link Picker.
+ * Loader / skeleton for the Link Picker. Takes LoaderFallbackProps (hideDisplayText, isLoadingPlugins, plugins)
+ * to determine the height to prevent jumps in height when loading
  */
-var LoaderFallback = function LoaderFallback(_ref) {
-  var hideDisplayText = _ref.hideDisplayText;
-  return (0, _react.jsx)("div", {
-    css: hideDisplayText ? _styled.rootContainerStylesForLoaderWithoutDisplaytext : _styled.rootContainerStylesForLoaderWithDisplaytext,
+var LoaderFallback = function LoaderFallback(props) {
+  var minHeight = getEstimatedMinHeight(props);
+  return (0, _react.jsx)(_minHeightContainer.MinHeightContainer, {
+    minHeight: minHeight,
     "data-testid": "link-picker-root-loader-boundary-ui"
   }, (0, _react.jsx)(_spinner.default, {
     testId: "link-picker.component-loading-indicator",

package/dist/cjs/ui/styled.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.fixedWidthContainerStyles = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _constants = require("../common/constants");
+var _templateObject;
+var fixedWidthContainerStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", "px;\n"])), _constants.LINK_PICKER_WIDTH_IN_PX);
+exports.fixedWidthContainerStyles = fixedWidthContainerStyles;

package/dist/cjs/version.json

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

package/dist/es2019/common/constants.js

@@ -1,4 +1,9 @@
 export const ANALYTICS_CHANNEL = 'media';
 export const COMPONENT_NAME = 'linkPicker';
 export const RECENT_SEARCH_LIST_SIZE = 5;
-export const LINK_PICKER_WIDTH_IN_PX = 342;
+export const LINK_PICKER_WIDTH_IN_PX = 342;
+export const LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITHOUT_DISPLAYTEXT = '472px';
+export const LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITH_DISPLAYTEXT = '550px';
+export const LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_DISPLAYTEXT = '218px';
+export const LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITHOUT_DISPLAYTEXT = '141px';
+export const LINK_PICKER_MIN_HEIGHT_IN_PX_FALLBACK = '290px';

package/dist/es2019/common/ui/min-height-container/index.js

@@ -0,0 +1,18 @@
+import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+import React, { forwardRef } from 'react';
+import { jsx } from '@emotion/react';
+import { minHeightComponentStyles } from './styled';
+export const MinHeightContainer = /*#__PURE__*/forwardRef(({
+  minHeight,
+  ...props
+}, ref) => {
+  return jsx("div", _extends({
+    ref: ref,
+    css: minHeightComponentStyles
+  }, props, {
+    style: {
+      ['--link-picker-min-height']: minHeight
+    }
+  }));
+});

package/dist/es2019/common/ui/min-height-container/styled.js

@@ -0,0 +1,7 @@
+import { css } from '@emotion/react';
+export const minHeightComponentStyles = css`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--link-picker-min-height);
+`;

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

@@ -2,9 +2,13 @@
 import { jsx } from '@emotion/react';
 import { defineMessages, useIntl } from 'react-intl-next';
 import EmptyState from '@atlaskit/empty-state';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { LINK_PICKER_MIN_HEIGHT_IN_PX_FALLBACK } from '../../../common/constants';
 import { GenericErrorSVG } from '../../../common/generic-error-svg';
+import { MinHeightContainer } from '../../../common/ui/min-height-container';
 // eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
 import { rootContainerStyles } from '../../link-picker/styled';
+import { errorBoundaryFallbackStyles } from './styled';
 const messages = defineMessages({
   heading: {
     defaultMessage: 'Something went wrong!',
@@ -21,6 +25,17 @@ export const ErrorBoundaryFallback = () => {
   const intl = useIntl();
   const header = intl.formatMessage(messages.heading);
   const description = intl.formatMessage(messages.description);
+  if (getBooleanFF('platform.linking-platform.link-picker.fixed-height-search-results')) {
+    return jsx(MinHeightContainer, {
+      css: errorBoundaryFallbackStyles,
+      minHeight: LINK_PICKER_MIN_HEIGHT_IN_PX_FALLBACK,
+      "data-testid": "link-picker-root-error-boundary-ui"
+    }, jsx(EmptyState, {
+      header: header,
+      renderImage: () => jsx(GenericErrorSVG, null),
+      description: description
+    }));
+  }
   return jsx("div", {
     css: rootContainerStyles,
     "data-testid": "link-picker-root-error-boundary-ui"

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

@@ -0,0 +1,4 @@
+import { css } from '@emotion/react';
+export const errorBoundaryFallbackStyles = css`
+  line-height: initial;
+`;

package/dist/es2019/ui/index.js

@@ -1,13 +1,17 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { memo } from 'react';
+/** @jsx jsx */
+import React, { Fragment, memo } from 'react';
+import { jsx } from '@emotion/react';
 import { lazyForPaint, LazySuspense } from 'react-loosely-lazy';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { COMPONENT_NAME } from '../common/constants';
 import { LinkPickerSessionProvider } from '../controllers/session-provider';
 import { name as packageName, version as packageVersion } from '../version.json';
 import { ErrorBoundary } from './error-boundary';
 import { LoaderFallback } from './loader-fallback';
 import { MessagesProvider } from './messages-provider';
+import { fixedWidthContainerStyles } from './styled';
 export const testIds = {
   linkPickerRoot: 'link-picker-root'
 };
@@ -26,22 +30,37 @@ const LazyLinkPicker = lazyForPaint(() => import( /* webpackChunkName: "@atlaski
 const DefaultRootComponent = ({
   children
 }) => {
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     "data-testid": testIds.linkPickerRoot
   }, children);
 };
+const FixedWidthContainer = props => {
+  return jsx("div", _extends({
+    css: fixedWidthContainerStyles
+  }, props));
+};
 export const ComposedLinkPicker = /*#__PURE__*/memo(props => {
   const {
     component
   } = props;
   const RootComponent = component !== null && component !== void 0 ? component : DefaultRootComponent;
-  return /*#__PURE__*/React.createElement(AnalyticsContext, {
+
+  /**
+   * When ff enabled: root container will provide width to component + loader + error boundary
+   * When ff disabled: component + loader + error boundary each providing their own width
+   * Cannot make this change easier at risk of regression as external adopters may have css override on the form element
+   */
+  const RootFixedWidthContainer = getBooleanFF('platform.linking-platform.link-picker.fixed-height-search-results') ? FixedWidthContainer : Fragment;
+  const LoaderFallbackContainer = getBooleanFF('platform.linking-platform.link-picker.fixed-height-search-results') ? Fragment : FixedWidthContainer;
+  return jsx(AnalyticsContext, {
     data: PACKAGE_DATA
-  }, /*#__PURE__*/React.createElement(LinkPickerSessionProvider, null, /*#__PURE__*/React.createElement(MessagesProvider, null, /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement(LazySuspense, {
-    fallback: /*#__PURE__*/React.createElement(LoaderFallback, {
-      hideDisplayText: props.hideDisplayText
-    })
-  }, /*#__PURE__*/React.createElement(RootComponent, _extends({}, props, {
+  }, jsx(LinkPickerSessionProvider, null, jsx(MessagesProvider, null, jsx(RootFixedWidthContainer, null, jsx(ErrorBoundary, null, jsx(LazySuspense, {
+    fallback: jsx(LoaderFallbackContainer, null, jsx(LoaderFallback, {
+      hideDisplayText: props.hideDisplayText,
+      isLoadingPlugins: props.isLoadingPlugins,
+      plugins: props.plugins
+    }))
+  }, jsx(RootComponent, _extends({}, props, {
     "data-testid": testIds.linkPickerRoot
-  }), /*#__PURE__*/React.createElement(LazyLinkPicker, props)))))));
+  }), jsx(LazyLinkPicker, props))))))));
 });

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

@@ -1,11 +1,12 @@
 import { css } from '@emotion/react';
-const LINK_PICKER_WIDTH_IN_PX = 342;
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { LINK_PICKER_WIDTH_IN_PX } from '../../common/constants';
 
 /**
  * Half padding on the top as the form field has a `gridSize()` margin top that cannot be overridden
  */
 export const rootContainerStyles = css`
-  width: ${LINK_PICKER_WIDTH_IN_PX}px;
+  width: ${getBooleanFF('platform.linking-platform.link-picker.fixed-height-search-results') ? undefined : `${LINK_PICKER_WIDTH_IN_PX}px`};
   padding: ${"var(--ds-space-100, 8px)"} ${"var(--ds-space-200, 16px)"}
     ${"var(--ds-space-200, 16px)"};
   box-sizing: border-box;

package/dist/es2019/ui/loader-fallback/index.js

@@ -1,18 +1,37 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import Spinner from '@atlaskit/spinner';
-import { rootContainerStylesForLoaderWithDisplaytext, rootContainerStylesForLoaderWithoutDisplaytext } from './styled';
+import { LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITH_DISPLAYTEXT, LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITHOUT_DISPLAYTEXT, LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_DISPLAYTEXT, LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITHOUT_DISPLAYTEXT } from '../../common/constants';
+import { MinHeightContainer } from '../../common/ui/min-height-container';
+// EDM-7122: can delete these two consts once min height container for link picker is firm for the loader
+const LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_DISPLAYTEXT = '142px';
+const LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_DISPLAYTEXT = '220px';
+const getEstimatedMinHeight = ({
+  hideDisplayText,
+  isLoadingPlugins,
+  plugins
+}) => {
+  if (getBooleanFF('platform.linking-platform.link-picker.fixed-height-search-results')) {
+    if (plugins !== null && plugins !== void 0 && plugins.length || isLoadingPlugins) {
+      return hideDisplayText ? LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITHOUT_DISPLAYTEXT : LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITH_DISPLAYTEXT;
+    }
+    return hideDisplayText ? LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITHOUT_DISPLAYTEXT : LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_DISPLAYTEXT;
+  }
+  return hideDisplayText ? LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_DISPLAYTEXT : LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_DISPLAYTEXT;
+};
 
 /**
- * Loader / skeleton for the Link Picker. Takes displayText prop - when no displayText is given the height of the skeleton
- * is shorter to prevent jump when loading in Link Picker.
+ * Loader / skeleton for the Link Picker. Takes LoaderFallbackProps (hideDisplayText, isLoadingPlugins, plugins)
+ * to determine the height to prevent jumps in height when loading
  */
-export const LoaderFallback = ({
-  hideDisplayText
-}) => jsx("div", {
-  css: hideDisplayText ? rootContainerStylesForLoaderWithoutDisplaytext : rootContainerStylesForLoaderWithDisplaytext,
-  "data-testid": "link-picker-root-loader-boundary-ui"
-}, jsx(Spinner, {
-  testId: "link-picker.component-loading-indicator",
-  size: "medium"
-}));
+export const LoaderFallback = props => {
+  const minHeight = getEstimatedMinHeight(props);
+  return jsx(MinHeightContainer, {
+    minHeight: minHeight,
+    "data-testid": "link-picker-root-loader-boundary-ui"
+  }, jsx(Spinner, {
+    testId: "link-picker.component-loading-indicator",
+    size: "medium"
+  }));
+};

package/dist/es2019/ui/styled.js

@@ -0,0 +1,5 @@
+import { css } from '@emotion/react';
+import { LINK_PICKER_WIDTH_IN_PX } from '../common/constants';
+export const fixedWidthContainerStyles = css`
+  width: ${LINK_PICKER_WIDTH_IN_PX}px;
+`;

package/dist/es2019/version.json

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

package/dist/esm/common/constants.js

@@ -1,4 +1,9 @@
 export var ANALYTICS_CHANNEL = 'media';
 export var COMPONENT_NAME = 'linkPicker';
 export var RECENT_SEARCH_LIST_SIZE = 5;
-export var LINK_PICKER_WIDTH_IN_PX = 342;
+export var LINK_PICKER_WIDTH_IN_PX = 342;
+export var LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITHOUT_DISPLAYTEXT = '472px';
+export var LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITH_DISPLAYTEXT = '550px';
+export var LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_DISPLAYTEXT = '218px';
+export var LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITHOUT_DISPLAYTEXT = '141px';
+export var LINK_PICKER_MIN_HEIGHT_IN_PX_FALLBACK = '290px';

package/dist/esm/common/ui/min-height-container/index.js

@@ -0,0 +1,18 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["minHeight"];
+/** @jsx jsx */
+import React, { forwardRef } from 'react';
+import { jsx } from '@emotion/react';
+import { minHeightComponentStyles } from './styled';
+export var MinHeightContainer = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var minHeight = _ref.minHeight,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return jsx("div", _extends({
+    ref: ref,
+    css: minHeightComponentStyles
+  }, props, {
+    style: _defineProperty({}, '--link-picker-min-height', minHeight)
+  }));
+});

package/dist/esm/common/ui/min-height-container/styled.js

@@ -0,0 +1,4 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject;
+import { css } from '@emotion/react';
+export var minHeightComponentStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: var(--link-picker-min-height);\n"])));

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

@@ -2,9 +2,13 @@
 import { jsx } from '@emotion/react';
 import { defineMessages, useIntl } from 'react-intl-next';
 import EmptyState from '@atlaskit/empty-state';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { LINK_PICKER_MIN_HEIGHT_IN_PX_FALLBACK } from '../../../common/constants';
 import { GenericErrorSVG } from '../../../common/generic-error-svg';
+import { MinHeightContainer } from '../../../common/ui/min-height-container';
 // eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
 import { rootContainerStyles } from '../../link-picker/styled';
+import { errorBoundaryFallbackStyles } from './styled';
 var messages = defineMessages({
   heading: {
     defaultMessage: 'Something went wrong!',
@@ -21,6 +25,19 @@ export var ErrorBoundaryFallback = function ErrorBoundaryFallback() {
   var intl = useIntl();
   var header = intl.formatMessage(messages.heading);
   var description = intl.formatMessage(messages.description);
+  if (getBooleanFF('platform.linking-platform.link-picker.fixed-height-search-results')) {
+    return jsx(MinHeightContainer, {
+      css: errorBoundaryFallbackStyles,
+      minHeight: LINK_PICKER_MIN_HEIGHT_IN_PX_FALLBACK,
+      "data-testid": "link-picker-root-error-boundary-ui"
+    }, jsx(EmptyState, {
+      header: header,
+      renderImage: function renderImage() {
+        return jsx(GenericErrorSVG, null);
+      },
+      description: description
+    }));
+  }
   return jsx("div", {
     css: rootContainerStyles,
     "data-testid": "link-picker-root-error-boundary-ui"

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

@@ -0,0 +1,4 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject;
+import { css } from '@emotion/react';
+export var errorBoundaryFallbackStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  line-height: initial;\n"])));

package/dist/esm/ui/index.js

@@ -1,13 +1,17 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { memo } from 'react';
+/** @jsx jsx */
+import React, { Fragment, memo } from 'react';
+import { jsx } from '@emotion/react';
 import { lazyForPaint, LazySuspense } from 'react-loosely-lazy';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { COMPONENT_NAME } from '../common/constants';
 import { LinkPickerSessionProvider } from '../controllers/session-provider';
 import { name as packageName, version as packageVersion } from '../version.json';
 import { ErrorBoundary } from './error-boundary';
 import { LoaderFallback } from './loader-fallback';
 import { MessagesProvider } from './messages-provider';
+import { fixedWidthContainerStyles } from './styled';
 export var testIds = {
   linkPickerRoot: 'link-picker-root'
 };
@@ -28,20 +32,35 @@ var LazyLinkPicker = lazyForPaint(function () {
 });
 var DefaultRootComponent = function DefaultRootComponent(_ref2) {
   var children = _ref2.children;
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     "data-testid": testIds.linkPickerRoot
   }, children);
 };
+var FixedWidthContainer = function FixedWidthContainer(props) {
+  return jsx("div", _extends({
+    css: fixedWidthContainerStyles
+  }, props));
+};
 export var ComposedLinkPicker = /*#__PURE__*/memo(function (props) {
   var component = props.component;
   var RootComponent = component !== null && component !== void 0 ? component : DefaultRootComponent;
-  return /*#__PURE__*/React.createElement(AnalyticsContext, {
+
+  /**
+   * When ff enabled: root container will provide width to component + loader + error boundary
+   * When ff disabled: component + loader + error boundary each providing their own width
+   * Cannot make this change easier at risk of regression as external adopters may have css override on the form element
+   */
+  var RootFixedWidthContainer = getBooleanFF('platform.linking-platform.link-picker.fixed-height-search-results') ? FixedWidthContainer : Fragment;
+  var LoaderFallbackContainer = getBooleanFF('platform.linking-platform.link-picker.fixed-height-search-results') ? Fragment : FixedWidthContainer;
+  return jsx(AnalyticsContext, {
     data: PACKAGE_DATA
-  }, /*#__PURE__*/React.createElement(LinkPickerSessionProvider, null, /*#__PURE__*/React.createElement(MessagesProvider, null, /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement(LazySuspense, {
-    fallback: /*#__PURE__*/React.createElement(LoaderFallback, {
-      hideDisplayText: props.hideDisplayText
-    })
-  }, /*#__PURE__*/React.createElement(RootComponent, _extends({}, props, {
+  }, jsx(LinkPickerSessionProvider, null, jsx(MessagesProvider, null, jsx(RootFixedWidthContainer, null, jsx(ErrorBoundary, null, jsx(LazySuspense, {
+    fallback: jsx(LoaderFallbackContainer, null, jsx(LoaderFallback, {
+      hideDisplayText: props.hideDisplayText,
+      isLoadingPlugins: props.isLoadingPlugins,
+      plugins: props.plugins
+    }))
+  }, jsx(RootComponent, _extends({}, props, {
     "data-testid": testIds.linkPickerRoot
-  }), /*#__PURE__*/React.createElement(LazyLinkPicker, props)))))));
+  }), jsx(LazyLinkPicker, props))))))));
 });

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

@@ -1,12 +1,13 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 import { css } from '@emotion/react';
-var LINK_PICKER_WIDTH_IN_PX = 342;
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { LINK_PICKER_WIDTH_IN_PX } from '../../common/constants';
 
 /**
  * Half padding on the top as the form field has a `gridSize()` margin top that cannot be overridden
  */
-export var rootContainerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: ", "px;\n  padding: ", " ", "\n    ", ";\n  box-sizing: border-box;\n  line-height: initial;\n"])), LINK_PICKER_WIDTH_IN_PX, "var(--ds-space-100, 8px)", "var(--ds-space-200, 16px)", "var(--ds-space-200, 16px)");
+export var rootContainerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: ", ";\n  padding: ", " ", "\n    ", ";\n  box-sizing: border-box;\n  line-height: initial;\n"])), getBooleanFF('platform.linking-platform.link-picker.fixed-height-search-results') ? undefined : "".concat(LINK_PICKER_WIDTH_IN_PX, "px"), "var(--ds-space-100, 8px)", "var(--ds-space-200, 16px)", "var(--ds-space-200, 16px)");
 export var tabsWrapperStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  margin-left: calc(-1 * ", ");\n  margin-right: calc(-1 * ", ");\n"])), "var(--ds-space-150, 12px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)");
 export var flexColumnStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));
 export var formFooterMargin = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n"])), "var(--ds-space-200, 16px)");

package/dist/esm/ui/loader-fallback/index.js

@@ -1,16 +1,33 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import Spinner from '@atlaskit/spinner';
-import { rootContainerStylesForLoaderWithDisplaytext, rootContainerStylesForLoaderWithoutDisplaytext } from './styled';
+import { LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITH_DISPLAYTEXT, LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITHOUT_DISPLAYTEXT, LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_DISPLAYTEXT, LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITHOUT_DISPLAYTEXT } from '../../common/constants';
+import { MinHeightContainer } from '../../common/ui/min-height-container';
+// EDM-7122: can delete these two consts once min height container for link picker is firm for the loader
+var LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_DISPLAYTEXT = '142px';
+var LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_DISPLAYTEXT = '220px';
+var getEstimatedMinHeight = function getEstimatedMinHeight(_ref) {
+  var hideDisplayText = _ref.hideDisplayText,
+    isLoadingPlugins = _ref.isLoadingPlugins,
+    plugins = _ref.plugins;
+  if (getBooleanFF('platform.linking-platform.link-picker.fixed-height-search-results')) {
+    if (plugins !== null && plugins !== void 0 && plugins.length || isLoadingPlugins) {
+      return hideDisplayText ? LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITHOUT_DISPLAYTEXT : LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITH_DISPLAYTEXT;
+    }
+    return hideDisplayText ? LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITHOUT_DISPLAYTEXT : LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_DISPLAYTEXT;
+  }
+  return hideDisplayText ? LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_DISPLAYTEXT : LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_DISPLAYTEXT;
+};
 
 /**
- * Loader / skeleton for the Link Picker. Takes displayText prop - when no displayText is given the height of the skeleton
- * is shorter to prevent jump when loading in Link Picker.
+ * Loader / skeleton for the Link Picker. Takes LoaderFallbackProps (hideDisplayText, isLoadingPlugins, plugins)
+ * to determine the height to prevent jumps in height when loading
  */
-export var LoaderFallback = function LoaderFallback(_ref) {
-  var hideDisplayText = _ref.hideDisplayText;
-  return jsx("div", {
-    css: hideDisplayText ? rootContainerStylesForLoaderWithoutDisplaytext : rootContainerStylesForLoaderWithDisplaytext,
+export var LoaderFallback = function LoaderFallback(props) {
+  var minHeight = getEstimatedMinHeight(props);
+  return jsx(MinHeightContainer, {
+    minHeight: minHeight,
     "data-testid": "link-picker-root-loader-boundary-ui"
   }, jsx(Spinner, {
     testId: "link-picker.component-loading-indicator",

package/dist/esm/ui/styled.js

@@ -0,0 +1,5 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject;
+import { css } from '@emotion/react';
+import { LINK_PICKER_WIDTH_IN_PX } from '../common/constants';
+export var fixedWidthContainerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: ", "px;\n"])), LINK_PICKER_WIDTH_IN_PX);

package/dist/esm/version.json

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

package/dist/types/common/constants.d.ts

@@ -2,3 +2,8 @@ export declare const ANALYTICS_CHANNEL = "media";
 export declare const COMPONENT_NAME = "linkPicker";
 export declare const RECENT_SEARCH_LIST_SIZE = 5;
 export declare const LINK_PICKER_WIDTH_IN_PX = 342;
+export declare const LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITHOUT_DISPLAYTEXT = "472px";
+export declare const LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITH_DISPLAYTEXT = "550px";
+export declare const LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_DISPLAYTEXT = "218px";
+export declare const LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITHOUT_DISPLAYTEXT = "141px";
+export declare const LINK_PICKER_MIN_HEIGHT_IN_PX_FALLBACK = "290px";

package/dist/types/common/ui/min-height-container/index.d.ts

@@ -0,0 +1,5 @@
+/** @jsx jsx */
+import React from 'react';
+export declare const MinHeightContainer: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    minHeight: string;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/types/common/ui/min-height-container/styled.d.ts

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

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

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

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

@@ -1,8 +1,10 @@
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { PackageMetaDataType } from '../common/utils/analytics/analytics.codegen';
 import { LinkPickerProps } from './link-picker';
 export declare const testIds: {
     linkPickerRoot: string;
 };
 export declare const PACKAGE_DATA: PackageMetaDataType;
-export declare const ComposedLinkPicker: React.MemoExoticComponent<(props: LinkPickerProps) => JSX.Element>;
+export declare const ComposedLinkPicker: React.MemoExoticComponent<(props: LinkPickerProps) => jsx.JSX.Element>;

package/dist/types/ui/loader-fallback/index.d.ts

@@ -1,9 +1,12 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
+export type LoaderFallbackProps = {
+    hideDisplayText?: boolean;
+    isLoadingPlugins?: boolean;
+    plugins?: unknown[];
+};
 /**
- * Loader / skeleton for the Link Picker. Takes displayText prop - when no displayText is given the height of the skeleton
- * is shorter to prevent jump when loading in Link Picker.
+ * Loader / skeleton for the Link Picker. Takes LoaderFallbackProps (hideDisplayText, isLoadingPlugins, plugins)
+ * to determine the height to prevent jumps in height when loading
  */
-export declare const LoaderFallback: ({ hideDisplayText, }: {
-    hideDisplayText?: boolean | undefined;
-}) => jsx.JSX.Element;
+export declare const LoaderFallback: (props: LoaderFallbackProps) => jsx.JSX.Element;

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

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

package/dist/types-ts4.5/common/constants.d.ts

@@ -2,3 +2,8 @@ export declare const ANALYTICS_CHANNEL = "media";
 export declare const COMPONENT_NAME = "linkPicker";
 export declare const RECENT_SEARCH_LIST_SIZE = 5;
 export declare const LINK_PICKER_WIDTH_IN_PX = 342;
+export declare const LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITHOUT_DISPLAYTEXT = "472px";
+export declare const LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITH_DISPLAYTEXT = "550px";
+export declare const LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_DISPLAYTEXT = "218px";
+export declare const LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITHOUT_DISPLAYTEXT = "141px";
+export declare const LINK_PICKER_MIN_HEIGHT_IN_PX_FALLBACK = "290px";

package/dist/types-ts4.5/common/ui/min-height-container/index.d.ts

@@ -0,0 +1,5 @@
+/** @jsx jsx */
+import React from 'react';
+export declare const MinHeightContainer: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    minHeight: string;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/types-ts4.5/common/ui/min-height-container/styled.d.ts

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

package/dist/types-ts4.5/ui/error-boundary/error-boundary-fallback/styled.d.ts

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

package/dist/types-ts4.5/ui/index.d.ts

@@ -1,8 +1,10 @@
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { PackageMetaDataType } from '../common/utils/analytics/analytics.codegen';
 import { LinkPickerProps } from './link-picker';
 export declare const testIds: {
     linkPickerRoot: string;
 };
 export declare const PACKAGE_DATA: PackageMetaDataType;
-export declare const ComposedLinkPicker: React.MemoExoticComponent<(props: LinkPickerProps) => JSX.Element>;
+export declare const ComposedLinkPicker: React.MemoExoticComponent<(props: LinkPickerProps) => jsx.JSX.Element>;

package/dist/types-ts4.5/ui/loader-fallback/index.d.ts

@@ -1,9 +1,12 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
+export type LoaderFallbackProps = {
+    hideDisplayText?: boolean;
+    isLoadingPlugins?: boolean;
+    plugins?: unknown[];
+};
 /**
- * Loader / skeleton for the Link Picker. Takes displayText prop - when no displayText is given the height of the skeleton
- * is shorter to prevent jump when loading in Link Picker.
+ * Loader / skeleton for the Link Picker. Takes LoaderFallbackProps (hideDisplayText, isLoadingPlugins, plugins)
+ * to determine the height to prevent jumps in height when loading
  */
-export declare const LoaderFallback: ({ hideDisplayText, }: {
-    hideDisplayText?: boolean | undefined;
-}) => jsx.JSX.Element;
+export declare const LoaderFallback: (props: LoaderFallbackProps) => jsx.JSX.Element;

package/dist/types-ts4.5/ui/styled.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-picker",
-  "version": "1.25.6",
+  "version": "1.26.0",
   "description": "Standalone link picker",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
@@ -39,6 +39,9 @@
     },
     "platform.linking-platform.link-picker.lazy-intl-messages": {
       "type": "boolean"
+    },
+    "platform.linking-platform.link-picker.fixed-height-search-results": {
+      "type": "boolean"
     }
   },
   "scripts": {
@@ -57,7 +60,7 @@
     "@atlaskit/platform-feature-flags": "^0.2.1",
     "@atlaskit/spinner": "^15.5.0",
     "@atlaskit/tabs": "^13.4.0",
-    "@atlaskit/textfield": "^5.5.0",
+    "@atlaskit/textfield": "^5.6.0",
     "@atlaskit/theme": "^12.5.0",
     "@atlaskit/tokens": "^1.11.0",
     "@atlaskit/tooltip": "^17.8.0",
@@ -78,21 +81,14 @@
   "devDependencies": {
     "@af/analytics-codegen": "^0.1.0",
     "@af/visual-regression": "*",
-    "@atlaskit/docs": "*",
     "@atlaskit/dropdown-menu": "^11.10.0",
-    "@atlaskit/link-analytics": "^8.2.0",
     "@atlaskit/link-provider": "^1.6.0",
     "@atlaskit/link-test-helpers": "^4.1.0",
     "@atlaskit/linking-common": "^3.2.0",
-    "@atlaskit/popup": "^1.8.0",
-    "@atlaskit/toggle": "^12.6.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
     "@atlassian/feature-flags-test-utils": "*",
-    "@atlassian/link-picker-atlassian-plugin": "^34.1.0",
-    "@atlassian/link-picker-plugins": "^23.0.0",
-    "@atlassian/recent-work-client": "^1.8.0",
     "@testing-library/dom": "^8.17.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.5",
@@ -128,6 +124,9 @@
       "design-tokens": [
         "color",
         "spacing"
+      ],
+      "imports": [
+        "import-no-extraneous-disable-for-examples-and-docs"
       ]
     }
   },

package/report.api.md

@@ -17,6 +17,7 @@
 ```ts
 /// <reference types="react" />
 
+import { jsx } from '@emotion/react';
 import { MessageDescriptor } from 'react-intl-next';
 import { default as React_2 } from 'react';
 import { ReactNode } from 'react';
@@ -27,7 +28,7 @@ export type LinkInputType = 'manual' | 'typeAhead';
 
 // @public (undocumented)
 export const LinkPicker: React_2.MemoExoticComponent<
-  (props: LinkPickerProps) => JSX.Element
+  (props: LinkPickerProps) => jsx.JSX.Element
 >;
 
 // @public (undocumented)

package/tmp/api-report-tmp.d.ts

@@ -6,6 +6,7 @@
 
 /// <reference types="react" />
 
+import { jsx } from '@emotion/react';
 import { MessageDescriptor } from 'react-intl-next';
 import { default as React_2 } from 'react';
 import { ReactNode } from 'react';
@@ -15,7 +16,7 @@ import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
 export type LinkInputType = 'manual' | 'typeAhead';
 
 // @public (undocumented)
-export const LinkPicker: React_2.MemoExoticComponent<(props: LinkPickerProps) => JSX.Element>;
+export const LinkPicker: React_2.MemoExoticComponent<(props: LinkPickerProps) => jsx.JSX.Element>;
 
 // @public (undocumented)
 export interface LinkPickerPlugin {

package/dist/cjs/ui/loader-fallback/styled.js

@@ -1,21 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.rootContainerStylesForLoaderWithoutDisplaytext = exports.rootContainerStylesForLoaderWithDisplaytext = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = require("@emotion/react");
-var _styled = require("../link-picker/styled");
-var _templateObject, _templateObject2, _templateObject3; // eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
-/** Link Picker loader / skeleton will be taller in height when displayText field is shown */ // See lazy-load-height example to verify these
-var LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_DISPLAYTEXT = 142;
-var LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_DISPLAYTEXT = 220;
-var rootContainerStylesForLoader = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), _styled.rootContainerStyles);
-var rootContainerStylesForLoaderWithDisplaytext = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  min-height: ", "px;\n"])), rootContainerStylesForLoader, LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_DISPLAYTEXT);
-
-/** Link Picker loader / skeleton will be shorter in height when displayText field isn't shown */
-exports.rootContainerStylesForLoaderWithDisplaytext = rootContainerStylesForLoaderWithDisplaytext;
-var rootContainerStylesForLoaderWithoutDisplaytext = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  min-height: ", "px;\n"])), rootContainerStylesForLoader, LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_DISPLAYTEXT);
-exports.rootContainerStylesForLoaderWithoutDisplaytext = rootContainerStylesForLoaderWithoutDisplaytext;

package/dist/es2019/ui/loader-fallback/styled.js

@@ -1,25 +0,0 @@
-import { css } from '@emotion/react';
-
-// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
-import { rootContainerStyles } from '../link-picker/styled';
-
-/** Link Picker loader / skeleton will be taller in height when displayText field is shown */
-// See lazy-load-height example to verify these
-const LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_DISPLAYTEXT = 142;
-const LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_DISPLAYTEXT = 220;
-const rootContainerStylesForLoader = css`
-  ${rootContainerStyles}
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-export const rootContainerStylesForLoaderWithDisplaytext = css`
-  ${rootContainerStylesForLoader}
-  min-height: ${LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_DISPLAYTEXT}px;
-`;
-
-/** Link Picker loader / skeleton will be shorter in height when displayText field isn't shown */
-export const rootContainerStylesForLoaderWithoutDisplaytext = css`
-  ${rootContainerStylesForLoader}
-  min-height: ${LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_DISPLAYTEXT}px;
-`;

package/dist/esm/ui/loader-fallback/styled.js

@@ -1,16 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3;
-import { css } from '@emotion/react';
-
-// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
-import { rootContainerStyles } from '../link-picker/styled';
-
-/** Link Picker loader / skeleton will be taller in height when displayText field is shown */
-// See lazy-load-height example to verify these
-var LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_DISPLAYTEXT = 142;
-var LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_DISPLAYTEXT = 220;
-var rootContainerStylesForLoader = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), rootContainerStyles);
-export var rootContainerStylesForLoaderWithDisplaytext = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  min-height: ", "px;\n"])), rootContainerStylesForLoader, LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_DISPLAYTEXT);
-
-/** Link Picker loader / skeleton will be shorter in height when displayText field isn't shown */
-export var rootContainerStylesForLoaderWithoutDisplaytext = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n  min-height: ", "px;\n"])), rootContainerStylesForLoader, LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_DISPLAYTEXT);

package/dist/types/ui/loader-fallback/styled.d.ts

@@ -1,3 +0,0 @@
-export declare const rootContainerStylesForLoaderWithDisplaytext: import("@emotion/react").SerializedStyles;
-/** Link Picker loader / skeleton will be shorter in height when displayText field isn't shown */
-export declare const rootContainerStylesForLoaderWithoutDisplaytext: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/ui/loader-fallback/styled.d.ts

@@ -1,3 +0,0 @@
-export declare const rootContainerStylesForLoaderWithDisplaytext: import("@emotion/react").SerializedStyles;
-/** Link Picker loader / skeleton will be shorter in height when displayText field isn't shown */
-export declare const rootContainerStylesForLoaderWithoutDisplaytext: import("@emotion/react").SerializedStyles;