@atlaskit/link-picker 1.48.3 → 1.49.1

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

@@ -1,17 +1,15 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 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 { fg } from '@atlaskit/platform-feature-flags';
+import { N0, N30 } from '@atlaskit/theme/colors';
+import { ScrollingTabListOld } from './old';
 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
@@ -21,9 +19,13 @@ const initialConditionalButtonsState = {
   back: false,
   forward: false
 };
+const scrollingContainerStyles = null;
+const containerStyles = null;
+const backButtonStyles = null;
+const nextButtonStyles = null;
 
 /* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
-export const ScrollingTabList = props => {
+export const ScrollingTabListNew = props => {
   const ref = useRef(null);
   const [conditionalButtons, setConditionalButtons] = useState(initialConditionalButtonsState);
   const ghost = useMemo(() => createGhost(), []);
@@ -95,34 +97,32 @@ export const ScrollingTabList = props => {
     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: () => 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: () => scrollForward(ref)
-    }, buttonProps, {
-      label: "forward",
-      icon: ChevronRightIcon
-    }))))
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    "data-testid": "scrolling-tabs",
+    className: ax(["_kqswh2mm _18q9glyw _7hip261p _1fud261p _1dze261p"])
+  }, conditionalButtons.back && /*#__PURE__*/React.createElement("div", {
+    className: ax(["_kqswstnw _154i1b66 _1pby18h8 _bfhkvuon _1ltvidpf", "back"])
+  }, /*#__PURE__*/React.createElement(IconButton, _extends({
+    "data-test-id": "back",
+    onClick: () => scrollBack(ref),
+    label: "back",
+    icon: ChevronLeftIcon
+  }, buttonProps))), /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1bh4vqrj _1reo1wug _1dm8q5uf _1fjgglyw _rfx3yh40 _pascidpf _eid3idpf _zr3eidpf _fntnidpf _1kt9b3bt _19woidpf _1cs8stnw _1mp41kw7 _qnecu2gc _oounu2gc _kfgtyh40 _1rushloo _1cicglyw"])
+  }, props.children), conditionalButtons.forward && /*#__PURE__*/React.createElement("div", {
+    className: ax(["_kqswstnw _154i1b66 _1pby18h8 _bfhkvuon _1xi2idpf"])
+  }, /*#__PURE__*/React.createElement(IconButton, _extends({
+    "data-test-id": "forward",
+    onClick: () => scrollForward(ref)
+  }, buttonProps, {
+    label: "forward",
+    icon: ChevronRightIcon
+  }))));
+};
+export const ScrollingTabList = props => {
+  if (fg('platform_bandicoots-link-picker-css')) {
+    return /*#__PURE__*/React.createElement(ScrollingTabListNew, props);
+  }
+  return /*#__PURE__*/React.createElement(ScrollingTabListOld, props);
 };

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

@@ -0,0 +1,130 @@
+import _extends from "@babel/runtime/helpers/extends";
+/* 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;
+}
+const initialConditionalButtonsState = {
+  back: false,
+  forward: false
+};
+
+/* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
+export const ScrollingTabListOld = props => {
+  const ref = useRef(null);
+  const [conditionalButtons, setConditionalButtons] = useState(initialConditionalButtonsState);
+  const ghost = useMemo(() => createGhost(), []);
+  const onTabClick = useCallback(e => {
+    const target = e.currentTarget;
+    if (target) {
+      target.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+        inline: 'center'
+      });
+    }
+  }, []);
+  React.useLayoutEffect(() => {
+    const container = ref.current;
+    let scrollingContainer;
+    let tabs;
+    const handleConditionalButtonsChange = () => {
+      const buttons = calculateConditionalButtons(scrollingContainer, isTouchDevice());
+      setConditionalButtons(buttons);
+    };
+    const observerCallback = mutationList => {
+      const tablist = getTabList(ref);
+      for (const mutation of mutationList) {
+        if (mutation.type === 'childList') {
+          const addedNodes = Array.from(mutation.addedNodes);
+          const found = addedNodes.find(node => node.getAttribute('role') === 'tab');
+          if (found && tablist) {
+            ghost.remove();
+            const tabs = Array.from(tablist.children);
+            tabs.forEach(tab => {
+              tab.removeEventListener('click', onTabClick);
+              tab.addEventListener('click', onTabClick);
+            });
+            tablist.appendChild(ghost);
+            handleConditionalButtonsChange();
+          }
+        }
+      }
+    };
+    const observer = new MutationObserver(observerCallback);
+    if (container) {
+      const 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(tab => tab.addEventListener('click', onTabClick));
+        handleConditionalButtonsChange();
+        scrollingContainer.addEventListener('scroll', handleConditionalButtonsChange);
+      }
+      return () => {
+        if (scrollingContainer) {
+          // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+          scrollingContainer.removeEventListener('scroll', handleConditionalButtonsChange);
+        }
+        if (tabs.length) {
+          tabs.forEach(tab => tab.removeEventListener('click', onTabClick));
+        }
+      };
+    }
+  }, [onTabClick, ghost, ref]);
+  const 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: () => 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: () => scrollForward(ref)
+    }, buttonProps, {
+      label: "forward",
+      icon: ChevronRightIcon
+    }))))
+  );
+};

package/dist/es2019/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/es2019/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';
-const flexColumn = css({
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'flex-start',
-  width: '100%'
-});
-export const SearchResultsContainer = ({
+import { SearchResultsContainerOld } from './old';
+const flexColumn = null;
+export const SearchResultsContainerNew = ({
   hasTabs,
   adaptiveHeight,
   isLoadingResults,
@@ -29,9 +23,15 @@ export const SearchResultsContainer = ({
       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 const SearchResultsContainer = props => {
+  if (fg('platform_bandicoots-link-picker-css')) {
+    return /*#__PURE__*/React.createElement(SearchResultsContainerNew, props);
+  }
+  return /*#__PURE__*/React.createElement(SearchResultsContainerOld, props);
 };

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

@@ -0,0 +1,37 @@
+/**
+ * @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';
+const flexColumn = css({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'flex-start',
+  width: '100%'
+});
+export const SearchResultsContainerOld = ({
+  hasTabs,
+  adaptiveHeight,
+  isLoadingResults,
+  children
+}) => {
+  const ref = useRef(null);
+  const currentHeight = useRef(null);
+  const fixedMinHeight = hasTabs ? '347px' : '302px';
+  const adaptiveMinHeight = isLoadingResults && !!currentHeight.current ? `${currentHeight.current}px` : 'auto';
+  const minheight = adaptiveHeight ? adaptiveMinHeight : fixedMinHeight;
+  useLayoutEffect(() => {
+    if (ref.current && adaptiveHeight && !isLoadingResults) {
+      currentHeight.current = ref.current.getBoundingClientRect().height;
+    }
+  });
+  return jsx(MinHeightContainer, {
+    ref: ref,
+    minHeight: minheight,
+    css: flexColumn
+  }, children);
+};

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

@@ -0,0 +1,11 @@
+._11c816g6{font:var(--ds-font-heading-xxsmall,normal 600 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._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/es2019/ui/link-picker/text-input/index.js

@@ -1,47 +1,33 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @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';
+const 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
-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)"
-  }
-});
+const baseFieldStyles = null;
+const newFieldStyles = null;
 export const testIds = {
   urlError: 'link-error',
   clearUrlButton: 'clear-text'
 };
-const clearTextButtonStyles = xcss({
-  padding: 'space.0',
-  marginRight: 'space.050',
-  backgroundColor: 'color.background.neutral.subtle',
-  border: 'none',
-  verticalAlign: 'middle'
-});
-export const TextInput = ({
+export const TextInputNew = ({
   name,
   label,
   autoFocus,
@@ -85,35 +71,41 @@ export const TextInput = ({
     onClear === null || onClear === void 0 ? void 0 : onClear(name);
     (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
   }, [name, onClear]);
-  const clearText = restProps.value !== '' && jsx(Tooltip, {
+  const 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", fg('platform-linking-visual-refresh-v1') && "_11c816g6"])
+  }, /*#__PURE__*/React.createElement(Field, {
     label: label,
     name: name
   }, ({
     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 const TextInput = props => {
+  if (fg('platform_bandicoots-link-picker-css')) {
+    return /*#__PURE__*/React.createElement(TextInputNew, props);
+  }
+  return /*#__PURE__*/React.createElement(TextInputOld, props);
 };

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

@@ -0,0 +1,121 @@
+import _extends from "@babel/runtime/helpers/extends";
+/* 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
+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'
+};
+const clearTextButtonStyles = xcss({
+  padding: 'space.0',
+  marginRight: 'space.050',
+  backgroundColor: 'color.background.neutral.subtle',
+  border: 'none',
+  verticalAlign: 'middle'
+});
+export const TextInputOld = ({
+  name,
+  label,
+  autoFocus,
+  onRedo,
+  onUndo,
+  onKeyDown,
+  onClear,
+  clearLabel,
+  error,
+  spotlightTargetName,
+  ...restProps
+}) => {
+  const inputRef = useRef(null);
+  const handleRef = useCallback(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]);
+  const handleKeydown = useCallback(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]);
+  const handleClear = useCallback(e => {
+    var _inputRef$current;
+    e.preventDefault();
+    e.stopPropagation();
+    onClear === null || onClear === void 0 ? void 0 : onClear(name);
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+  }, [name, onClear]);
+  const 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
+  }, ({
+    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.compiled.css

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

package/dist/es2019/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';
-const styles = css({
-  alignItems: 'center'
-});
+import { LoaderFallbackOld } from './old';
+const styles = null;
 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';
@@ -46,15 +44,21 @@ const getEstimatedMinHeight = ({
  * Loader / skeleton for the Link Picker. Takes LoaderFallbackProps (hideDisplayText, isLoadingPlugins, plugins)
  * to determine the height to prevent jumps in height when loading
  */
-export const LoaderFallback = props => {
+export const LoaderFallbackNew = props => {
   const 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 const LoaderFallback = props => {
+  if (fg('platform_bandicoots-link-picker-css')) {
+    return /*#__PURE__*/React.createElement(LoaderFallbackNew, props);
+  }
+  return /*#__PURE__*/React.createElement(LoaderFallbackOld, props);
 };