@atlaskit/link-picker 1.48.3 → 1.49.1

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

@@ -0,0 +1,136 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { forwardRef, Fragment } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+import { useIntl } from 'react-intl-next';
+import { Text } from '@atlaskit/primitives';
+/* eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports */
+import { transformTimeStamp } from '../../../../transformTimeStamp';
+import { composeListItemStyles, imgStyles, itemIconStyles, itemNameStyles, listItemContainerInnerStyles, listItemContainerStyles, listItemContextStyles } from './styled';
+export var 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
+      jsx("span", {
+        css: itemIconStyles
+      }, 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
+    jsx("span", {
+      css: itemIconStyles
+    }, 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: imgStyles
+    }))
+  );
+};
+var ListItemSubtitle = function ListItemSubtitle(_ref) {
+  var _ref$items = _slicedToArray(_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 */(
+    jsx("div", {
+      "data-testid": "".concat(testIds.searchResultItem, "-subtitle"),
+      css: listItemContextStyles
+    }, jsx("div", {
+      css: listItemContainerStyles
+    }, jsx("span", {
+      css: listItemContainerInnerStyles
+    }, firstItem)), secondItem && jsx("div", {
+      css: listItemContainerInnerStyles
+    }, jsx(Fragment, null, "\xA0 \u2022\xA0 "), jsx(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 = transformTimeStamp(intl, item.lastViewedDate, item.lastUpdatedDate);
+  if (container) {
+    if (date) {
+      return [container, date];
+    }
+    return [container];
+  }
+  if (date) {
+    return [date];
+  }
+  return undefined;
+};
+export var LinkSearchListItemOld = /*#__PURE__*/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 = 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
+    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: composeListItemStyles(selected),
+      role: role,
+      id: id,
+      "aria-selected": selected,
+      "data-testid": testIds.searchResultItem,
+      onKeyDown: onKeyDown,
+      onClick: handleSelect,
+      onFocus: onFocus,
+      tabIndex: tabIndex,
+      ref: ref
+    }, jsx(ListItemIcon, {
+      item: item,
+      intl: intl
+    }), jsx("div", {
+      css: itemNameStyles
+    }, jsx(Text, {
+      maxLines: nameMaxLines
+    }, jsx("span", {
+      "data-testid": "".concat(testIds.searchResultItem, "-title"),
+      title: item.name
+    }, item.name)), subtitleItems && jsx(ListItemSubtitle, {
+      items: subtitleItems
+    })))
+  );
+});

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

@@ -0,0 +1,186 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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
+ */
+import { forwardRef, 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 { defineMessages, FormattedMessage } from 'react-intl-next';
+import { Box, xcss } from '@atlaskit/primitives';
+import Spinner from '@atlaskit/spinner';
+import VisuallyHidden from '@atlaskit/visually-hidden';
+import { MinHeightContainer } from '../../../../../common/ui/min-height-container';
+import { handleNavKeyDown } from '../../../../../common/utils/handleNavKeyDown';
+import { NoResults, testIds as noResultsTestIds } from '../link-search-no-results';
+import { LinkSearchListItem, testIds as searchResultItemTestIds } from '../list-item';
+import { useTrackResultsShown } from '../use-track-results-shown';
+import { listContainerStyles, listStyles, listTitleStyles, spinnerContainerStyles } from './styled';
+export var messages = 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.'
+  }
+});
+export var testIds = _objectSpread(_objectSpread(_objectSpread({}, noResultsTestIds), searchResultItemTestIds), {}, {
+  resultListTitle: 'link-picker-list-title',
+  searchResultList: 'link-search-list',
+  searchResultLoadingIndicator: 'link-picker.results-loading-indicator',
+  tabsLoadingIndicator: 'link-picker.tabs-loading-indicator'
+});
+var emptyStateNoResultsWrapper = xcss({
+  minHeight: 'space.200'
+});
+export var LinkSearchListOld = /*#__PURE__*/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 = _objectWithoutProperties(_ref, _excluded);
+  var itemsContent;
+  var loadingContent;
+  var linkListTitle = hasSearchTerm ? messages.titleResults : messages.titleRecentlyViewed;
+  useTrackResultsShown(isLoading, items, hasSearchTerm);
+  var itemRefs = useRef({});
+  var itemRefCallback = useCallback(function (el, id) {
+    if (el === null) {
+      delete itemRefs.current[id];
+    } else {
+      itemRefs.current[id] = el;
+    }
+  }, []);
+  var getTabIndex = useCallback(function (index) {
+    if (selectedIndex > -1) {
+      return selectedIndex === index ? 0 : -1;
+    }
+    if (index === 0) {
+      return 0;
+    }
+    return -1;
+  }, [selectedIndex]);
+  var handleKeyDown = useCallback(function (event) {
+    var updatedIndex = activeIndex;
+    if (onKeyDown) {
+      onKeyDown(event);
+    }
+    if (!(items !== null && items !== void 0 && items.length)) {
+      return;
+    }
+    updatedIndex = 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 jsx(Box, {
+          xcss: emptyStateNoResultsWrapper
+        }, emptyState);
+      }
+    }
+    return jsx(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 = jsx(Fragment, null, 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: listTitleStyles,
+      id: testIds.resultListTitle,
+      "data-testid": testIds.resultListTitle
+    }, jsx(FormattedMessage, linkListTitle)), jsx(VisuallyHidden, {
+      id: "fabric.smartcard.linkpicker.suggested.results"
+    }, hasSearchTerm && jsx(FormattedMessage, _extends({}, messages.searchLinkResults, {
+      values: {
+        count: items.length
+      },
+      "aria-live": "polite",
+      "aria-atomic": "true"
+    }))), 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: 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 jsx(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 = jsx(MinHeightContainer, {
+      minHeight: adaptiveHeight ? '80px' : '50px'
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+      ,
+      css: spinnerContainerStyles
+    }, jsx(Spinner, {
+      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
+    jsx("div", _extends({
+      ref: ref,
+      css: listContainerStyles
+    }, restProps), itemsContent, loadingContent)
+  );
+});

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

@@ -0,0 +1,100 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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
+ */
+import { Fragment } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { Box, xcss } from '@atlaskit/primitives';
+import Spinner from '@atlaskit/spinner/spinner';
+import Tabs, { Tab, TabList } from '@atlaskit/tabs';
+import { LinkSearchError, testIds as searchErrorTestIds } from '../link-search-error';
+import { LinkSearchList, testIds as listTestIds } from '../link-search-list';
+import { ScrollingTabList } from '../scrolling-tabs';
+import { SearchResultsContainer } from '../search-results-container';
+import { TrackTabViewed } from '../track-tab-viewed';
+var tabsWrapperStyles = xcss({
+  marginTop: 'space.150'
+});
+var spinnerContainerStyles = css({
+  minHeight: '80px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  alignSelf: 'center',
+  flexGrow: 1
+});
+export var testIds = _objectSpread(_objectSpread(_objectSpread({}, searchErrorTestIds), listTestIds), {}, {
+  tabsLoadingIndicator: 'link-picker.tabs-loading-indicator',
+  tabList: 'link-picker-tabs',
+  tabItem: 'link-picker-tab'
+});
+export var 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 = jsx(TabList, null, tabs.map(function (tab) {
+    return jsx(Tab, {
+      key: tab.tabTitle,
+      testId: testIds.tabItem
+    }, tab.tabTitle);
+  }));
+  return jsx(SearchResultsContainer, {
+    hasTabs: !!tabs.length || isLoadingPlugins,
+    adaptiveHeight: adaptiveHeight,
+    isLoadingResults: isLoadingResults
+  }, isLoadingPlugins && !!queryState && jsx("div", {
+    css: spinnerContainerStyles
+  }, jsx(Spinner, {
+    testId: testIds.tabsLoadingIndicator,
+    interactionName: "link-picker-tabs-loading",
+    size: "medium"
+  })), !isLoadingPlugins && isActivePlugin && !!queryState && jsx(Fragment, null, tabs.length > 0 && jsx(Box, {
+    xcss: tabsWrapperStyles
+  }, jsx(Tabs, {
+    id: testIds.tabList,
+    testId: testIds.tabList,
+    selected: activeTab,
+    onChange: handleTabChange
+  }, featureFlags !== null && featureFlags !== void 0 && featureFlags.scrollingTabs ? jsx(ScrollingTabList, null, tabList) : tabList), jsx(TrackTabViewed, {
+    activePlugin: activePlugin
+  })), !error && jsx(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 : jsx(LinkSearchError, null) : null));
+};

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

@@ -0,0 +1,29 @@
+
+._1bh4vqrj{scroll-padding:0 24px}
+._rfx3yh40:before{border-radius:2px}._154i1b66{top:var(--ds-space-050,4px)}
+._18q9glyw [role=tablist]:before{display:none}
+._19woidpf:before{bottom:0}
+._1cicglyw::-webkit-scrollbar{display:none}
+._1cs8stnw:before{position:absolute}
+._1dm8q5uf{scroll-behavior:smooth}
+._1dze261p [role=tab]{text-overflow:unset!important}
+._1fjgglyw{scrollbar-width:none}
+._1fud261p [role=tab]{overflow-y:unset!important}
+._1kt9b3bt:before{content:""}
+._1ltvidpf{left:0}
+._1mp41kw7:before{width:inherit}
+._1pby18h8{z-index:999}
+._1reo1wug{overflow-x:auto}
+._1russudh:before{background-color:var(--_lvpq93)}
+._1xi2idpf{right:0}
+._7hip261p [role=tab]{overflow-x:unset!important}
+._bfhkppbu{background-color:var(--_1t3jkli)}
+._eid3idpf:before{margin-right:0}
+._fntnidpf:before{margin-left:0}
+._kfgtyh40:before{height:2px}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
+._oounu2gc:before{right:var(--ds-space-100,8px)}
+._pascidpf:before{margin-top:0}
+._qnecu2gc:before{left:var(--ds-space-100,8px)}
+._zr3eidpf:before{margin-bottom:0}

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

@@ -1,21 +1,19 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 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; }
-/**
- * @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 { 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
@@ -25,9 +23,13 @@ var initialConditionalButtonsState = {
   back: false,
   forward: false
 };
+var scrollingContainerStyles = null;
+var containerStyles = null;
+var backButtonStyles = null;
+var nextButtonStyles = null;
 
 /* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
-export var ScrollingTabList = function ScrollingTabList(props) {
+export var ScrollingTabListNew = function ScrollingTabListNew(props) {
   var ref = useRef(null);
   var _useState = useState(initialConditionalButtonsState),
     _useState2 = _slicedToArray(_useState, 2),
@@ -119,38 +121,45 @@ export var ScrollingTabList = function 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: 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
-    }))))
-  );
+  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 _bfhkppbu _1ltvidpf", "back"]),
+    style: {
+      "--_1t3jkli": ix("var(--ds-surface, ".concat(N0, ")"))
+    }
+  }, /*#__PURE__*/React.createElement(IconButton, _extends({
+    "data-test-id": "back",
+    onClick: function onClick() {
+      return 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 _1russudh _1cicglyw"]),
+    style: {
+      "--_lvpq93": ix("var(--ds-border, ".concat(N30, ")"))
+    }
+  }, props.children), conditionalButtons.forward && /*#__PURE__*/React.createElement("div", {
+    className: ax(["_kqswstnw _154i1b66 _1pby18h8 _bfhkppbu _1xi2idpf"]),
+    style: {
+      "--_1t3jkli": ix("var(--ds-surface, ".concat(N0, ")"))
+    }
+  }, /*#__PURE__*/React.createElement(IconButton, _extends({
+    "data-test-id": "forward",
+    onClick: function onClick() {
+      return scrollForward(ref);
+    }
+  }, buttonProps, {
+    label: "forward",
+    icon: ChevronRightIcon
+  }))));
+};
+export var ScrollingTabList = function ScrollingTabList(props) {
+  if (fg('platform_bandicoots-link-picker-css')) {
+    return /*#__PURE__*/React.createElement(ScrollingTabListNew, props);
+  }
+  return /*#__PURE__*/React.createElement(ScrollingTabListOld, props);
 };