@atlaskit/link-datasource 3.19.2 → 3.20.0

package/dist/esm/ui/issue-like-table/index.js

@@ -1,81 +1,114 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["as", "style"],
+  _excluded2 = ["as", "style"],
+  _excluded3 = ["as", "style"],
+  _excluded4 = ["as", "style"];
+import "./index.compiled.css";
+import { forwardRef } from 'react';
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 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; }
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+/* eslint-disable @atlaskit/design-system/use-tokens-typography */
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import styled from '@emotion/styled';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import debounce from 'lodash/debounce';
 import invariant from 'tiny-invariant';
 import { FlagsProvider } from '@atlaskit/flag';
 import { Skeleton } from '@atlaskit/linking-common';
+import { fg } from "@atlaskit/platform-feature-flags";
 import { extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 import { reorderWithEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge';
 import { autoScroller } from '@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { Box } from '@atlaskit/primitives';
+import { Box } from '@atlaskit/primitives/compiled';
 import { N40 } from '@atlaskit/theme/colors';
 import { fontFallback } from '@atlaskit/theme/typography';
 import Tooltip from '@atlaskit/tooltip';
 import { WidthObserver } from '@atlaskit/width-detector';
 import { startUfoExperience, succeedUfoExperience } from '../../analytics/ufoExperiences';
-import { stickyTableHeadersIndex } from '../../common/zindex';
 import { useDatasourceExperienceId } from '../../contexts/datasource-experience-id';
 import { ColumnPicker } from './column-picker';
 import { DragColumnPreview } from './drag-column-preview';
 import { DraggableTableHeading } from './draggable-table-heading';
 import TableEmptyState from './empty-state';
+import { IssueLikeDataTableViewOld } from './issue-like-table-old';
 import { renderType } from './render-type';
-import { InlineEditableTableCell, Table, TableHeading, withTablePluginHeaderPrefix } from './styled';
 import { TableCellContent } from './table-cell-content';
 import { useIsOnScreen } from './useIsOnScreen';
 import { COLUMN_BASE_WIDTH, getFieldLabelById, getWidthCss } from './utils';
 var tableSidePadding = "var(--ds-space-200, 16px)";
-var tableHeadStyles = css({
-  background: "var(--ds-elevation-surface-current, #FFF)",
-  position: 'sticky',
-  top: 0,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  zIndex: stickyTableHeadersIndex
-});
+var tableHeadStyles = null;
 var columnPickerWidth = 80;
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
-var ColumnPickerHeader = styled.th(_defineProperty({}, "".concat(withTablePluginHeaderPrefix('&:last-of-type')), {
-  boxSizing: 'border-box',
-  border: 0,
-  width: "".concat(columnPickerWidth, "px"),
-  zIndex: 10,
-  position: 'sticky',
-  right: "calc(-1 * ".concat(tableSidePadding, ")"),
-  backgroundColor: "var(--ds-elevation-surface-current, #FFF)",
-  /* It is required to have solid (not half-transparent) color because of this gradient business below */
-  borderBottom: "2px solid ".concat("var(--ds-border, ".concat(N40, ")")),
-  paddingRight: tableSidePadding,
-  background: "linear-gradient( 90deg, rgba(255, 255, 255, 0) 0%, ".concat("var(--ds-elevation-surface-current, #FFF)", " 10% )"),
-  /* Keeps dropdown button in the middle */
-  verticalAlign: 'middle',
-  /* In case when TH itself is bigger we want to keep picker at the right side */
-  textAlign: 'right'
-}));
-var truncateStyles = css({
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
+var ColumnPickerHeader = forwardRef(function (_ref, __cmplr) {
+  var _ref$as = _ref.as,
+    C = _ref$as === void 0 ? "th" : _ref$as,
+    __cmpls = _ref.style,
+    __cmplp = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_1bqmidpf _2eacidpf _1rmlidpf _13xs13hi _19xw13hi _ex0g13hi _1rag1on0 _1ul51on0 _12ch1on0 _12ruusvi _1pmsusvi _7okwusvi _mgulys9h _2k51ys9h _efqoys9h _1xzrzo7u _1ejpzo7u _1fmczo7u _77i31if8 _zjk41if8 _7s0n1if8 _3t471vc6 _9g2k1vc6 _1h0z1vc6 _1o59pxbi _1l3vpxbi _gdprpxbi _ml92nkob _1nfwnkob _11ljnkob _1ixkusic _s1peusic _mowjusic", __cmplp.className])
+  }));
 });
-var tableContainerStyles = css({
-  borderBottomLeftRadius: 0,
-  borderBottomRightRadius: 0,
-  position: 'relative'
+if (process.env.NODE_ENV !== 'production') {
+  ColumnPickerHeader.displayName = 'ColumnPickerHeader';
+}
+var truncateStyles = null;
+var tableContainerStyles = null;
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
+var Table = forwardRef(function (_ref2, __cmplr) {
+  var _ref2$as = _ref2.as,
+    C = _ref2$as === void 0 ? "table" : _ref2$as,
+    __cmpls = _ref2.style,
+    __cmplp = _objectWithoutProperties(_ref2, _excluded2);
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_1bsb1osq", __cmplp.className])
+  }));
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
+if (process.env.NODE_ENV !== 'production') {
+  Table.displayName = 'Table';
+}
+var TableHeading = forwardRef(function (_ref3, __cmplr) {
+  var _ref3$as = _ref3.as,
+    C = _ref3$as === void 0 ? "th" : _ref3$as,
+    __cmpls = _ref3.style,
+    __cmplp = _objectWithoutProperties(_ref3, _excluded3);
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_19itidpf _aks5idpf _1u3bidpf _1s7zl0fh _1o9ml0fh _1oupl0fh _n7zl1on0 _1fqk1on0 _1vvv1on0 _kqswh2mm _rc4eh2mm _q46wh2mm _vchhusvi _1wwnusvi _1gbausvi _vwz41tcg _s99e1tcg _3mvc1tcg _ca0qv77o _7cz2v77o _pcwyv77o _u5f31b66 _1pmc1b66 _11ep1b66 _n3tdv77o _6dd7v77o _191qv77o _19bv1b66 _9iya1b66 _15hu1b66 _4t3iqagn _qccgqagn _xo89qagn _s7n4yfq0 _ntwryfq0 _3eneyfq0 _bfhkchd4 _i7olchd4 _1oe6chd4 _12pn15vq _198v15vq _lura1osq _11681tcg _ab8av77o _11j11b66 _1xanv77o _8lvj1b66 _iscccj1k _1nd0cs5v _1t0u1e54 _1eqz4jg8 _95ex1hna _1hkzidpf _1r3pidpf _10i2idpf _1ls2idpf _ocbzidpf _3tfiidpf _1lhc1b66 _n2z81b66 _3ixo1b66", __cmplp.className])
+  }));
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
+if (process.env.NODE_ENV !== 'production') {
+  TableHeading.displayName = 'TableHeading';
+}
+var InlineEditableTableCell = forwardRef(function (_ref4, __cmplr) {
+  var _ref4$as = _ref4.as,
+    C = _ref4$as === void 0 ? "td" : _ref4$as,
+    __cmpls = _ref4.style,
+    __cmplp = _objectWithoutProperties(_ref4, _excluded4);
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_11c81oud _1otx1oud _1wi11oud _19itidpf _1i5zidpf _aifmidpf _1s7z1x13 _1xqp1x13 _mxou1x13 _n7zl1x13 _15lr1x13 _itmm1x13 _ca0qze3t _7jflze3t _1ikkze3t _u5f3ze3t _1cngze3t _1h12ze3t _n3tdze3t _v6nkze3t _jivqze3t _19bvze3t _krvdze3t _1w1yze3t _1ul91wug _1lkc1wug _1jcm1wug _4t3i1ylp _1ugg1ylp _lt6w1ylp _s7n41kw7 _11nx1kw7 _18a21kw7 _vchh18uv _166018uv _1qd918uv _1ls2idpf _1ho1idpf _1y4pidpf _1cimn7od _124in7od", __cmplp.className])
+  }));
 });
 
 /**
@@ -87,121 +120,17 @@ var tableContainerStyles = css({
  * "Static" one makes a white color gradient, that when window is at the end of scrollable area goes on top
  * of "sticky" (gray) one, dominating and hence disabling sticky one.
  */
-
-var shadowColor = "var(--ds-shadow-overflow-perimeter, rgba(0, 0, 0, 0.1))";
-var shadowColorLight = "var(--ds-shadow-overflow-perimeter, rgba(0, 0, 0, 0.05))";
-var leftWhiteOverrideGradient = {
-  backgroundImage: "\n  linear-gradient(\n    90deg,\n    ".concat("var(--ds-elevation-surface-current, #FFF)", " 30%,\n    rgba(255, 255, 255, 0)\n  )"),
-  backgroundPosition: 'left center',
-  size: "40px 100%",
-  attachment: "local"
-};
-var topWhiteOverrideGradient = {
-  backgroundImage: "\n  linear-gradient(\n    0deg,\n    rgba(255, 255, 255, 0),\n    ".concat("var(--ds-elevation-surface-current, #FFF)", " 30%\n  )"),
-  backgroundPosition: 'top center',
-  size: "100% 100px",
-  attachment: "local"
-};
-var rightWhiteOverrideGradient = {
-  backgroundImage: "\n  linear-gradient(\n    90deg,\n    rgba(255, 255, 255, 0),\n    ".concat("var(--ds-elevation-surface-current, #FFF)", " 70%\n  )"),
-  backgroundPosition: 'right center',
-  size: "40px 100%",
-  attachment: "local"
-};
-var bottomWhiteOverride = {
-  backgroundImage: "\n  linear-gradient(\n    0deg,\n    ".concat("var(--ds-elevation-surface-current, #FFF)", " 30%,\n    rgba(255, 255, 255, 0)\n  )"),
-  backgroundPosition: 'bottom center',
-  size: "100% 40px",
-  attachment: "local"
-};
-var leftShadowGradient = {
-  backgroundImage: "\n  linear-gradient(\n    90deg,\n    ".concat(shadowColor, ",\n    rgba(0, 0, 0, 0)\n  )"),
-  backgroundPosition: 'left center',
-  size: "14px 100%",
-  attachment: "scroll"
-};
-var topShadowGradient = {
-  backgroundImage: "\n  linear-gradient(\n    0deg,\n    rgba(0, 0, 0, 0),\n    ".concat(shadowColorLight, "\n  )"),
-  backgroundPosition: '0 52px',
-  size: "100% 14px",
-  attachment: "scroll"
-};
-var rightShadowGradient = {
-  backgroundImage: "\n  linear-gradient(\n    90deg,\n    rgba(0, 0, 0, 0),\n    ".concat(shadowColor, "\n  )"),
-  backgroundPosition: 'right center',
-  size: "14px 100%",
-  attachment: "scroll"
-};
-var bottomShadowGradient = {
-  backgroundImage: "\n  linear-gradient(\n    0deg,\n    ".concat(shadowColorLight, ",\n    rgba(0, 0, 0, 0)\n  )"),
-  backgroundPosition: 'bottom center',
-  size: "100% 10px",
-  attachment: "scroll"
-};
-var shadows = [leftWhiteOverrideGradient, leftShadowGradient, rightWhiteOverrideGradient, rightShadowGradient, topWhiteOverrideGradient, topShadowGradient, bottomWhiteOverride, bottomShadowGradient];
-export var scrollableContainerShadowsCssComponents = {
-  backgroundImage: shadows.map(function (_ref) {
-    var backgroundImage = _ref.backgroundImage;
-    return backgroundImage;
-  }).join(','),
-  backgroundPosition: shadows.map(function (_ref2) {
-    var backgroundPosition = _ref2.backgroundPosition;
-    return backgroundPosition;
-  }).join(','),
-  backgroundRepeat: 'no-repeat',
-  backgroundSize: shadows.map(function (_ref3) {
-    var size = _ref3.size;
-    return size;
-  }).join(','),
-  backgroundAttachment: shadows.map(function (_ref4) {
-    var attachment = _ref4.attachment;
-    return attachment;
-  }).join(',')
-};
-var scrollableContainerStyles = css({
-  overflow: 'auto',
-  boxSizing: 'border-box',
-  backgroundColor: "var(--ds-elevation-surface-current, #FFF)",
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  backgroundImage: scrollableContainerShadowsCssComponents.backgroundImage,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  backgroundPosition: scrollableContainerShadowsCssComponents.backgroundPosition,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  backgroundRepeat: scrollableContainerShadowsCssComponents.backgroundRepeat,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  backgroundSize: scrollableContainerShadowsCssComponents.backgroundSize,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  backgroundAttachment: scrollableContainerShadowsCssComponents.backgroundAttachment
-});
-var tableStyles = css({
-  // These styles are needed to prevent thead bottom border from scrolling away.
-  // This happens because it is sticky. https://stackoverflow.com/questions/50361698/border-style-do-not-work-with-sticky-position-element
-  borderCollapse: 'separate',
-  borderSpacing: 0,
-  // There is a strange table:first-of-type rule that sets margin-top to 0 coming from container,
-  // but because our table is now not the first child (there is an empty div to measure width) we need to set it manually.
-  margin: 0
-});
+if (process.env.NODE_ENV !== 'production') {
+  InlineEditableTableCell.displayName = 'InlineEditableTableCell';
+}
+var scrollableContainerStyles = null;
+var tableStyles = null;
 
 // By default tbody and thead have border-bottom: 2px ...
 // This removes it, because for header we handle it via `th` styling and footer supply bottom border
-var noDefaultBorderStyles = css({
-  borderBottom: 0
-});
-var headerStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  font: "var(--ds-font-body-UNSAFE_small, ".concat(fontFallback.body.UNSAFE_small, ")"),
-  fontWeight: "var(--ds-font-weight-medium, 500)"
-});
-var headingHoverEffectStyles = css({
-  display: 'flex',
-  alignItems: 'center',
-  whiteSpace: 'nowrap',
-  '&:hover': {
-    background: "var(--ds-background-input-hovered, #F7F8F9)",
-    borderRadius: "var(--ds-border-radius-200, 3px)"
-  }
-});
+var noDefaultBorderStyles = null;
+var headerStyles = null;
+var headingHoverEffectStyles = null;
 function extractIndex(data) {
   var index = data.index;
   invariant(typeof index === 'number');
@@ -247,7 +176,7 @@ function getDefaultColumnWidth(key, type) {
       return DEFAULT_WIDTH;
   }
 }
-export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
+var IssueLikeDataTableViewNew = function IssueLikeDataTableViewNew(_ref5) {
   var testId = _ref5.testId,
     onNextPage = _ref5.onNextPage,
     onLoadDatasourceDetails = _ref5.onLoadDatasourceDetails,
@@ -359,9 +288,9 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
       key: 'loading',
       cells: headerColumns.map(function (column) {
         return {
-          content: jsx(Box, {
+          content: /*#__PURE__*/React.createElement(Box, {
             paddingInline: "space.100"
-          }, jsx(Skeleton, {
+          }, /*#__PURE__*/React.createElement(Skeleton, {
             borderRadius: 8,
             width: "100%",
             height: 14,
@@ -465,7 +394,7 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
             key: key,
             columnKey: key,
             // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-            content: jsx(TableCellContent, {
+            content: /*#__PURE__*/React.createElement(TableCellContent, {
               id: id,
               columnKey: key,
               columnType: type,
@@ -542,55 +471,53 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
   var isEditable = onVisibleColumnKeysChange && hasData;
   var orderedColumnsAreUpToDate = orderedColumns.length === columns.length;
   var shouldDisplayColumnsInPicker = hasFullSchema && orderedColumnsAreUpToDate;
-  var view = jsx("div", {
+  var view = /*#__PURE__*/React.createElement("div", {
     /* There is required contentEditable={true} in editor-card-plugin
      * But this brakes how DND works. We set contentEditable={false} to allow DND to work
      * when dragging is initiated on top of a column label.
      */
     contentEditable: false,
     ref: containerRef,
-    css: [tableContainerStyles, scrollableContainerHeight && scrollableContainerStyles]
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    ,
-    style: scrollableContainerHeight ? {
+    "data-testid": 'issue-like-table-container',
+    className: ax(["_mrkbidpf _1o0zidpf _kqswh2mm", scrollableContainerHeight && "_1reo1wug _18m91wug _vchhusvi _bfhkchd4 _1itk10xm _ouxlbac2 _12vemgnk _1lrw1sd4 _qmxj1c00"]),
+    style: _objectSpread(_objectSpread({}, scrollableContainerHeight ? {
       maxHeight: "".concat(scrollableContainerHeight, "px")
-    } : undefined,
-    "data-testid": 'issue-like-table-container'
-  }, jsx(WidthObserver, {
+    } : undefined), {}, {
+      "--_11c95on": ix("\n\t\tlinear-gradient(90deg, ".concat("var(--ds-elevation-surface-current, #FFF)", " 30%, rgba(255, 255, 255, 0)),\n\t\tlinear-gradient(90deg, ", "var(--ds-shadow-overflow-perimeter, rgba(0, 0, 0, 0.1))", ", rgba(0, 0, 0, 0)),\n\t\tlinear-gradient(90deg, rgba(255, 255, 255, 0), ", "var(--ds-elevation-surface-current, #FFF)", " 70%),\n\t\tlinear-gradient(90deg, rgba(0, 0, 0, 0), ", "var(--ds-shadow-overflow-perimeter, rgba(0, 0, 0, 0.1))", "),\n\t\tlinear-gradient(0deg, rgba(255, 255, 255, 0), ", "var(--ds-elevation-surface-current, #FFF)", " 30%),\n\t\tlinear-gradient(0deg, rgba(0, 0, 0, 0), ", "var(--ds-shadow-overflow-perimeter, rgba(0, 0, 0, 0.05))", "),\n\t\tlinear-gradient(0deg, ", "var(--ds-elevation-surface-current, #FFF)", " 30%, rgba(255, 255, 255, 0)),\n\t\tlinear-gradient(0deg, ", "var(--ds-shadow-overflow-perimeter, rgba(0, 0, 0, 0.05))", ", rgba(0, 0, 0, 0))\n\t\t"))
+    })
+  }, /*#__PURE__*/React.createElement(WidthObserver, {
     setWidth: debounce(setTableContainerWidth, 100)
-  }), jsx(Table, {
-    css: tableStyles,
+  }), /*#__PURE__*/React.createElement(Table, {
     "data-testid": testId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     ,
     style: shouldUseWidth ? {
       tableLayout: 'fixed'
-    } : {}
-  }, jsx("thead", {
+    } : {},
+    className: ax(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _yq5h18uv _btyzidpf"])
+  }, /*#__PURE__*/React.createElement("thead", {
     "data-testid": testId && "".concat(testId, "--head"),
-    css: [noDefaultBorderStyles, tableHeadStyles]
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    ,
-    className: !!onVisibleColumnKeysChange ? 'has-column-picker' : ''
-  }, jsx("tr", {
+    className: ax(["_n7zlidpf", "_bfhkchd4 _kqsw1if8 _154iidpf _1pbyzo7u", !!onVisibleColumnKeysChange ? 'has-column-picker' : ''])
+  }, /*#__PURE__*/React.createElement("tr", {
     ref: tableHeaderRowRef
   }, headerColumns.map(function (_ref14, cellIndex) {
     var key = _ref14.key,
       content = _ref14.content,
       width = _ref14.width;
-    var heading = jsx(Tooltip, {
+    var heading = /*#__PURE__*/React.createElement(Tooltip, {
       content: content,
       tag: "span",
       position: "bottom-start",
       testId: 'datasource-header-content'
-    }, jsx("span", {
-      css: headerStyles,
-      id: getFieldLabelById(key)
+    }, /*#__PURE__*/React.createElement("span", {
+      id: getFieldLabelById(key),
+      className: ax(["_k48p1wq8 _zzcc92k5 _x3fx1ryd _u6rd4rgb _v2gl1m4d"])
     }, content));
     var isHeadingOutsideButton = !isEditable || !onWrappedColumnChange;
     if (isHeadingOutsideButton) {
-      heading = jsx("div", {
-        css: headingHoverEffectStyles
+      heading = /*#__PURE__*/React.createElement("div", {
+        className: ax(["_1e0c1txw _4cvr1h6o _o5721q9c _8vu416jk _irr31d5g"])
       }, heading);
     }
     if (isEditable) {
@@ -605,11 +532,11 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
           return cell.content;
         }
       }).slice(0, 5);
-      var dragPreview = jsx(DragColumnPreview, {
+      var dragPreview = /*#__PURE__*/React.createElement(DragColumnPreview, {
         title: heading,
         rows: previewRows
       });
-      return jsx(DraggableTableHeading, {
+      return /*#__PURE__*/React.createElement(DraggableTableHeading, {
         tableId: tableId,
         key: key,
         id: key,
@@ -622,7 +549,7 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
         onIsWrappedChange: onWrappedColumnChange === null || onWrappedColumnChange === void 0 ? void 0 : onWrappedColumnChange.bind(null, key)
       }, heading);
     } else {
-      return jsx(TableHeading, {
+      return /*#__PURE__*/React.createElement(TableHeading, {
         key: key,
         "data-testid": "".concat(key, "-column-heading")
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
@@ -633,19 +560,19 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
         })
       }, heading);
     }
-  }), onVisibleColumnKeysChange && jsx(ColumnPickerHeader, null, jsx(ColumnPicker, {
+  }), onVisibleColumnKeysChange && /*#__PURE__*/React.createElement(ColumnPickerHeader, null, /*#__PURE__*/React.createElement(ColumnPicker, {
     columns: shouldDisplayColumnsInPicker ? orderedColumns : [],
     selectedColumnKeys: shouldDisplayColumnsInPicker ? visibleColumnKeys : [],
     onSelectedColumnKeysChange: onSelectedColumnKeysChange,
     onOpen: handlePickerOpen
-  })))), jsx("tbody", {
-    css: noDefaultBorderStyles,
-    "data-testid": testId && "".concat(testId, "--body")
+  })))), /*#__PURE__*/React.createElement("tbody", {
+    "data-testid": testId && "".concat(testId, "--body"),
+    className: ax(["_n7zlidpf"])
   }, rows.map(function (_ref17) {
     var key = _ref17.key,
       cells = _ref17.cells,
       ref = _ref17.ref;
-    return jsx("tr", {
+    return /*#__PURE__*/React.createElement("tr", {
       key: key,
       "data-testid": testId && "".concat(testId, "--row-").concat(key),
       ref: ref
@@ -658,17 +585,24 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
         shouldUseWidth: shouldUseWidth,
         width: width
       });
-      return jsx(InlineEditableTableCell, {
+      return /*#__PURE__*/React.createElement(InlineEditableTableCell, {
         key: cellKey,
         "data-testid": testId && "".concat(testId, "--cell-").concat(cellIndex),
         colSpan: isEditable && isLastCell ? 2 : undefined
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         ,
         style: loadingRowStyle,
-        css: [wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(cellKey) ? null : truncateStyles]
+        className: ax([!(wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(cellKey)) && "_1bto1l2s _o5721q9c"])
       }, content);
     }));
   }))));
-  return jsx(FlagsProvider, null, view);
+  return /*#__PURE__*/React.createElement(FlagsProvider, null, view);
+};
+export var IssueLikeDataTableView = function IssueLikeDataTableView(props) {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(IssueLikeDataTableViewNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(IssueLikeDataTableViewOld, props);
+  }
 };
 export var EmptyState = TableEmptyState;