@atlaskit/link-picker 1.39.2 → 1.39.4

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/link-picker
 
+## 1.39.4
+
+### Patch Changes
+
+- [#121030](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/121030)
+  [`23d9b73dfcb67`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/23d9b73dfcb67) -
+  Adding loading skeleton to issue goals and exporting the LoaderFallback in linking platform
+
+## 1.39.3
+
+### Patch Changes
+
+- [#119779](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/119779)
+  [`1915b904e58c6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1915b904e58c6) -
+  Improves the height of the suspense fallback when mounting the picker with a url prop (behind ff).
+- Updated dependencies
+
 ## 1.39.2
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -10,6 +10,12 @@ Object.defineProperty(exports, "LinkPicker", {
     return _ui.default;
   }
 });
+Object.defineProperty(exports, "LoaderFallback", {
+  enumerable: true,
+  get: function get() {
+    return _loaderFallback.LoaderFallback;
+  }
+});
 Object.defineProperty(exports, "UnauthenticatedError", {
   enumerable: true,
   get: function get() {
@@ -17,4 +23,5 @@ Object.defineProperty(exports, "UnauthenticatedError", {
   }
 });
 var _ui = _interopRequireDefault(require("./ui"));
-var _errors = require("./common/utils/errors");
+var _errors = require("./common/utils/errors");
+var _loaderFallback = require("./ui/loader-fallback");

package/dist/cjs/ui/index.js

@@ -26,7 +26,7 @@ var testIds = exports.testIds = {
 };
 var PACKAGE_DATA = exports.PACKAGE_DATA = {
   packageName: "@atlaskit/link-picker" || '',
-  packageVersion: "1.39.2" || '',
+  packageVersion: "1.39.4" || '',
   componentName: _constants.COMPONENT_NAME,
   source: _constants.COMPONENT_NAME
 };
@@ -63,8 +63,8 @@ var ComposedLinkPicker = /*#__PURE__*/(0, _react.memo)(function (props) {
    * 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;
+  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", {
@@ -72,6 +72,7 @@ var ComposedLinkPicker = /*#__PURE__*/(0, _react.memo)(function (props) {
     "".concat(_constants.LINK_PICKER_WIDTH_IN_PX, "px")), (0, _defineProperty2.default)(_ref3, '--link-picker-padding-left', (_props$paddingLeft = props.paddingLeft) !== null && _props$paddingLeft !== void 0 ? _props$paddingLeft : "var(--ds-space-200, 16px)"), (0, _defineProperty2.default)(_ref3, '--link-picker-padding-right', (_props$paddingRight = props.paddingRight) !== null && _props$paddingRight !== void 0 ? _props$paddingRight : "var(--ds-space-200, 16px)"), (0, _defineProperty2.default)(_ref3, '--link-picker-padding-top', (_props$paddingTop = props.paddingTop) !== null && _props$paddingTop !== void 0 ? _props$paddingTop : "var(--ds-space-200, 16px)"), (0, _defineProperty2.default)(_ref3, '--link-picker-padding-bottom', (_props$paddingBottom = props.paddingBottom) !== null && _props$paddingBottom !== void 0 ? _props$paddingBottom : "var(--ds-space-200, 16px)"), _ref3)
   }, (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, {
+      url: props.url,
       hideDisplayText: props.hideDisplayText,
       isLoadingPlugins: props.isLoadingPlugins,
       plugins: props.plugins

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

@@ -15,11 +15,25 @@ var _primitives = require("@atlaskit/primitives");
 var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _conditionalSpotlightTargetWrapper = require("./conditional-spotlight-target-wrapper");
-var _styled = require("./styled");
 var _utils = require("./utils");
 var _excluded = ["name", "label", "autoFocus", "onRedo", "onUndo", "onKeyDown", "onClear", "clearLabel", "error", "spotlightTargetName"];
 /** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+/**
+ * Overidding text input margin top which design system provides as a default spacer
+ * but it gets in the way of our layout
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var fieldStyles = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '> div': {
+    marginTop: 0
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  '& + &': {
+    marginTop: "var(--ds-space-200, 16px)"
+  }
+});
 var testIds = exports.testIds = {
   urlError: 'link-error',
   clearUrlButton: 'clear-text'
@@ -84,25 +98,22 @@ var TextInput = exports.TextInput = function TextInput(_ref) {
     label: clearLabel || '',
     primaryColor: "var(--ds-icon-subtle, #626F86)"
   })));
-  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, _react2.jsx)("div", {
-      css: _styled.fieldStyles
-    }, (0, _react2.jsx)(_form.Field, {
-      label: label,
-      name: name
-    }, function (_ref2) {
-      var fieldProps = _ref2.fieldProps;
-      return (0, _react2.jsx)(_conditionalSpotlightTargetWrapper.ConditionalSpotlightTargetWrapper, {
-        spotlightTargetName: spotlightTargetName
-      }, (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_textfield.default, (0, _extends2.default)({}, fieldProps, restProps, {
-        onKeyDown: handleKeydown,
-        ref: handleRef,
-        elemAfterInput: clearText,
-        isInvalid: !!error
-      })), error && (0, _react2.jsx)(_form.ErrorMessage, {
-        testId: testIds.urlError
-      }, error)));
-    }))
-  );
+  return (0, _react2.jsx)("div", {
+    css: fieldStyles
+  }, (0, _react2.jsx)(_form.Field, {
+    label: label,
+    name: name
+  }, function (_ref2) {
+    var fieldProps = _ref2.fieldProps;
+    return (0, _react2.jsx)(_conditionalSpotlightTargetWrapper.ConditionalSpotlightTargetWrapper, {
+      spotlightTargetName: spotlightTargetName
+    }, (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_textfield.default, (0, _extends2.default)({}, fieldProps, restProps, {
+      onKeyDown: handleKeydown,
+      ref: handleRef,
+      elemAfterInput: clearText,
+      isInvalid: !!error
+    })), error && (0, _react2.jsx)(_form.ErrorMessage, {
+      testId: testIds.urlError
+    }, error)));
+  }));
 };

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

@@ -9,10 +9,12 @@ 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");
-var _styled = require("./styled");
 /** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
+var styles = (0, _react.css)({
+  alignItems: 'center'
+});
 var LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITHOUT_DISPLAYTEXT = '472px';
 var LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITH_DISPLAYTEXT = '550px';
 var LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_PLUGIN_WITH_DISPLAYTEXT = '505px';
@@ -25,13 +27,26 @@ 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 && 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 === 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;
+    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) {
+      /**
+       * 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;
+      }
+
+      /**
+       * 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;
   }
@@ -49,7 +64,7 @@ var LoaderFallback = exports.LoaderFallback = function LoaderFallback(props) {
     "data-testid": "link-picker-root-loader-boundary-ui"
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     ,
-    css: _styled.styles
+    css: styles
   }, (0, _react.jsx)(_spinner.default, {
     testId: "link-picker.component-loading-indicator",
     size: "medium"

package/dist/es2019/index.js

@@ -1,2 +1,3 @@
 export { default as LinkPicker } from './ui';
-export { UnauthenticatedError } from './common/utils/errors';
+export { UnauthenticatedError } from './common/utils/errors';
+export { LoaderFallback } from './ui/loader-fallback';

package/dist/es2019/ui/index.js

@@ -6,7 +6,7 @@ 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 { fg } from '@atlaskit/platform-feature-flags';
 import { COMPONENT_NAME, LINK_PICKER_WIDTH_IN_PX } from '../common/constants';
 import { LinkPickerSessionProvider } from '../controllers/session-provider';
 import { ErrorBoundary } from './error-boundary';
@@ -18,7 +18,7 @@ export const testIds = {
 };
 export const PACKAGE_DATA = {
   packageName: "@atlaskit/link-picker" || '',
-  packageVersion: "1.39.2" || '',
+  packageVersion: "1.39.4" || '',
   componentName: COMPONENT_NAME,
   source: COMPONENT_NAME
 };
@@ -53,8 +53,8 @@ const ComposedLinkPicker = /*#__PURE__*/memo(props => {
    * 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;
+  const RootFixedWidthContainer = fg('platform.linking-platform.link-picker.fixed-height-search-results') ? FixedWidthContainer : Fragment;
+  const LoaderFallbackContainer = fg('platform.linking-platform.link-picker.fixed-height-search-results') ? Fragment : FixedWidthContainer;
   return jsx(AnalyticsContext, {
     data: PACKAGE_DATA
   }, jsx(LinkPickerSessionProvider, null, jsx(MessagesProvider, null, jsx("div", {
@@ -69,6 +69,7 @@ const ComposedLinkPicker = /*#__PURE__*/memo(props => {
     }
   }, jsx(RootFixedWidthContainer, null, jsx(ErrorBoundary, null, jsx(LazySuspense, {
     fallback: jsx(LoaderFallbackContainer, null, jsx(LoaderFallback, {
+      url: props.url,
       hideDisplayText: props.hideDisplayText,
       isLoadingPlugins: props.isLoadingPlugins,
       plugins: props.plugins

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

@@ -3,15 +3,30 @@ import _extends from "@babel/runtime/helpers/extends";
 import { Fragment, useCallback, useRef } 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 { ErrorMessage, Field } from '@atlaskit/form';
 import Selectclear from '@atlaskit/icon/glyph/select-clear';
 import { Pressable, xcss } from '@atlaskit/primitives';
 import Textfield from '@atlaskit/textfield';
 import Tooltip from '@atlaskit/tooltip';
 import { ConditionalSpotlightTargetWrapper } from './conditional-spotlight-target-wrapper';
-import { fieldStyles } from './styled';
 import { isRedoEvent, isUndoEvent } from './utils';
+
+/**
+ * Overidding text input margin top which design system provides as a default spacer
+ * but it gets in the way of our layout
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+const fieldStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '> div': {
+    marginTop: 0
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  '& + &': {
+    marginTop: "var(--ds-space-200, 16px)"
+  }
+});
 export const testIds = {
   urlError: 'link-error',
   clearUrlButton: 'clear-text'
@@ -77,26 +92,23 @@ export const TextInput = ({
     label: clearLabel || '',
     primaryColor: "var(--ds-icon-subtle, #626F86)"
   })));
-  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: fieldStyles
-    }, jsx(Field, {
-      label: label,
-      name: name
-    }, ({
-      fieldProps
-    }) => {
-      return jsx(ConditionalSpotlightTargetWrapper, {
-        spotlightTargetName: spotlightTargetName
-      }, jsx(Fragment, null, jsx(Textfield, _extends({}, fieldProps, restProps, {
-        onKeyDown: handleKeydown,
-        ref: handleRef,
-        elemAfterInput: clearText,
-        isInvalid: !!error
-      })), error && jsx(ErrorMessage, {
-        testId: testIds.urlError
-      }, error)));
-    }))
-  );
+  return jsx("div", {
+    css: fieldStyles
+  }, jsx(Field, {
+    label: label,
+    name: name
+  }, ({
+    fieldProps
+  }) => {
+    return jsx(ConditionalSpotlightTargetWrapper, {
+      spotlightTargetName: spotlightTargetName
+    }, jsx(Fragment, null, jsx(Textfield, _extends({}, fieldProps, restProps, {
+      onKeyDown: handleKeydown,
+      ref: handleRef,
+      elemAfterInput: clearText,
+      isInvalid: !!error
+    })), error && jsx(ErrorMessage, {
+      testId: testIds.urlError
+    }, error)));
+  }));
 };

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

@@ -1,10 +1,12 @@
 /** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { css, jsx } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import Spinner from '@atlaskit/spinner';
 import { MinHeightContainer } from '../../common/ui/min-height-container';
-import { styles } from './styled';
+const styles = css({
+  alignItems: 'center'
+});
 const LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITHOUT_DISPLAYTEXT = '472px';
 const LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITH_DISPLAYTEXT = '550px';
 const LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_PLUGIN_WITH_DISPLAYTEXT = '505px';
@@ -17,14 +19,27 @@ const LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_DISPLAYTEXT = '220px';
 const getEstimatedMinHeight = ({
   hideDisplayText,
   isLoadingPlugins,
-  plugins
+  plugins,
+  url
 }) => {
-  if (getBooleanFF('platform.linking-platform.link-picker.fixed-height-search-results')) {
-    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 === 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;
+  if (fg('platform.linking-platform.link-picker.fixed-height-search-results')) {
+    /**
+     * "Insert mode" (search results shown initially)
+     */
+    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;
+      }
+
+      /**
+       * 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;
   }

package/dist/esm/index.js

@@ -1,2 +1,3 @@
 export { default as LinkPicker } from './ui';
-export { UnauthenticatedError } from './common/utils/errors';
+export { UnauthenticatedError } from './common/utils/errors';
+export { LoaderFallback } from './ui/loader-fallback';

package/dist/esm/ui/index.js

@@ -7,7 +7,7 @@ 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 { fg } from '@atlaskit/platform-feature-flags';
 import { COMPONENT_NAME, LINK_PICKER_WIDTH_IN_PX } from '../common/constants';
 import { LinkPickerSessionProvider } from '../controllers/session-provider';
 import { ErrorBoundary } from './error-boundary';
@@ -19,7 +19,7 @@ export var testIds = {
 };
 export var PACKAGE_DATA = {
   packageName: "@atlaskit/link-picker" || '',
-  packageVersion: "1.39.2" || '',
+  packageVersion: "1.39.4" || '',
   componentName: COMPONENT_NAME,
   source: COMPONENT_NAME
 };
@@ -54,8 +54,8 @@ var ComposedLinkPicker = /*#__PURE__*/memo(function (props) {
    * 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;
+  var RootFixedWidthContainer = fg('platform.linking-platform.link-picker.fixed-height-search-results') ? FixedWidthContainer : Fragment;
+  var LoaderFallbackContainer = fg('platform.linking-platform.link-picker.fixed-height-search-results') ? Fragment : FixedWidthContainer;
   return jsx(AnalyticsContext, {
     data: PACKAGE_DATA
   }, jsx(LinkPickerSessionProvider, null, jsx(MessagesProvider, null, jsx("div", {
@@ -63,6 +63,7 @@ var ComposedLinkPicker = /*#__PURE__*/memo(function (props) {
     "".concat(LINK_PICKER_WIDTH_IN_PX, "px")), _defineProperty(_ref3, '--link-picker-padding-left', (_props$paddingLeft = props.paddingLeft) !== null && _props$paddingLeft !== void 0 ? _props$paddingLeft : "var(--ds-space-200, 16px)"), _defineProperty(_ref3, '--link-picker-padding-right', (_props$paddingRight = props.paddingRight) !== null && _props$paddingRight !== void 0 ? _props$paddingRight : "var(--ds-space-200, 16px)"), _defineProperty(_ref3, '--link-picker-padding-top', (_props$paddingTop = props.paddingTop) !== null && _props$paddingTop !== void 0 ? _props$paddingTop : "var(--ds-space-200, 16px)"), _defineProperty(_ref3, '--link-picker-padding-bottom', (_props$paddingBottom = props.paddingBottom) !== null && _props$paddingBottom !== void 0 ? _props$paddingBottom : "var(--ds-space-200, 16px)"), _ref3)
   }, jsx(RootFixedWidthContainer, null, jsx(ErrorBoundary, null, jsx(LazySuspense, {
     fallback: jsx(LoaderFallbackContainer, null, jsx(LoaderFallback, {
+      url: props.url,
       hideDisplayText: props.hideDisplayText,
       isLoadingPlugins: props.isLoadingPlugins,
       plugins: props.plugins

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

@@ -5,15 +5,30 @@ var _excluded = ["name", "label", "autoFocus", "onRedo", "onUndo", "onKeyDown",
 import { Fragment, useCallback, useRef } 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 { ErrorMessage, Field } from '@atlaskit/form';
 import Selectclear from '@atlaskit/icon/glyph/select-clear';
 import { Pressable, xcss } from '@atlaskit/primitives';
 import Textfield from '@atlaskit/textfield';
 import Tooltip from '@atlaskit/tooltip';
 import { ConditionalSpotlightTargetWrapper } from './conditional-spotlight-target-wrapper';
-import { fieldStyles } from './styled';
 import { isRedoEvent, isUndoEvent } from './utils';
+
+/**
+ * Overidding text input margin top which design system provides as a default spacer
+ * but it gets in the way of our layout
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var fieldStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '> div': {
+    marginTop: 0
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  '& + &': {
+    marginTop: "var(--ds-space-200, 16px)"
+  }
+});
 export var testIds = {
   urlError: 'link-error',
   clearUrlButton: 'clear-text'
@@ -78,25 +93,22 @@ export var TextInput = function TextInput(_ref) {
     label: clearLabel || '',
     primaryColor: "var(--ds-icon-subtle, #626F86)"
   })));
-  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: fieldStyles
-    }, jsx(Field, {
-      label: label,
-      name: name
-    }, function (_ref2) {
-      var fieldProps = _ref2.fieldProps;
-      return jsx(ConditionalSpotlightTargetWrapper, {
-        spotlightTargetName: spotlightTargetName
-      }, jsx(Fragment, null, jsx(Textfield, _extends({}, fieldProps, restProps, {
-        onKeyDown: handleKeydown,
-        ref: handleRef,
-        elemAfterInput: clearText,
-        isInvalid: !!error
-      })), error && jsx(ErrorMessage, {
-        testId: testIds.urlError
-      }, error)));
-    }))
-  );
+  return jsx("div", {
+    css: fieldStyles
+  }, jsx(Field, {
+    label: label,
+    name: name
+  }, function (_ref2) {
+    var fieldProps = _ref2.fieldProps;
+    return jsx(ConditionalSpotlightTargetWrapper, {
+      spotlightTargetName: spotlightTargetName
+    }, jsx(Fragment, null, jsx(Textfield, _extends({}, fieldProps, restProps, {
+      onKeyDown: handleKeydown,
+      ref: handleRef,
+      elemAfterInput: clearText,
+      isInvalid: !!error
+    })), error && jsx(ErrorMessage, {
+      testId: testIds.urlError
+    }, error)));
+  }));
 };

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

@@ -1,10 +1,12 @@
 /** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { css, jsx } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import Spinner from '@atlaskit/spinner';
 import { MinHeightContainer } from '../../common/ui/min-height-container';
-import { styles } from './styled';
+var styles = css({
+  alignItems: 'center'
+});
 var LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITHOUT_DISPLAYTEXT = '472px';
 var LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITH_DISPLAYTEXT = '550px';
 var LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_PLUGIN_WITH_DISPLAYTEXT = '505px';
@@ -17,13 +19,26 @@ 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 && 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 === 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;
+    plugins = _ref.plugins,
+    url = _ref.url;
+  if (fg('platform.linking-platform.link-picker.fixed-height-search-results')) {
+    /**
+     * "Insert mode" (search results shown initially)
+     */
+    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;
+      }
+
+      /**
+       * 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;
   }

package/dist/types/index.d.ts

@@ -2,3 +2,4 @@ export { default as LinkPicker } from './ui';
 export type { LinkPickerProps } from './ui/link-picker';
 export type { LinkInputType, LinkPickerPluginAction, LinkPickerPlugin, LinkPickerState, LinkSearchListItemData, LinkPickerPluginErrorFallback, LinkPickerPluginEmptyStateNoResults, } from './common/types';
 export { UnauthenticatedError } from './common/utils/errors';
+export { LoaderFallback } from './ui/loader-fallback';

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

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 export type LoaderFallbackProps = {
+    url?: string;
     hideDisplayText?: boolean;
     isLoadingPlugins?: boolean;
     plugins?: unknown[];

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

@@ -2,3 +2,4 @@ export { default as LinkPicker } from './ui';
 export type { LinkPickerProps } from './ui/link-picker';
 export type { LinkInputType, LinkPickerPluginAction, LinkPickerPlugin, LinkPickerState, LinkSearchListItemData, LinkPickerPluginErrorFallback, LinkPickerPluginEmptyStateNoResults, } from './common/types';
 export { UnauthenticatedError } from './common/utils/errors';
+export { LoaderFallback } from './ui/loader-fallback';

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

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 export type LoaderFallbackProps = {
+    url?: string;
     hideDisplayText?: boolean;
     isLoadingPlugins?: boolean;
     plugins?: unknown[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/link-picker",
-	"version": "1.39.2",
+	"version": "1.39.4",
 	"description": "Standalone link picker",
 	"author": "Atlassian Pty Ltd",
 	"publishConfig": {
@@ -54,7 +54,7 @@
 	"dependencies": {
 		"@atlaskit/analytics-next": "^9.3.0",
 		"@atlaskit/atlassian-context": "^0.0.0",
-		"@atlaskit/button": "^18.3.0",
+		"@atlaskit/button": "^18.4.0",
 		"@atlaskit/form": "^10.4.0",
 		"@atlaskit/frontend-utilities": "^2.7.0",
 		"@atlaskit/heading": "^2.4.0",
@@ -65,10 +65,10 @@
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/primitives": "^11.0.0",
 		"@atlaskit/spinner": "^16.2.0",
-		"@atlaskit/tabs": "^16.2.0",
+		"@atlaskit/tabs": "^16.3.0",
 		"@atlaskit/textfield": "^6.4.0",
 		"@atlaskit/theme": "^12.11.0",
-		"@atlaskit/tokens": "^1.53.0",
+		"@atlaskit/tokens": "^1.55.0",
 		"@atlaskit/tooltip": "^18.5.0",
 		"@atlaskit/ufo": "^0.2.0",
 		"@atlaskit/visually-hidden": "^1.4.0",

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

@@ -1,24 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.fieldStyles = void 0;
-var _react = require("@emotion/react");
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-/**
- * Overidding text input margin top which design system provides as a default spacer
- * but it gets in the way of our layout
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var fieldStyles = exports.fieldStyles = (0, _react.css)({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '> div': {
-    marginTop: 0
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '& + &': {
-    marginTop: "var(--ds-space-200, 16px)"
-  }
-});

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

@@ -1,13 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.styles = void 0;
-var _react = require("@emotion/react");
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var styles = exports.styles = (0, _react.css)({
-  alignItems: 'center'
-});

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

@@ -1,17 +0,0 @@
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css } from '@emotion/react';
-/**
- * Overidding text input margin top which design system provides as a default spacer
- * but it gets in the way of our layout
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const fieldStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '> div': {
-    marginTop: 0
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '& + &': {
-    marginTop: "var(--ds-space-200, 16px)"
-  }
-});

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

@@ -1,7 +0,0 @@
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css } from '@emotion/react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const styles = css({
-  alignItems: 'center'
-});

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

@@ -1,17 +0,0 @@
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css } from '@emotion/react';
-/**
- * Overidding text input margin top which design system provides as a default spacer
- * but it gets in the way of our layout
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var fieldStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '> div': {
-    marginTop: 0
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '& + &': {
-    marginTop: "var(--ds-space-200, 16px)"
-  }
-});

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

@@ -1,7 +0,0 @@
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css } from '@emotion/react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var styles = css({
-  alignItems: 'center'
-});

package/dist/types/ui/link-picker/text-input/styled.d.ts

@@ -1,5 +0,0 @@
-/**
- * Overidding text input margin top which design system provides as a default spacer
- * but it gets in the way of our layout
- */
-export declare const fieldStyles: import("@emotion/react").SerializedStyles;

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

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

package/dist/types-ts4.5/ui/link-picker/text-input/styled.d.ts

@@ -1,5 +0,0 @@
-/**
- * Overidding text input margin top which design system provides as a default spacer
- * but it gets in the way of our layout
- */
-export declare const fieldStyles: import("@emotion/react").SerializedStyles;

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

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