@atlaskit/link-picker 1.45.1 → 1.46.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/link-picker
 
+## 1.46.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.46.0
+
+### Minor Changes
+
+- [#145714](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/145714)
+  [`bf057f6cc9712`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bf057f6cc9712) -
+  Updates the search results section to have a minimum height (by cleanup of ff
+  platform.linking-platform.link-picker.fixed-height-search-results). Can be opt-ed out by using the
+  newly added `adaptiveHeight` prop.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.45.1
 
 ### Patch Changes

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

@@ -6,20 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 exports.ErrorBoundaryFallback = void 0;
 var _react = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("../../../common/constants");
 var _genericErrorSvg = require("../../../common/generic-error-svg");
 var _emptyState = require("../../../common/ui/empty-state");
 var _minHeightContainer = require("../../../common/ui/min-height-container");
-var _styled = require("../../link-picker/styled");
 /**
  * @jsxRuntime classic
  * @jsx jsx
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
-// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
-
 var errorBoundaryFallbackStyles = (0, _react.css)({
   lineHeight: 'initial'
 });
@@ -39,30 +35,15 @@ var ErrorBoundaryFallback = exports.ErrorBoundaryFallback = function ErrorBounda
   var intl = (0, _reactIntlNext.useIntl)();
   var header = intl.formatMessage(messages.heading);
   var description = intl.formatMessage(messages.description);
-  if ((0, _platformFeatureFlags.fg)('platform.linking-platform.link-picker.fixed-height-search-results')) {
-    return (0, _react.jsx)(_minHeightContainer.MinHeightContainer, {
-      css: errorBoundaryFallbackStyles,
-      minHeight: _constants.LINK_PICKER_MIN_HEIGHT_IN_PX_FALLBACK,
-      "data-testid": "link-picker-root-error-boundary-ui"
-    }, (0, _react.jsx)(_emptyState.EmptyState, {
-      header: header,
-      renderImage: function renderImage() {
-        return (0, _react.jsx)(_genericErrorSvg.GenericErrorSVG, null);
-      },
-      description: description
-    }));
-  }
-  return (
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    (0, _react.jsx)("div", {
-      css: _styled.rootContainerStyles,
-      "data-testid": "link-picker-root-error-boundary-ui"
-    }, (0, _react.jsx)(_emptyState.EmptyState, {
-      header: header,
-      renderImage: function renderImage() {
-        return (0, _react.jsx)(_genericErrorSvg.GenericErrorSVG, null);
-      },
-      description: description
-    }))
-  );
+  return (0, _react.jsx)(_minHeightContainer.MinHeightContainer, {
+    css: errorBoundaryFallbackStyles,
+    minHeight: _constants.LINK_PICKER_MIN_HEIGHT_IN_PX_FALLBACK,
+    "data-testid": "link-picker-root-error-boundary-ui"
+  }, (0, _react.jsx)(_emptyState.EmptyState, {
+    header: header,
+    renderImage: function renderImage() {
+      return (0, _react.jsx)(_genericErrorSvg.GenericErrorSVG, null);
+    },
+    description: description
+  }));
 };

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

@@ -29,7 +29,6 @@ var _formFooter = require("./form-footer");
 var _linkPickerSubmitButton = require("./form-footer/link-picker-submit-button");
 var _messages = require("./messages");
 var _searchResults = require("./search-results");
-var _styled = require("./styled");
 var _textInput = require("./text-input");
 var _trackMount = require("./track-mount");
 var _utils = require("./utils");
@@ -38,6 +37,19 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * @jsxRuntime classic
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var rootContainerStyles = (0, _react2.css)({
+  paddingLeft: 'var(--link-picker-padding-left)',
+  paddingRight: 'var(--link-picker-padding-right)',
+  paddingTop: 'var(--link-picker-padding-top)',
+  paddingBottom: 'var(--link-picker-padding-bottom)',
+  boxSizing: 'border-box',
+  lineHeight: 'initial',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+  display: 'block !important'
+});
+var formFooterMargin = (0, _react2.css)({
+  marginTop: "var(--ds-space-200, 16px)"
+});
 var testIds = exports.testIds = _objectSpread(_objectSpread(_objectSpread({
   linkPickerRoot: 'link-picker-root',
   linkPicker: 'link-picker',
@@ -101,6 +113,8 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
     customMessages = _ref.customMessages,
     _ref$isSubmitting = _ref.isSubmitting,
     isSubmitting = _ref$isSubmitting === void 0 ? false : _ref$isSubmitting,
+    _ref$adaptiveHeight = _ref.adaptiveHeight,
+    adaptiveHeight = _ref$adaptiveHeight === void 0 ? false : _ref$adaptiveHeight,
     _ref$UNSAFE_moveSubmi = _ref.UNSAFE_moveSubmitButton,
     UNSAFE_moveSubmitButton = _ref$UNSAFE_moveSubmi === void 0 ? false : _ref$UNSAFE_moveSubmi;
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
@@ -331,10 +345,8 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
   var screenReaderText = (0, _userAgent.browser)().safari && (0, _utils.getScreenReaderText)(items !== null && items !== void 0 ? items : [], selectedIndex, intl);
   var customSubmitButtonLabel = customMessages !== null && customMessages !== void 0 && customMessages.submitButtonLabel ? customMessages.submitButtonLabel : undefined;
   return (0, _react2.jsx)("form", {
-    "data-testid": testIds.linkPicker
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    ,
-    css: _styled.rootContainerStyles
+    "data-testid": testIds.linkPicker,
+    css: rootContainerStyles
     // Use onSubmitCapture instead of onSubmit so that any possible parent form isn't submitted
     ,
     onSubmitCapture: handleSubmit
@@ -403,6 +415,7 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
     handleSelected: handleSelected,
     handleTabChange: handleTabChange,
     handleSearchListOnChange: handleSearchListOnChange,
+    adaptiveHeight: adaptiveHeight,
     retry: retry
   }), (0, _react2.jsx)(_formFooter.FormFooter, {
     error: error,
@@ -417,7 +430,7 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
     action: pluginAction
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     ,
-    css: !queryState || !(plugins !== null && plugins !== void 0 && plugins.length) ? _styled.formFooterMargin : undefined
+    css: !queryState || !(plugins !== null && plugins !== void 0 && plugins.length) ? formFooterMargin : undefined
     /* Show the feature discovery pulse when we're on the Jira tab, we haven't started typing a url and
           the feature flag is enabled */,
     createFeatureDiscovery: (activePlugin === null || activePlugin === void 0 ? void 0 : activePlugin.tabKey) === 'jira' && allowCreateFeatureDiscovery && (0, _platformFeatureFlags.fg)('platform.linking-platform.link-picker.enable-jira-create'),

package/dist/cjs/ui/link-picker/search-results/index.js

@@ -6,14 +6,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.testIds = exports.SearchResults = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _primitives = require("@atlaskit/primitives");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner/spinner"));
 var _tabs = _interopRequireWildcard(require("@atlaskit/tabs"));
-var _useFixHeight = require("../../../controllers/use-fix-height");
 var _linkSearchError = require("./link-search-error");
 var _linkSearchList = require("./link-search-list");
 var _scrollingTabs = require("./scrolling-tabs");
@@ -61,20 +59,20 @@ var SearchResults = exports.SearchResults = function SearchResults(_ref) {
     selectedIndex = _ref.selectedIndex,
     handleSelected = _ref.handleSelected,
     handleKeyDown = _ref.handleKeyDown,
+    adaptiveHeight = _ref.adaptiveHeight,
     retry = _ref.retry;
   var isActivePlugin = !!activePlugin;
-
-  // This will be redundant if we move towards fixed height search results section
-  var fixListHeightProps = (0, _useFixHeight.useFixHeight)(isLoadingResults);
   var tabList = (0, _react2.jsx)(_tabs.TabList, null, tabs.map(function (tab) {
     return (0, _react2.jsx)(_tabs.Tab, {
       key: tab.tabTitle,
       testId: testIds.tabItem
     }, tab.tabTitle);
   }));
-  return (0, _react2.jsx)(_searchResultsContainer.SearchResultsContainer, (0, _extends2.default)({
-    hasTabs: !!tabs.length || isLoadingPlugins
-  }, fixListHeightProps), isLoadingPlugins && !!queryState && (0, _react2.jsx)("div", {
+  return (0, _react2.jsx)(_searchResultsContainer.SearchResultsContainer, {
+    hasTabs: !!tabs.length || isLoadingPlugins,
+    adaptiveHeight: adaptiveHeight,
+    isLoadingResults: isLoadingResults
+  }, isLoadingPlugins && !!queryState && (0, _react2.jsx)("div", {
     css: spinnerContainerStyles
   }, (0, _react2.jsx)(_spinner.default, {
     testId: testIds.tabsLoadingIndicator,
@@ -101,6 +99,7 @@ var SearchResults = exports.SearchResults = function SearchResults(_ref) {
     onChange: handleSearchListOnChange,
     onKeyDown: handleKeyDown,
     hasSearchTerm: !!(queryState !== null && queryState !== void 0 && queryState.query.length),
-    activePlugin: activePlugin
+    activePlugin: activePlugin,
+    adaptiveHeight: adaptiveHeight
   }), error ? (_activePlugin$errorFa = activePlugin === null || activePlugin === void 0 || (_activePlugin$errorFa2 = activePlugin.errorFallback) === null || _activePlugin$errorFa2 === void 0 ? void 0 : _activePlugin$errorFa2.call(activePlugin, error, retry)) !== null && _activePlugin$errorFa !== void 0 ? _activePlugin$errorFa : (0, _react2.jsx)(_linkSearchError.LinkSearchError, null) : null));
 };

package/dist/cjs/ui/link-picker/search-results/link-search-list/index.js

@@ -21,7 +21,7 @@ var _linkSearchNoResults = require("./link-search-no-results");
 var _listItem = require("./list-item");
 var _styled = require("./styled");
 var _useTrackResultsShown = require("./use-track-results-shown");
-var _excluded = ["onChange", "onSelect", "onKeyDown", "items", "activeIndex", "selectedIndex", "isLoading", "ariaControls", "ariaLabelledBy", "ariaReadOnly", "role", "id", "hasSearchTerm", "activePlugin"];
+var _excluded = ["onChange", "onSelect", "onKeyDown", "items", "activeIndex", "selectedIndex", "isLoading", "ariaControls", "ariaLabelledBy", "ariaReadOnly", "role", "id", "hasSearchTerm", "activePlugin", "adaptiveHeight"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
  * @jsxRuntime classic
@@ -69,6 +69,7 @@ var LinkSearchList = exports.LinkSearchList = /*#__PURE__*/(0, _react.forwardRef
     id = _ref.id,
     hasSearchTerm = _ref.hasSearchTerm,
     activePlugin = _ref.activePlugin,
+    adaptiveHeight = _ref.adaptiveHeight,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var itemsContent;
   var loadingContent;
@@ -140,7 +141,7 @@ var LinkSearchList = exports.LinkSearchList = /*#__PURE__*/(0, _react.forwardRef
     }))), (0, _react2.jsx)("ul", {
       id: id,
       role: role
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
       ,
       css: _styled.listStyles,
       "aria-controls": "fabric.smartcard.linkpicker.suggested.results",
@@ -170,8 +171,8 @@ var LinkSearchList = exports.LinkSearchList = /*#__PURE__*/(0, _react.forwardRef
   }
   if (isLoading) {
     loadingContent = (0, _react2.jsx)(_minHeightContainer.MinHeightContainer, {
-      minHeight: (0, _platformFeatureFlags.fg)('platform.linking-platform.link-picker.fixed-height-search-results') ? '50px' : '80px'
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      minHeight: adaptiveHeight ? '80px' : '50px'
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
       ,
       css: _styled.spinnerContainerStyles
     }, (0, _react2.jsx)(_spinner.default, {

package/dist/cjs/ui/link-picker/search-results/search-results-container/index.js

@@ -1,38 +1,43 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SearchResultsContainer = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _minHeightContainer = require("../../../../common/ui/min-height-container");
-var _excluded = ["hasTabs"];
 /**
  * @jsxRuntime classic
  * @jsx jsx
  */
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 var flexColumn = (0, _react2.css)({
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'flex-start',
   width: '100%'
 });
-var SearchResultsContainer = exports.SearchResultsContainer = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+var SearchResultsContainer = exports.SearchResultsContainer = function SearchResultsContainer(_ref) {
   var hasTabs = _ref.hasTabs,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var minHeight = hasTabs ? '347px' : '302px';
-  var ffMinHeight = (0, _platformFeatureFlags.fg)('platform.linking-platform.link-picker.fixed-height-search-results') ? minHeight : 'auto';
-
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  return (0, _react2.jsx)(_minHeightContainer.MinHeightContainer, (0, _extends2.default)({
+    adaptiveHeight = _ref.adaptiveHeight,
+    isLoadingResults = _ref.isLoadingResults,
+    children = _ref.children;
+  var ref = (0, _react.useRef)(null);
+  var currentHeight = (0, _react.useRef)(null);
+  var fixedMinHeight = hasTabs ? '347px' : '302px';
+  var adaptiveMinHeight = isLoadingResults && !!currentHeight.current ? "".concat(currentHeight.current, "px") : 'auto';
+  var minheight = adaptiveHeight ? adaptiveMinHeight : fixedMinHeight;
+  (0, _react.useLayoutEffect)(function () {
+    if (ref.current && adaptiveHeight && !isLoadingResults) {
+      currentHeight.current = ref.current.getBoundingClientRect().height;
+    }
+  });
+  return (0, _react2.jsx)(_minHeightContainer.MinHeightContainer, {
     ref: ref,
-    minHeight: ffMinHeight,
+    minHeight: minheight,
     css: flexColumn
-  }, props));
-});
+  }, children);
+};

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

@@ -6,7 +6,6 @@ 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 _minHeightContainer = require("../../common/ui/min-height-container");
 /**
@@ -24,36 +23,30 @@ var LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_PLUGIN_WITH_DISPLAYTEXT = '50
 var LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_PLUGIN_WITHOUT_DISPLAYTEXT = '429px';
 var LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_DISPLAYTEXT = '218px';
 var LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITHOUT_DISPLAYTEXT = '141px';
-// 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,
     url = _ref.url;
-  if ((0, _platformFeatureFlags.fg)('platform.linking-platform.link-picker.fixed-height-search-results')) {
+  /**
+   * "Insert mode" (search results shown initially)
+   */
+  if (!url) {
     /**
-     * "Insert mode" (search results shown initially)
+     * With tabs
      */
-    if (!url) {
-      /**
-       * With tabs
-       */
-      if (plugins && plugins.length > 1 || isLoadingPlugins) {
-        return hideDisplayText ? LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITHOUT_DISPLAYTEXT : LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITH_DISPLAYTEXT;
-      }
+    if (plugins && plugins.length > 1 || isLoadingPlugins) {
+      return hideDisplayText ? LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITHOUT_DISPLAYTEXT : LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITH_DISPLAYTEXT;
+    }
 
-      /**
-       * Without tabs
-       */
-      if ((plugins === null || plugins === void 0 ? void 0 : plugins.length) === 1) {
-        return hideDisplayText ? LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_PLUGIN_WITHOUT_DISPLAYTEXT : LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_PLUGIN_WITH_DISPLAYTEXT;
-      }
+    /**
+     * Without tabs
+     */
+    if ((plugins === null || plugins === void 0 ? void 0 : plugins.length) === 1) {
+      return hideDisplayText ? LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_PLUGIN_WITHOUT_DISPLAYTEXT : LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_PLUGIN_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;
+  return hideDisplayText ? LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITHOUT_DISPLAYTEXT : LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_DISPLAYTEXT;
 };
 
 /**

package/dist/cjs/ui/main.js

@@ -12,7 +12,6 @@ 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 _errorBoundary = require("./error-boundary");
@@ -32,7 +31,7 @@ var testIds = exports.testIds = {
 };
 var PACKAGE_DATA = exports.PACKAGE_DATA = {
   packageName: "@atlaskit/link-picker" || '',
-  packageVersion: "1.45.1" || '',
+  packageVersion: "1.46.1" || '',
   componentName: _constants.COMPONENT_NAME,
   source: _constants.COMPONENT_NAME
 };
@@ -55,26 +54,18 @@ var composeLinkPicker = exports.composeLinkPicker = function composeLinkPicker(C
     var _props$paddingLeft, _props$paddingRight, _props$paddingTop, _props$paddingBottom, _ref2;
     var component = props.component;
     var RootComponent = component !== null && component !== void 0 ? component : DefaultRootComponent;
-
-    /**
-     * 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.fg)('platform.linking-platform.link-picker.fixed-height-search-results') ? FixedWidthContainer : _react.Fragment;
-    var LoaderFallbackContainer = (0, _platformFeatureFlags.fg)('platform.linking-platform.link-picker.fixed-height-search-results') ? _react.Fragment : FixedWidthContainer;
     return (0, _react2.jsx)(_analyticsNext.AnalyticsContext, {
       data: PACKAGE_DATA
     }, (0, _react2.jsx)(_sessionProvider.LinkPickerSessionProvider, null, (0, _react2.jsx)(_messagesProvider.MessagesProvider, null, (0, _react2.jsx)("div", {
       style: (_ref2 = {}, (0, _defineProperty2.default)(_ref2, '--link-picker-width', props.disableWidth ? '100%' : // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       "".concat(_constants.LINK_PICKER_WIDTH_IN_PX, "px")), (0, _defineProperty2.default)(_ref2, '--link-picker-padding-left', (_props$paddingLeft = props.paddingLeft) !== null && _props$paddingLeft !== void 0 ? _props$paddingLeft : "var(--ds-space-200, 16px)"), (0, _defineProperty2.default)(_ref2, '--link-picker-padding-right', (_props$paddingRight = props.paddingRight) !== null && _props$paddingRight !== void 0 ? _props$paddingRight : "var(--ds-space-200, 16px)"), (0, _defineProperty2.default)(_ref2, '--link-picker-padding-top', (_props$paddingTop = props.paddingTop) !== null && _props$paddingTop !== void 0 ? _props$paddingTop : "var(--ds-space-200, 16px)"), (0, _defineProperty2.default)(_ref2, '--link-picker-padding-bottom', (_props$paddingBottom = props.paddingBottom) !== null && _props$paddingBottom !== void 0 ? _props$paddingBottom : "var(--ds-space-200, 16px)"), _ref2)
-    }, (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, {
+    }, (0, _react2.jsx)(FixedWidthContainer, null, (0, _react2.jsx)(_errorBoundary.ErrorBoundary, null, (0, _react2.jsx)(_reactLooselyLazy.LazySuspense, {
+      fallback: (0, _react2.jsx)(_loaderFallback.LoaderFallback, {
         url: props.url,
         hideDisplayText: props.hideDisplayText,
         isLoadingPlugins: props.isLoadingPlugins,
         plugins: props.plugins
-      }))
+      })
     }, (0, _react2.jsx)(RootComponent, (0, _extends2.default)({}, props, {
       "data-testid": testIds.linkPickerRoot
     }), (0, _react2.jsx)(Component, props)))))))));

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

@@ -5,13 +5,10 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { defineMessages, useIntl } from 'react-intl-next';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { LINK_PICKER_MIN_HEIGHT_IN_PX_FALLBACK } from '../../../common/constants';
 import { GenericErrorSVG } from '../../../common/generic-error-svg';
 import { EmptyState } from '../../../common/ui/empty-state';
 import { MinHeightContainer } from '../../../common/ui/min-height-container';
-// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
-import { rootContainerStyles } from '../../link-picker/styled';
 const errorBoundaryFallbackStyles = css({
   lineHeight: 'initial'
 });
@@ -31,26 +28,13 @@ export const ErrorBoundaryFallback = () => {
   const intl = useIntl();
   const header = intl.formatMessage(messages.heading);
   const description = intl.formatMessage(messages.description);
-  if (fg('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 (
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    jsx("div", {
-      css: rootContainerStyles,
-      "data-testid": "link-picker-root-error-boundary-ui"
-    }, jsx(EmptyState, {
-      header: header,
-      renderImage: () => jsx(GenericErrorSVG, null),
-      description: description
-    }))
-  );
+  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
+  }));
 };

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

@@ -6,7 +6,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import { Fragment, memo, useCallback, useLayoutEffect, useMemo, useReducer } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import uuid from 'uuid';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
@@ -26,10 +26,22 @@ import { FormFooter, testIds as formFooterTestIds } from './form-footer';
 import { LinkPickerSubmitButton } from './form-footer/link-picker-submit-button';
 import { formMessages, linkMessages, linkTextMessages, searchMessages } from './messages';
 import { SearchResults, testIds as searchTestIds } from './search-results';
-import { formFooterMargin, rootContainerStyles } from './styled';
 import { testIds as textFieldTestIds, TextInput } from './text-input';
 import { TrackMount } from './track-mount';
 import { getDataSource, getScreenReaderText } from './utils';
+const rootContainerStyles = css({
+  paddingLeft: 'var(--link-picker-padding-left)',
+  paddingRight: 'var(--link-picker-padding-right)',
+  paddingTop: 'var(--link-picker-padding-top)',
+  paddingBottom: 'var(--link-picker-padding-bottom)',
+  boxSizing: 'border-box',
+  lineHeight: 'initial',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+  display: 'block !important'
+});
+const formFooterMargin = css({
+  marginTop: "var(--ds-space-200, 16px)"
+});
 export const testIds = {
   linkPickerRoot: 'link-picker-root',
   linkPicker: 'link-picker',
@@ -99,6 +111,7 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
   featureFlags,
   customMessages,
   isSubmitting = false,
+  adaptiveHeight = false,
   UNSAFE_moveSubmitButton = false
 }) => {
   const {
@@ -332,9 +345,7 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
   const screenReaderText = browser().safari && getScreenReaderText(items !== null && items !== void 0 ? items : [], selectedIndex, intl);
   const customSubmitButtonLabel = customMessages !== null && customMessages !== void 0 && customMessages.submitButtonLabel ? customMessages.submitButtonLabel : undefined;
   return jsx("form", {
-    "data-testid": testIds.linkPicker
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    ,
+    "data-testid": testIds.linkPicker,
     css: rootContainerStyles
     // Use onSubmitCapture instead of onSubmit so that any possible parent form isn't submitted
     ,
@@ -404,6 +415,7 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
     handleSelected: handleSelected,
     handleTabChange: handleTabChange,
     handleSearchListOnChange: handleSearchListOnChange,
+    adaptiveHeight: adaptiveHeight,
     retry: retry
   }), jsx(FormFooter, {
     error: error,

package/dist/es2019/ui/link-picker/search-results/index.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -10,7 +9,6 @@ import { css, jsx } from '@emotion/react';
 import { Box, xcss } from '@atlaskit/primitives';
 import Spinner from '@atlaskit/spinner/spinner';
 import Tabs, { Tab, TabList } from '@atlaskit/tabs';
-import { useFixHeight } from '../../../controllers/use-fix-height';
 import { LinkSearchError, testIds as searchErrorTestIds } from './link-search-error';
 import { LinkSearchList, testIds as listTestIds } from './link-search-list';
 import { ScrollingTabList } from './scrolling-tabs';
@@ -52,20 +50,20 @@ export const SearchResults = ({
   selectedIndex,
   handleSelected,
   handleKeyDown,
+  adaptiveHeight,
   retry
 }) => {
   var _activePlugin$errorFa, _activePlugin$errorFa2;
   const isActivePlugin = !!activePlugin;
-
-  // This will be redundant if we move towards fixed height search results section
-  const fixListHeightProps = useFixHeight(isLoadingResults);
   const tabList = jsx(TabList, null, tabs.map(tab => jsx(Tab, {
     key: tab.tabTitle,
     testId: testIds.tabItem
   }, tab.tabTitle)));
-  return jsx(SearchResultsContainer, _extends({
-    hasTabs: !!tabs.length || isLoadingPlugins
-  }, fixListHeightProps), isLoadingPlugins && !!queryState && jsx("div", {
+  return jsx(SearchResultsContainer, {
+    hasTabs: !!tabs.length || isLoadingPlugins,
+    adaptiveHeight: adaptiveHeight,
+    isLoadingResults: isLoadingResults
+  }, isLoadingPlugins && !!queryState && jsx("div", {
     css: spinnerContainerStyles
   }, jsx(Spinner, {
     testId: testIds.tabsLoadingIndicator,
@@ -92,6 +90,7 @@ export const SearchResults = ({
     onChange: handleSearchListOnChange,
     onKeyDown: handleKeyDown,
     hasSearchTerm: !!(queryState !== null && queryState !== void 0 && queryState.query.length),
-    activePlugin: activePlugin
+    activePlugin: activePlugin,
+    adaptiveHeight: adaptiveHeight
   }), error ? (_activePlugin$errorFa = activePlugin === null || activePlugin === void 0 ? void 0 : (_activePlugin$errorFa2 = activePlugin.errorFallback) === null || _activePlugin$errorFa2 === void 0 ? void 0 : _activePlugin$errorFa2.call(activePlugin, error, retry)) !== null && _activePlugin$errorFa !== void 0 ? _activePlugin$errorFa : jsx(LinkSearchError, null) : null));
 };

package/dist/es2019/ui/link-picker/search-results/link-search-list/index.js

@@ -61,6 +61,7 @@ export const LinkSearchList = /*#__PURE__*/forwardRef(({
   id,
   hasSearchTerm,
   activePlugin,
+  adaptiveHeight,
   ...restProps
 }, ref) => {
   var _activePlugin$uiOptio;
@@ -134,7 +135,7 @@ export const LinkSearchList = /*#__PURE__*/forwardRef(({
     }))), jsx("ul", {
       id: id,
       role: role
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
       ,
       css: listStyles,
       "aria-controls": "fabric.smartcard.linkpicker.suggested.results",
@@ -158,8 +159,8 @@ export const LinkSearchList = /*#__PURE__*/forwardRef(({
   }
   if (isLoading) {
     loadingContent = jsx(MinHeightContainer, {
-      minHeight: fg('platform.linking-platform.link-picker.fixed-height-search-results') ? '50px' : '80px'
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      minHeight: adaptiveHeight ? '80px' : '50px'
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
       ,
       css: spinnerContainerStyles
     }, jsx(Spinner, {