@atlaskit/link-picker 1.48.2 → 1.49.0

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

@@ -1,26 +1,27 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.testIds = exports.LinkSearchListItem = void 0;
+exports.testIds = exports.LinkSearchListItemNew = exports.LinkSearchListItem = void 0;
+require("./index.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
-var _primitives = require("@atlaskit/primitives");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _compiled = require("@atlaskit/primitives/compiled");
+var _colors = require("@atlaskit/theme/colors");
 var _transformTimeStamp = require("../../../transformTimeStamp");
-var _styled = require("./styled");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
+var _old = require("./old");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /* eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports */
-
 var testIds = exports.testIds = {
   searchResultItem: 'link-search-list-item',
   searchResultIcon: 'link-search-list-item-icon'
@@ -31,6 +32,13 @@ var isSVG = function isSVG(icon) {
 var base64SVG = function base64SVG(icon) {
   return "data:image/svg+xml;base64,".concat(Buffer.from(icon).toString('base64'));
 };
+var itemIconStyles = null;
+var listItemContextStyles = null;
+var listItemContainerStyles = null;
+var listItemContainerInnerStyles = null;
+var itemNameStyles = null;
+var imgStyles = null;
+var listItemBaseStyles = null;
 var ListItemIcon = function ListItemIcon(props) {
   var item = props.item,
     intl = props.intl;
@@ -42,47 +50,45 @@ var ListItemIcon = function ListItemIcon(props) {
   var alt = typeof iconAlt === 'string' ? iconAlt : intl.formatMessage(iconAlt);
   if (typeof icon !== 'string') {
     var Glyph = icon;
-    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)("span", {
-        css: _styled.itemIconStyles
-      }, (0, _react2.jsx)(Glyph, {
-        alt: alt,
-        "data-testid": testIds.searchResultIcon
-      }))
-    );
+    return /*#__PURE__*/React.createElement("span", {
+      className: (0, _runtime.ax)(["_1ul9pxbi _19pk1b66 _2hwxutpp"])
+    }, /*#__PURE__*/React.createElement(Glyph, {
+      alt: alt,
+      "data-testid": testIds.searchResultIcon
+    }));
   }
-  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)("span", {
-      css: _styled.itemIconStyles
-    }, (0, _react2.jsx)("img", {
-      "data-testid": testIds.searchResultIcon,
-      src: isSVG(icon) ? base64SVG(icon) : icon,
-      alt: alt
-      // 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.imgStyles
-    }))
-  );
+  return /*#__PURE__*/React.createElement("span", {
+    className: (0, _runtime.ax)(["_1ul9pxbi _19pk1b66 _2hwxutpp"])
+  }, /*#__PURE__*/React.createElement("img", {
+    "data-testid": testIds.searchResultIcon,
+    src: isSVG(icon) ? base64SVG(icon) : icon,
+    alt: alt,
+    className: (0, _runtime.ax)(["_p12fpxbi"])
+  }));
 };
 var ListItemSubtitle = function ListItemSubtitle(_ref) {
   var _ref$items = (0, _slicedToArray2.default)(_ref.items, 2),
     firstItem = _ref$items[0],
     secondItem = _ref$items[1];
-  return /* eslint-disable @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766 */(
-    (0, _react2.jsx)("div", {
-      "data-testid": "".concat(testIds.searchResultItem, "-subtitle"),
-      css: _styled.listItemContextStyles
-    }, (0, _react2.jsx)("div", {
-      css: _styled.listItemContainerStyles
-    }, (0, _react2.jsx)("span", {
-      css: _styled.listItemContainerInnerStyles
-    }, firstItem)), secondItem && (0, _react2.jsx)("div", {
-      css: _styled.listItemContainerInnerStyles
-    }, (0, _react2.jsx)(_react.Fragment, null, "\xA0 \u2022\xA0 "), (0, _react2.jsx)(_react.Fragment, null, secondItem)))
-  );
-  /* eslint-enable @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766 */
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": "".concat(testIds.searchResultItem, "-subtitle"),
+    className: (0, _runtime.ax)(["_11c81vlj _syazct01 _1e0c1txw"]),
+    style: {
+      "--_khvm95": (0, _runtime.ix)("var(--ds-text, ".concat(_colors.N300, ")"))
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_1reo15vq _18m915vq _1bto1l2s"])
+  }, /*#__PURE__*/React.createElement("span", {
+    className: (0, _runtime.ax)(["_syazpsu8 _o5721q9c"]),
+    style: {
+      "--_vrm7dk": (0, _runtime.ix)("var(--ds-text-subtlest, ".concat(_colors.N200, ")"))
+    }
+  }, firstItem)), secondItem && /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_syazpsu8 _o5721q9c"]),
+    style: {
+      "--_vrm7dk": (0, _runtime.ix)("var(--ds-text-subtlest, ".concat(_colors.N200, ")"))
+    }
+  }, /*#__PURE__*/React.createElement(_react.Fragment, null, "\xA0 \u2022\xA0 "), /*#__PURE__*/React.createElement(_react.Fragment, null, secondItem)));
 };
 var getDefaultSubtitleItems = function getDefaultSubtitleItems(item, intl) {
   var container = item.container;
@@ -98,7 +104,10 @@ var getDefaultSubtitleItems = function getDefaultSubtitleItems(item, intl) {
   }
   return undefined;
 };
-var LinkSearchListItem = exports.LinkSearchListItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
+var listItemActive = null;
+var listItemSelected = null;
+var listItemFocusStyles = null;
+var LinkSearchListItemNew = exports.LinkSearchListItemNew = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
   var item = _ref2.item,
     selected = _ref2.selected,
     id = _ref2.id,
@@ -114,32 +123,46 @@ var LinkSearchListItem = exports.LinkSearchListItem = /*#__PURE__*/(0, _react.fo
     return onSelect(item.objectId);
   };
   var subtitleItems = item.subtitleItems || getDefaultSubtitleItems(item, intl);
-  return (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    (0, _react2.jsx)("div", {
-      // 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: (0, _styled.composeListItemStyles)(selected),
-      role: role,
-      id: id,
-      "aria-selected": selected,
-      "data-testid": testIds.searchResultItem,
-      onKeyDown: onKeyDown,
-      onClick: handleSelect,
-      onFocus: onFocus,
-      tabIndex: tabIndex,
+  return /*#__PURE__*/React.createElement("div", {
+    role: role,
+    id: id,
+    "aria-selected": selected,
+    "data-testid": testIds.searchResultItem,
+    onKeyDown: onKeyDown,
+    onClick: handleSelect,
+    onFocus: onFocus,
+    tabIndex: tabIndex,
+    ref: ref,
+    className: (0, _runtime.ax)(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _1e0c1txw _ca0qu2gc _n3tdu2gc _19bvrvlv _u5f3kq6n _80omtlke", !selected && "_irr38iyy _1dbz1f4r", selected && "_bfhk1kxl _16qs1f4r", "_nt751r31 _49pcglyw _1hvw1o36 _1a3b18uv _4fprglyw _5goinqa1 _7ehif7x9"]),
+    style: {
+      "--_u7ouzj": (0, _runtime.ix)("clamp( ".concat("var(--ds-space-100, 8px)", ", var(--link-picker-padding-left), 100% )")),
+      "--_1kucder": (0, _runtime.ix)("clamp( ".concat("var(--ds-space-100, 8px)", ", var(--link-picker-padding-right), 100% )")),
+      "--_mmrjro": (0, _runtime.ix)("var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N20, ")")),
+      "--_1mo126v": (0, _runtime.ix)("inset 2px 0px 0px ".concat("var(--ds-border-selected, ".concat(_colors.B400, ")"))),
+      "--_rryx0a": (0, _runtime.ix)("var(--ds-background-selected, ".concat(_colors.B50, ")")),
+      "--_ttguoj": (0, _runtime.ix)("0 0 0 2px ".concat("var(--ds-border-focused, ".concat(_colors.B100, ")"), " inset"))
+    }
+  }, /*#__PURE__*/React.createElement(ListItemIcon, {
+    item: item,
+    intl: intl
+  }), /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_1reo15vq _18m915vq _ae4v1h6o _1bsb1osq"])
+  }, /*#__PURE__*/React.createElement(_compiled.Text, {
+    maxLines: nameMaxLines
+  }, /*#__PURE__*/React.createElement("span", {
+    "data-testid": "".concat(testIds.searchResultItem, "-title"),
+    title: item.name
+  }, item.name)), subtitleItems && /*#__PURE__*/React.createElement(ListItemSubtitle, {
+    items: subtitleItems
+  })));
+});
+var LinkSearchListItem = exports.LinkSearchListItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  if ((0, _platformFeatureFlags.fg)('platform_bandicoots-link-picker-css')) {
+    return /*#__PURE__*/React.createElement(LinkSearchListItemNew, (0, _extends2.default)({}, props, {
       ref: ref
-    }, (0, _react2.jsx)(ListItemIcon, {
-      item: item,
-      intl: intl
-    }), (0, _react2.jsx)("div", {
-      css: _styled.itemNameStyles
-    }, (0, _react2.jsx)(_primitives.Text, {
-      maxLines: nameMaxLines
-    }, (0, _react2.jsx)("span", {
-      "data-testid": "".concat(testIds.searchResultItem, "-title"),
-      title: item.name
-    }, item.name)), subtitleItems && (0, _react2.jsx)(ListItemSubtitle, {
-      items: subtitleItems
-    })))
-  );
+    }));
+  }
+  return /*#__PURE__*/React.createElement(_old.LinkSearchListItemOld, (0, _extends2.default)({}, props, {
+    ref: ref
+  }));
 });

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

@@ -0,0 +1,145 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.testIds = exports.LinkSearchListItemOld = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _primitives = require("@atlaskit/primitives");
+var _transformTimeStamp = require("../../../../transformTimeStamp");
+var _styled = require("./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 testIds = exports.testIds = {
+  searchResultItem: 'link-search-list-item',
+  searchResultIcon: 'link-search-list-item-icon'
+};
+var isSVG = function isSVG(icon) {
+  return icon.startsWith('<svg') && icon.endsWith('</svg>');
+};
+var base64SVG = function base64SVG(icon) {
+  return "data:image/svg+xml;base64,".concat(Buffer.from(icon).toString('base64'));
+};
+var ListItemIcon = function ListItemIcon(props) {
+  var item = props.item,
+    intl = props.intl;
+  var icon = item.icon,
+    iconAlt = item.iconAlt;
+  if (!icon) {
+    return null;
+  }
+  var alt = typeof iconAlt === 'string' ? iconAlt : intl.formatMessage(iconAlt);
+  if (typeof icon !== 'string') {
+    var Glyph = icon;
+    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)("span", {
+        css: _styled.itemIconStyles
+      }, (0, _react2.jsx)(Glyph, {
+        alt: alt,
+        "data-testid": testIds.searchResultIcon
+      }))
+    );
+  }
+  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)("span", {
+      css: _styled.itemIconStyles
+    }, (0, _react2.jsx)("img", {
+      "data-testid": testIds.searchResultIcon,
+      src: isSVG(icon) ? base64SVG(icon) : icon,
+      alt: alt
+      // 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.imgStyles
+    }))
+  );
+};
+var ListItemSubtitle = function ListItemSubtitle(_ref) {
+  var _ref$items = (0, _slicedToArray2.default)(_ref.items, 2),
+    firstItem = _ref$items[0],
+    secondItem = _ref$items[1];
+  return /* eslint-disable @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766 */(
+    (0, _react2.jsx)("div", {
+      "data-testid": "".concat(testIds.searchResultItem, "-subtitle"),
+      css: _styled.listItemContextStyles
+    }, (0, _react2.jsx)("div", {
+      css: _styled.listItemContainerStyles
+    }, (0, _react2.jsx)("span", {
+      css: _styled.listItemContainerInnerStyles
+    }, firstItem)), secondItem && (0, _react2.jsx)("div", {
+      css: _styled.listItemContainerInnerStyles
+    }, (0, _react2.jsx)(_react.Fragment, null, "\xA0 \u2022\xA0 "), (0, _react2.jsx)(_react.Fragment, null, secondItem)))
+  );
+  /* eslint-enable @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766 */
+};
+var getDefaultSubtitleItems = function getDefaultSubtitleItems(item, intl) {
+  var container = item.container;
+  var date = (0, _transformTimeStamp.transformTimeStamp)(intl, item.lastViewedDate, item.lastUpdatedDate);
+  if (container) {
+    if (date) {
+      return [container, date];
+    }
+    return [container];
+  }
+  if (date) {
+    return [date];
+  }
+  return undefined;
+};
+var LinkSearchListItemOld = exports.LinkSearchListItemOld = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
+  var item = _ref2.item,
+    selected = _ref2.selected,
+    id = _ref2.id,
+    role = _ref2.role,
+    onSelect = _ref2.onSelect,
+    tabIndex = _ref2.tabIndex,
+    onKeyDown = _ref2.onKeyDown,
+    onFocus = _ref2.onFocus,
+    _ref2$nameMaxLines = _ref2.nameMaxLines,
+    nameMaxLines = _ref2$nameMaxLines === void 0 ? 1 : _ref2$nameMaxLines;
+  var intl = (0, _reactIntlNext.useIntl)();
+  var handleSelect = function handleSelect() {
+    return onSelect(item.objectId);
+  };
+  var subtitleItems = item.subtitleItems || getDefaultSubtitleItems(item, intl);
+  return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    (0, _react2.jsx)("div", {
+      // 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: (0, _styled.composeListItemStyles)(selected),
+      role: role,
+      id: id,
+      "aria-selected": selected,
+      "data-testid": testIds.searchResultItem,
+      onKeyDown: onKeyDown,
+      onClick: handleSelect,
+      onFocus: onFocus,
+      tabIndex: tabIndex,
+      ref: ref
+    }, (0, _react2.jsx)(ListItemIcon, {
+      item: item,
+      intl: intl
+    }), (0, _react2.jsx)("div", {
+      css: _styled.itemNameStyles
+    }, (0, _react2.jsx)(_primitives.Text, {
+      maxLines: nameMaxLines
+    }, (0, _react2.jsx)("span", {
+      "data-testid": "".concat(testIds.searchResultItem, "-title"),
+      title: item.name
+    }, item.name)), subtitleItems && (0, _react2.jsx)(ListItemSubtitle, {
+      items: subtitleItems
+    })))
+  );
+});

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

@@ -0,0 +1,188 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.testIds = exports.messages = exports.LinkSearchListOld = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _primitives = require("@atlaskit/primitives");
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
+var _minHeightContainer = require("../../../../../common/ui/min-height-container");
+var _handleNavKeyDown = require("../../../../../common/utils/handleNavKeyDown");
+var _linkSearchNoResults = require("../link-search-no-results");
+var _listItem = require("../list-item");
+var _useTrackResultsShown = require("../use-track-results-shown");
+var _styled = require("./styled");
+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; } /* eslint-disable @atlassian/tangerine/import/no-parent-imports */ /**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
+  titleRecentlyViewed: {
+    id: 'fabric.linkPicker.listTitle.recentlyViewed',
+    defaultMessage: 'Recently Viewed',
+    description: 'Describes type of items shown in the list for screen-reader users'
+  },
+  titleResults: {
+    id: 'fabric.linkPicker.listTitle.results',
+    defaultMessage: 'Results',
+    description: 'Describes type of items shown in the list for screen-reader users'
+  },
+  searchLinkResults: {
+    id: 'fabric.linkPicker.hyperlink.searchLinkResults',
+    defaultMessage: '{count, plural, =0 {no results} one {# result} other {# results}} found',
+    description: 'Announce search results for screen-reader users.'
+  }
+});
+var testIds = exports.testIds = _objectSpread(_objectSpread(_objectSpread({}, _linkSearchNoResults.testIds), _listItem.testIds), {}, {
+  resultListTitle: 'link-picker-list-title',
+  searchResultList: 'link-search-list',
+  searchResultLoadingIndicator: 'link-picker.results-loading-indicator',
+  tabsLoadingIndicator: 'link-picker.tabs-loading-indicator'
+});
+var emptyStateNoResultsWrapper = (0, _primitives.xcss)({
+  minHeight: 'space.200'
+});
+var LinkSearchListOld = exports.LinkSearchListOld = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var _activePlugin$uiOptio;
+  var onChange = _ref.onChange,
+    onSelect = _ref.onSelect,
+    onKeyDown = _ref.onKeyDown,
+    items = _ref.items,
+    activeIndex = _ref.activeIndex,
+    selectedIndex = _ref.selectedIndex,
+    isLoading = _ref.isLoading,
+    ariaControls = _ref.ariaControls,
+    ariaLabelledBy = _ref.ariaLabelledBy,
+    ariaReadOnly = _ref.ariaReadOnly,
+    role = _ref.role,
+    id = _ref.id,
+    hasSearchTerm = _ref.hasSearchTerm,
+    activePlugin = _ref.activePlugin,
+    adaptiveHeight = _ref.adaptiveHeight,
+    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var itemsContent;
+  var loadingContent;
+  var linkListTitle = hasSearchTerm ? messages.titleResults : messages.titleRecentlyViewed;
+  (0, _useTrackResultsShown.useTrackResultsShown)(isLoading, items, hasSearchTerm);
+  var itemRefs = (0, _react.useRef)({});
+  var itemRefCallback = (0, _react.useCallback)(function (el, id) {
+    if (el === null) {
+      delete itemRefs.current[id];
+    } else {
+      itemRefs.current[id] = el;
+    }
+  }, []);
+  var getTabIndex = (0, _react.useCallback)(function (index) {
+    if (selectedIndex > -1) {
+      return selectedIndex === index ? 0 : -1;
+    }
+    if (index === 0) {
+      return 0;
+    }
+    return -1;
+  }, [selectedIndex]);
+  var handleKeyDown = (0, _react.useCallback)(function (event) {
+    var updatedIndex = activeIndex;
+    if (onKeyDown) {
+      onKeyDown(event);
+    }
+    if (!(items !== null && items !== void 0 && items.length)) {
+      return;
+    }
+    updatedIndex = (0, _handleNavKeyDown.handleNavKeyDown)(event, items.length, activeIndex);
+    var item = items === null || items === void 0 ? void 0 : items[updatedIndex];
+    if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key) && item) {
+      if (itemRefs.current) {
+        var _itemRefs$current$ite;
+        (_itemRefs$current$ite = itemRefs.current[item.objectId]) === null || _itemRefs$current$ite === void 0 || _itemRefs$current$ite.focus();
+      }
+    }
+  }, [activeIndex, items, onKeyDown]);
+  if ((items === null || items === void 0 ? void 0 : items.length) === 0) {
+    if (!hasSearchTerm) {
+      var _activePlugin$emptySt;
+      var emptyState = activePlugin === null || activePlugin === void 0 || (_activePlugin$emptySt = activePlugin.emptyStateNoResults) === null || _activePlugin$emptySt === void 0 ? void 0 : _activePlugin$emptySt.call(activePlugin);
+      if (emptyState) {
+        return (0, _react2.jsx)(_primitives.Box, {
+          xcss: emptyStateNoResultsWrapper
+        }, emptyState);
+      }
+    }
+    return (0, _react2.jsx)(_linkSearchNoResults.NoResults, null);
+  }
+  var listItemNameMaxLines = activePlugin === null || activePlugin === void 0 || (_activePlugin$uiOptio = activePlugin.uiOptions) === null || _activePlugin$uiOptio === void 0 ? void 0 : _activePlugin$uiOptio.listItemNameMaxLines;
+  if (items && items.length > 0) {
+    itemsContent = (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("div", {
+      // 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.listTitleStyles,
+      id: testIds.resultListTitle,
+      "data-testid": testIds.resultListTitle
+    }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, linkListTitle)), (0, _react2.jsx)(_visuallyHidden.default, {
+      id: "fabric.smartcard.linkpicker.suggested.results"
+    }, hasSearchTerm && (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, messages.searchLinkResults, {
+      values: {
+        count: items.length
+      },
+      "aria-live": "polite",
+      "aria-atomic": "true"
+    }))), (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
+      ,
+      css: _styled.listStyles,
+      "aria-controls": "fabric.smartcard.linkpicker.suggested.results",
+      "aria-labelledby": testIds.resultListTitle,
+      "aria-readonly": ariaReadOnly,
+      "data-testid": testIds.searchResultList
+    }, items.map(function (item, index) {
+      return (0, _react2.jsx)(_listItem.LinkSearchListItem, {
+        id: "".concat(testIds.searchResultItem, "-").concat(index),
+        role: role && 'option',
+        item: item,
+        selected: selectedIndex === index,
+        active: activeIndex === index,
+        onFocus: function onFocus() {
+          return onChange(item.objectId);
+        },
+        onKeyDown: handleKeyDown,
+        onSelect: onSelect,
+        key: item.objectId,
+        tabIndex: getTabIndex(index),
+        ref: function ref(el) {
+          return itemRefCallback(el, item.objectId);
+        },
+        nameMaxLines: listItemNameMaxLines
+      });
+    })));
+  }
+  if (isLoading) {
+    loadingContent = (0, _react2.jsx)(_minHeightContainer.MinHeightContainer, {
+      minHeight: adaptiveHeight ? '80px' : '50px'
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+      ,
+      css: _styled.spinnerContainerStyles
+    }, (0, _react2.jsx)(_spinner.default, {
+      testId: testIds.searchResultLoadingIndicator,
+      interactionName: "link-picker-search-list-loading",
+      size: "medium"
+    }));
+  }
+  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", (0, _extends2.default)({
+      ref: ref,
+      css: _styled.listContainerStyles
+    }, restProps), itemsContent, loadingContent)
+  );
+});

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

@@ -0,0 +1,105 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.testIds = exports.SearchResultsOld = void 0;
+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 _linkSearchError = require("../link-search-error");
+var _linkSearchList = require("../link-search-list");
+var _scrollingTabs = require("../scrolling-tabs");
+var _searchResultsContainer = require("../search-results-container");
+var _trackTabViewed = require("../track-tab-viewed");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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; } /* eslint-disable @atlassian/tangerine/import/no-parent-imports */ /**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var tabsWrapperStyles = (0, _primitives.xcss)({
+  marginTop: 'space.150'
+});
+var spinnerContainerStyles = (0, _react2.css)({
+  minHeight: '80px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  alignSelf: 'center',
+  flexGrow: 1
+});
+var testIds = exports.testIds = _objectSpread(_objectSpread(_objectSpread({}, _linkSearchError.testIds), _linkSearchList.testIds), {}, {
+  tabsLoadingIndicator: 'link-picker.tabs-loading-indicator',
+  tabList: 'link-picker-tabs',
+  tabItem: 'link-picker-tab'
+});
+var SearchResultsOld = exports.SearchResultsOld = function SearchResultsOld(_ref) {
+  var _activePlugin$errorFa, _activePlugin$errorFa2;
+  var tabs = _ref.tabs,
+    activeTab = _ref.activeTab,
+    activePlugin = _ref.activePlugin,
+    isLoadingPlugins = _ref.isLoadingPlugins,
+    isLoadingResults = _ref.isLoadingResults,
+    isSubmitting = _ref.isSubmitting,
+    handleTabChange = _ref.handleTabChange,
+    handleSearchListOnChange = _ref.handleSearchListOnChange,
+    featureFlags = _ref.featureFlags,
+    linkSearchListId = _ref.linkSearchListId,
+    error = _ref.error,
+    queryState = _ref.queryState,
+    items = _ref.items,
+    activeIndex = _ref.activeIndex,
+    selectedIndex = _ref.selectedIndex,
+    handleSelected = _ref.handleSelected,
+    handleKeyDown = _ref.handleKeyDown,
+    adaptiveHeight = _ref.adaptiveHeight,
+    retry = _ref.retry;
+  var isActivePlugin = !!activePlugin;
+  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, {
+    hasTabs: !!tabs.length || isLoadingPlugins,
+    adaptiveHeight: adaptiveHeight,
+    isLoadingResults: isLoadingResults
+  }, isLoadingPlugins && !!queryState && (0, _react2.jsx)("div", {
+    css: spinnerContainerStyles
+  }, (0, _react2.jsx)(_spinner.default, {
+    testId: testIds.tabsLoadingIndicator,
+    interactionName: "link-picker-tabs-loading",
+    size: "medium"
+  })), !isLoadingPlugins && isActivePlugin && !!queryState && (0, _react2.jsx)(_react.Fragment, null, tabs.length > 0 && (0, _react2.jsx)(_primitives.Box, {
+    xcss: tabsWrapperStyles
+  }, (0, _react2.jsx)(_tabs.default, {
+    id: testIds.tabList,
+    testId: testIds.tabList,
+    selected: activeTab,
+    onChange: handleTabChange
+  }, featureFlags !== null && featureFlags !== void 0 && featureFlags.scrollingTabs ? (0, _react2.jsx)(_scrollingTabs.ScrollingTabList, null, tabList) : tabList), (0, _react2.jsx)(_trackTabViewed.TrackTabViewed, {
+    activePlugin: activePlugin
+  })), !error && (0, _react2.jsx)(_linkSearchList.LinkSearchList, {
+    id: linkSearchListId,
+    role: "listbox",
+    ariaReadOnly: isSubmitting,
+    items: items,
+    isLoading: isLoadingResults,
+    selectedIndex: selectedIndex,
+    activeIndex: activeIndex,
+    onSelect: handleSelected,
+    onChange: handleSearchListOnChange,
+    onKeyDown: handleKeyDown,
+    hasSearchTerm: !!(queryState !== null && queryState !== void 0 && queryState.query.length),
+    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));
+};