@atlaskit/link-picker 1.48.3 → 1.49.0

package/dist/esm/ui/link-picker/search-results/scrolling-tabs/old/index.js

@@ -0,0 +1,158 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+/* eslint-disable @atlassian/tangerine/import/no-parent-imports */
+
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+import { IconButton } from '@atlaskit/button/new';
+import ChevronLeftIcon from '@atlaskit/icon/utility/migration/chevron-left';
+import ChevronRightIcon from '@atlaskit/icon/utility/migration/chevron-right';
+import { calculateConditionalButtons, createGhost, getTabList, scrollBack, scrollForward } from '../scrolling-tabs';
+import { backButtonStyles, containerStyles, nextButtonStyles, scrollingContainerStyles } from './styles';
+function isTouchDevice() {
+  return 'ontouchstart' in window ||
+  // eslint-disable-next-line compat/compat
+  navigator.maxTouchPoints > 0;
+}
+var initialConditionalButtonsState = {
+  back: false,
+  forward: false
+};
+
+/* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
+export var ScrollingTabListOld = function ScrollingTabListOld(props) {
+  var ref = useRef(null);
+  var _useState = useState(initialConditionalButtonsState),
+    _useState2 = _slicedToArray(_useState, 2),
+    conditionalButtons = _useState2[0],
+    setConditionalButtons = _useState2[1];
+  var ghost = useMemo(function () {
+    return createGhost();
+  }, []);
+  var onTabClick = useCallback(function (e) {
+    var target = e.currentTarget;
+    if (target) {
+      target.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+        inline: 'center'
+      });
+    }
+  }, []);
+  React.useLayoutEffect(function () {
+    var container = ref.current;
+    var scrollingContainer;
+    var tabs;
+    var handleConditionalButtonsChange = function handleConditionalButtonsChange() {
+      var buttons = calculateConditionalButtons(scrollingContainer, isTouchDevice());
+      setConditionalButtons(buttons);
+    };
+    var observerCallback = function observerCallback(mutationList) {
+      var tablist = getTabList(ref);
+      var _iterator = _createForOfIteratorHelper(mutationList),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var mutation = _step.value;
+          if (mutation.type === 'childList') {
+            var addedNodes = Array.from(mutation.addedNodes);
+            var found = addedNodes.find(function (node) {
+              return node.getAttribute('role') === 'tab';
+            });
+            if (found && tablist) {
+              ghost.remove();
+              var _tabs = Array.from(tablist.children);
+              _tabs.forEach(function (tab) {
+                tab.removeEventListener('click', onTabClick);
+                tab.addEventListener('click', onTabClick);
+              });
+              tablist.appendChild(ghost);
+              handleConditionalButtonsChange();
+            }
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    };
+    var observer = new MutationObserver(observerCallback);
+    if (container) {
+      var tablist = getTabList(ref);
+      scrollingContainer = tablist === null || tablist === void 0 ? void 0 : tablist.parentElement;
+      observer.observe(container, {
+        attributes: false,
+        childList: true,
+        subtree: true
+      });
+      if (scrollingContainer instanceof HTMLElement && tablist) {
+        tablist.appendChild(ghost);
+        tabs = Array.from(tablist.children);
+        tabs.forEach(function (tab) {
+          return tab.addEventListener('click', onTabClick);
+        });
+        handleConditionalButtonsChange();
+        scrollingContainer.addEventListener('scroll', handleConditionalButtonsChange);
+      }
+      return function () {
+        if (scrollingContainer) {
+          // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+          scrollingContainer.removeEventListener('scroll', handleConditionalButtonsChange);
+        }
+        if (tabs.length) {
+          tabs.forEach(function (tab) {
+            return tab.removeEventListener('click', onTabClick);
+          });
+        }
+      };
+    }
+  }, [onTabClick, ghost, ref]);
+  var buttonProps = {
+    appearance: 'subtle',
+    spacing: 'compact'
+  };
+  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: containerStyles,
+      ref: ref,
+      "data-testid": "scrolling-tabs"
+    }, conditionalButtons.back &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    jsx("div", {
+      className: "back",
+      css: backButtonStyles
+    }, jsx(IconButton, _extends({
+      "data-test-id": "back",
+      onClick: function onClick() {
+        return scrollBack(ref);
+      },
+      label: "back",
+      icon: ChevronLeftIcon
+    }, buttonProps))), jsx("div", {
+      css: scrollingContainerStyles
+    }, props.children), conditionalButtons.forward &&
+    // 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: nextButtonStyles
+    }, jsx(IconButton, _extends({
+      "data-test-id": "forward",
+      onClick: function onClick() {
+        return scrollForward(ref);
+      }
+    }, buttonProps, {
+      label: "forward",
+      icon: ChevronRightIcon
+    }))))
+  );
+};

package/dist/esm/ui/link-picker/search-results/search-results-container/index.compiled.css

@@ -0,0 +1,4 @@
+._1bah1y6m{justify-content:flex-start}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._2lx21bp4{flex-direction:column}

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

@@ -1,19 +1,13 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { useLayoutEffect, useRef } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { MinHeightContainer } from '../../../../common/ui/min-height-container';
-var flexColumn = css({
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'flex-start',
-  width: '100%'
-});
-export var SearchResultsContainer = function SearchResultsContainer(_ref) {
+import { SearchResultsContainerOld } from './old';
+var flexColumn = null;
+export var SearchResultsContainerNew = function SearchResultsContainerNew(_ref) {
   var hasTabs = _ref.hasTabs,
     adaptiveHeight = _ref.adaptiveHeight,
     isLoadingResults = _ref.isLoadingResults,
@@ -28,9 +22,15 @@ export var SearchResultsContainer = function SearchResultsContainer(_ref) {
       currentHeight.current = ref.current.getBoundingClientRect().height;
     }
   });
-  return jsx(MinHeightContainer, {
+  return /*#__PURE__*/React.createElement(MinHeightContainer, {
     ref: ref,
     minHeight: minheight,
-    css: flexColumn
+    className: ax(["_1e0c1txw _2lx21bp4 _1bah1y6m _1bsb1osq"])
   }, children);
+};
+export var SearchResultsContainer = function SearchResultsContainer(props) {
+  if (fg('platform_bandicoots-link-picker-css')) {
+    return /*#__PURE__*/React.createElement(SearchResultsContainerNew, props);
+  }
+  return /*#__PURE__*/React.createElement(SearchResultsContainerOld, props);
 };

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

@@ -0,0 +1,36 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { useLayoutEffect, useRef } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { MinHeightContainer } from '../../../../../common/ui/min-height-container';
+var flexColumn = css({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'flex-start',
+  width: '100%'
+});
+export var SearchResultsContainerOld = function SearchResultsContainerOld(_ref) {
+  var hasTabs = _ref.hasTabs,
+    adaptiveHeight = _ref.adaptiveHeight,
+    isLoadingResults = _ref.isLoadingResults,
+    children = _ref.children;
+  var ref = useRef(null);
+  var currentHeight = useRef(null);
+  var fixedMinHeight = hasTabs ? '347px' : '302px';
+  var adaptiveMinHeight = isLoadingResults && !!currentHeight.current ? "".concat(currentHeight.current, "px") : 'auto';
+  var minheight = adaptiveHeight ? adaptiveMinHeight : fixedMinHeight;
+  useLayoutEffect(function () {
+    if (ref.current && adaptiveHeight && !isLoadingResults) {
+      currentHeight.current = ref.current.getBoundingClientRect().height;
+    }
+  });
+  return jsx(MinHeightContainer, {
+    ref: ref,
+    minHeight: minheight,
+    css: flexColumn
+  }, children);
+};

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

@@ -0,0 +1,10 @@
+
+._19itglyw{border:none}._19bvze3t{padding-left:var(--ds-space-0,0)}
+._2hwx1b66{margin-right:var(--ds-space-050,4px)}
+._7yjtidpf >div{margin-top:0}
+._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
+._ca0qze3t{padding-top:var(--ds-space-0,0)}
+._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
+._onzypxbi+._onzypxbi{margin-top:var(--ds-space-200,1pc)}
+._s7n4nkob{vertical-align:middle}
+._u5f3ze3t{padding-right:var(--ds-space-0,0)}

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

@@ -1,49 +1,34 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["name", "label", "autoFocus", "onRedo", "onUndo", "onKeyDown", "onClear", "clearLabel", "error", "spotlightTargetName"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { Fragment, useCallback, useRef } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
 import { ErrorMessage, Field } from '@atlaskit/form';
 import Selectclear from '@atlaskit/icon/core/migration/cross-circle--select-clear';
-import { Pressable, xcss } from '@atlaskit/primitives';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Pressable } from '@atlaskit/primitives/compiled';
 import Textfield from '@atlaskit/textfield';
 import Tooltip from '@atlaskit/tooltip';
 import { ConditionalSpotlightTargetWrapper } from './conditional-spotlight-target-wrapper';
+import { TextInputOld } from './old';
 import { isRedoEvent, isUndoEvent } from './utils';
+var styles = {
+  clearTextButton: "_19itglyw _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _2hwx1b66 _bfhksm61 _s7n4nkob"
+};
 
 /**
- * Overidding text input margin top which design system provides as a default spacer
+ * Overriding 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)"
-  }
-});
+var fieldStyles = null;
 export var testIds = {
   urlError: 'link-error',
   clearUrlButton: 'clear-text'
 };
-var clearTextButtonStyles = xcss({
-  padding: 'space.0',
-  marginRight: 'space.050',
-  backgroundColor: 'color.background.neutral.subtle',
-  border: 'none',
-  verticalAlign: 'middle'
-});
-export var TextInput = function TextInput(_ref) {
+export var TextInputNew = function TextInputNew(_ref) {
   var name = _ref.name,
     label = _ref.label,
     autoFocus = _ref.autoFocus,
@@ -86,34 +71,40 @@ export var TextInput = function TextInput(_ref) {
     onClear === null || onClear === void 0 || onClear(name);
     (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
   }, [name, onClear]);
-  var clearText = restProps.value !== '' && jsx(Tooltip, {
+  var clearText = restProps.value !== '' && /*#__PURE__*/React.createElement(Tooltip, {
     content: clearLabel
-  }, jsx(Pressable, {
-    xcss: clearTextButtonStyles,
+  }, /*#__PURE__*/React.createElement(Pressable, {
+    xcss: styles.clearTextButton,
     onClick: handleClear,
     testId: testIds.clearUrlButton
-  }, jsx(Selectclear, {
+  }, /*#__PURE__*/React.createElement(Selectclear, {
     LEGACY_size: "medium",
     label: clearLabel || '',
     color: "var(--ds-icon-subtle, #626F86)",
     spacing: "spacious"
   })));
-  return jsx("div", {
-    css: fieldStyles
-  }, jsx(Field, {
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_7yjtidpf _onzypxbi"])
+  }, /*#__PURE__*/React.createElement(Field, {
     label: label,
     name: name
   }, function (_ref2) {
     var fieldProps = _ref2.fieldProps;
-    return jsx(ConditionalSpotlightTargetWrapper, {
+    return /*#__PURE__*/React.createElement(ConditionalSpotlightTargetWrapper, {
       spotlightTargetName: spotlightTargetName
-    }, jsx(Fragment, null, jsx(Textfield, _extends({}, fieldProps, restProps, {
+    }, /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Textfield, _extends({}, fieldProps, restProps, {
       onKeyDown: handleKeydown,
       ref: handleRef,
       elemAfterInput: clearText,
       isInvalid: !!error
-    })), error && jsx(ErrorMessage, {
+    })), error && /*#__PURE__*/React.createElement(ErrorMessage, {
       testId: testIds.urlError
     }, error)));
   }));
+};
+export var TextInput = function TextInput(props) {
+  if (fg('platform_bandicoots-link-picker-css')) {
+    return /*#__PURE__*/React.createElement(TextInputNew, props);
+  }
+  return /*#__PURE__*/React.createElement(TextInputOld, props);
 };

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

@@ -0,0 +1,121 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["name", "label", "autoFocus", "onRedo", "onUndo", "onKeyDown", "onClear", "clearLabel", "error", "spotlightTargetName"];
+/* eslint-disable @atlassian/tangerine/import/no-parent-imports */
+
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { Fragment, useCallback, useRef } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { ErrorMessage, Field } from '@atlaskit/form';
+import Selectclear from '@atlaskit/icon/core/migration/cross-circle--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 { 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'
+};
+var clearTextButtonStyles = xcss({
+  padding: 'space.0',
+  marginRight: 'space.050',
+  backgroundColor: 'color.background.neutral.subtle',
+  border: 'none',
+  verticalAlign: 'middle'
+});
+export var TextInputOld = function TextInputOld(_ref) {
+  var name = _ref.name,
+    label = _ref.label,
+    autoFocus = _ref.autoFocus,
+    onRedo = _ref.onRedo,
+    onUndo = _ref.onUndo,
+    onKeyDown = _ref.onKeyDown,
+    onClear = _ref.onClear,
+    clearLabel = _ref.clearLabel,
+    error = _ref.error,
+    spotlightTargetName = _ref.spotlightTargetName,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  var inputRef = useRef(null);
+  var handleRef = useCallback(function (input) {
+    if (input) {
+      inputRef.current = input;
+      if (autoFocus) {
+        // Need this to prevent jumping when we render TextInput inside Portal @see ED-2992
+        input.focus({
+          preventScroll: true
+        });
+      }
+    }
+  }, [autoFocus]);
+  var handleKeydown = useCallback(function (e) {
+    if (typeof onUndo === 'function' && isUndoEvent(e)) {
+      e.preventDefault();
+      onUndo();
+    } else if (typeof onRedo === 'function' && isRedoEvent(e)) {
+      e.preventDefault();
+      onRedo();
+    }
+    if (onKeyDown) {
+      onKeyDown(e);
+    }
+  }, [onUndo, onRedo, onKeyDown]);
+  var handleClear = useCallback(function (e) {
+    var _inputRef$current;
+    e.preventDefault();
+    e.stopPropagation();
+    onClear === null || onClear === void 0 || onClear(name);
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+  }, [name, onClear]);
+  var clearText = restProps.value !== '' && jsx(Tooltip, {
+    content: clearLabel
+  }, jsx(Pressable, {
+    xcss: clearTextButtonStyles,
+    onClick: handleClear,
+    testId: testIds.clearUrlButton
+  }, jsx(Selectclear, {
+    LEGACY_size: "medium",
+    label: clearLabel || '',
+    color: "var(--ds-icon-subtle, #626F86)",
+    spacing: "spacious"
+  })));
+  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.compiled.css

@@ -0,0 +1 @@
+._4cvr1h6o{align-items:center}

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

@@ -1,14 +1,12 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { fg } from '@atlaskit/platform-feature-flags';
 import Spinner from '@atlaskit/spinner';
 import { MinHeightContainer } from '../../common/ui/min-height-container';
-var styles = css({
-  alignItems: 'center'
-});
+import { LoaderFallbackOld } from './old';
+var styles = null;
 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';
@@ -45,15 +43,21 @@ var getEstimatedMinHeight = function getEstimatedMinHeight(_ref) {
  * 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(props) {
+export var LoaderFallbackNew = function LoaderFallbackNew(props) {
   var minHeight = getEstimatedMinHeight(props);
-  return jsx(MinHeightContainer, {
+  return /*#__PURE__*/React.createElement(MinHeightContainer, {
     minHeight: minHeight,
     "data-testid": "link-picker-root-loader-boundary-ui",
-    css: styles
-  }, jsx(Spinner, {
+    className: ax(["_4cvr1h6o"])
+  }, /*#__PURE__*/React.createElement(Spinner, {
     testId: "link-picker.component-loading-indicator",
     interactionName: props.name || 'link-picker-loading',
     size: "medium"
   }));
+};
+export var LoaderFallback = function LoaderFallback(props) {
+  if (fg('platform_bandicoots-link-picker-css')) {
+    return /*#__PURE__*/React.createElement(LoaderFallbackNew, props);
+  }
+  return /*#__PURE__*/React.createElement(LoaderFallbackOld, props);
 };

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

@@ -0,0 +1,59 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import Spinner from '@atlaskit/spinner';
+import { MinHeightContainer } from '../../../common/ui/min-height-container';
+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';
+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';
+var getEstimatedMinHeight = function getEstimatedMinHeight(_ref) {
+  var hideDisplayText = _ref.hideDisplayText,
+    isLoadingPlugins = _ref.isLoadingPlugins,
+    plugins = _ref.plugins,
+    url = _ref.url;
+  /**
+   * "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;
+};
+
+/**
+ * Loader / skeleton for the Link Picker. Takes LoaderFallbackProps (hideDisplayText, isLoadingPlugins, plugins)
+ * to determine the height to prevent jumps in height when loading
+ */
+export var LoaderFallbackOld = function LoaderFallbackOld(props) {
+  var minHeight = getEstimatedMinHeight(props);
+  return jsx(MinHeightContainer, {
+    minHeight: minHeight,
+    "data-testid": "link-picker-root-loader-boundary-ui",
+    css: styles
+  }, jsx(Spinner, {
+    testId: "link-picker.component-loading-indicator",
+    interactionName: props.name || 'link-picker-loading',
+    size: "medium"
+  }));
+};

package/dist/esm/ui/main.compiled.css

@@ -0,0 +1 @@
+._1bsb1ubl{width:var(--link-picker-width)}