@atlaskit/link-datasource 3.19.2 → 3.20.1

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

@@ -1,85 +1,122 @@
+/* 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.scrollableContainerShadowsCssComponents = exports.getOrderedColumns = exports.IssueLikeDataTableView = exports.EmptyState = void 0;
+exports.getOrderedColumns = exports.IssueLikeDataTableView = exports.EmptyState = void 0;
+require("./index.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
-var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
 var _flag = require("@atlaskit/flag");
 var _linkingCommon = require("@atlaskit/linking-common");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _closestEdge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge");
 var _reorderWithEdge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge");
 var _pragmaticDragAndDropReactBeautifulDndAutoscroll = require("@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll");
 var _combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
-var _primitives = require("@atlaskit/primitives");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _colors = require("@atlaskit/theme/colors");
 var _typography = require("@atlaskit/theme/typography");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _widthDetector = require("@atlaskit/width-detector");
 var _ufoExperiences = require("../../analytics/ufoExperiences");
-var _zindex = require("../../common/zindex");
 var _datasourceExperienceId = require("../../contexts/datasource-experience-id");
 var _columnPicker = require("./column-picker");
 var _dragColumnPreview = require("./drag-column-preview");
 var _draggableTableHeading = require("./draggable-table-heading");
 var _emptyState = _interopRequireDefault(require("./empty-state"));
+var _issueLikeTableOld = require("./issue-like-table-old");
 var _renderType = require("./render-type");
-var _styled2 = require("./styled");
 var _tableCellContent = require("./table-cell-content");
 var _useIsOnScreen = require("./useIsOnScreen");
 var _utils = require("./utils");
+var _excluded = ["as", "style"],
+  _excluded2 = ["as", "style"],
+  _excluded3 = ["as", "style"],
+  _excluded4 = ["as", "style"];
+/* eslint-disable @atlaskit/design-system/use-tokens-typography */
+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; } /**
- * @jsxRuntime classic
- * @jsx jsx
- */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+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; }
 var tableSidePadding = "var(--ds-space-200, 16px)";
-var tableHeadStyles = (0, _react2.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: _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.default.th((0, _defineProperty2.default)({}, "".concat((0, _styled2.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(_colors.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 = (0, _react2.css)({
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
+var ColumnPickerHeader = (0, _react.forwardRef)(function (_ref, __cmplr) {
+  var _ref$as = _ref.as,
+    C = _ref$as === void 0 ? "th" : _ref$as,
+    __cmpls = _ref.style,
+    __cmplp = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(C, (0, _extends2.default)({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: (0, _runtime.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 = (0, _react2.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 = (0, _react.forwardRef)(function (_ref2, __cmplr) {
+  var _ref2$as = _ref2.as,
+    C = _ref2$as === void 0 ? "table" : _ref2$as,
+    __cmpls = _ref2.style,
+    __cmplp = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
+  return /*#__PURE__*/React.createElement(C, (0, _extends2.default)({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: (0, _runtime.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 = (0, _react.forwardRef)(function (_ref3, __cmplr) {
+  var _ref3$as = _ref3.as,
+    C = _ref3$as === void 0 ? "th" : _ref3$as,
+    __cmpls = _ref3.style,
+    __cmplp = (0, _objectWithoutProperties2.default)(_ref3, _excluded3);
+  return /*#__PURE__*/React.createElement(C, (0, _extends2.default)({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: (0, _runtime.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 = (0, _react.forwardRef)(function (_ref4, __cmplr) {
+  var _ref4$as = _ref4.as,
+    C = _ref4$as === void 0 ? "td" : _ref4$as,
+    __cmpls = _ref4.style,
+    __cmplp = (0, _objectWithoutProperties2.default)(_ref4, _excluded4);
+  return /*#__PURE__*/React.createElement(C, (0, _extends2.default)({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: (0, _runtime.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])
+  }));
 });
 
 /**
@@ -91,121 +128,17 @@ var tableContainerStyles = (0, _react2.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];
-var scrollableContainerShadowsCssComponents = exports.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 = (0, _react2.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 = (0, _react2.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 = (0, _react2.css)({
-  borderBottom: 0
-});
-var headerStyles = (0, _react2.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(_typography.fontFallback.body.UNSAFE_small, ")"),
-  fontWeight: "var(--ds-font-weight-medium, 500)"
-});
-var headingHoverEffectStyles = (0, _react2.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;
   (0, _tinyInvariant.default)(typeof index === 'number');
@@ -251,7 +184,7 @@ function getDefaultColumnWidth(key, type) {
       return DEFAULT_WIDTH;
   }
 }
-var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
+var IssueLikeDataTableViewNew = function IssueLikeDataTableViewNew(_ref5) {
   var testId = _ref5.testId,
     onNextPage = _ref5.onNextPage,
     onLoadDatasourceDetails = _ref5.onLoadDatasourceDetails,
@@ -363,9 +296,9 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
       key: 'loading',
       cells: headerColumns.map(function (column) {
         return {
-          content: (0, _react2.jsx)(_primitives.Box, {
+          content: /*#__PURE__*/React.createElement(_compiled.Box, {
             paddingInline: "space.100"
-          }, (0, _react2.jsx)(_linkingCommon.Skeleton, {
+          }, /*#__PURE__*/React.createElement(_linkingCommon.Skeleton, {
             borderRadius: 8,
             width: "100%",
             height: 14,
@@ -469,7 +402,7 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
             key: key,
             columnKey: key,
             // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-            content: (0, _react2.jsx)(_tableCellContent.TableCellContent, {
+            content: /*#__PURE__*/React.createElement(_tableCellContent.TableCellContent, {
               id: id,
               columnKey: key,
               columnType: type,
@@ -546,55 +479,53 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
   var isEditable = onVisibleColumnKeysChange && hasData;
   var orderedColumnsAreUpToDate = orderedColumns.length === columns.length;
   var shouldDisplayColumnsInPicker = hasFullSchema && orderedColumnsAreUpToDate;
-  var view = (0, _react2.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: (0, _runtime.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'
-  }, (0, _react2.jsx)(_widthDetector.WidthObserver, {
+    } : undefined), {}, {
+      "--_11c95on": (0, _runtime.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(_widthDetector.WidthObserver, {
     setWidth: (0, _debounce.default)(setTableContainerWidth, 100)
-  }), (0, _react2.jsx)(_styled2.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'
-    } : {}
-  }, (0, _react2.jsx)("thead", {
+    } : {},
+    className: (0, _runtime.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' : ''
-  }, (0, _react2.jsx)("tr", {
+    className: (0, _runtime.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 = (0, _react2.jsx)(_tooltip.default, {
+    var heading = /*#__PURE__*/React.createElement(_tooltip.default, {
       content: content,
       tag: "span",
       position: "bottom-start",
       testId: 'datasource-header-content'
-    }, (0, _react2.jsx)("span", {
-      css: headerStyles,
-      id: (0, _utils.getFieldLabelById)(key)
+    }, /*#__PURE__*/React.createElement("span", {
+      id: (0, _utils.getFieldLabelById)(key),
+      className: (0, _runtime.ax)(["_k48p1wq8 _zzcc92k5 _x3fx1ryd _u6rd4rgb _v2gl1m4d"])
     }, content));
     var isHeadingOutsideButton = !isEditable || !onWrappedColumnChange;
     if (isHeadingOutsideButton) {
-      heading = (0, _react2.jsx)("div", {
-        css: headingHoverEffectStyles
+      heading = /*#__PURE__*/React.createElement("div", {
+        className: (0, _runtime.ax)(["_1e0c1txw _4cvr1h6o _o5721q9c _8vu416jk _irr31d5g"])
       }, heading);
     }
     if (isEditable) {
@@ -609,11 +540,11 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
           return cell.content;
         }
       }).slice(0, 5);
-      var dragPreview = (0, _react2.jsx)(_dragColumnPreview.DragColumnPreview, {
+      var dragPreview = /*#__PURE__*/React.createElement(_dragColumnPreview.DragColumnPreview, {
         title: heading,
         rows: previewRows
       });
-      return (0, _react2.jsx)(_draggableTableHeading.DraggableTableHeading, {
+      return /*#__PURE__*/React.createElement(_draggableTableHeading.DraggableTableHeading, {
         tableId: tableId,
         key: key,
         id: key,
@@ -626,7 +557,7 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
         onIsWrappedChange: onWrappedColumnChange === null || onWrappedColumnChange === void 0 ? void 0 : onWrappedColumnChange.bind(null, key)
       }, heading);
     } else {
-      return (0, _react2.jsx)(_styled2.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
@@ -637,19 +568,19 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
         })
       }, heading);
     }
-  }), onVisibleColumnKeysChange && (0, _react2.jsx)(ColumnPickerHeader, null, (0, _react2.jsx)(_columnPicker.ColumnPicker, {
+  }), onVisibleColumnKeysChange && /*#__PURE__*/React.createElement(ColumnPickerHeader, null, /*#__PURE__*/React.createElement(_columnPicker.ColumnPicker, {
     columns: shouldDisplayColumnsInPicker ? orderedColumns : [],
     selectedColumnKeys: shouldDisplayColumnsInPicker ? visibleColumnKeys : [],
     onSelectedColumnKeysChange: onSelectedColumnKeysChange,
     onOpen: handlePickerOpen
-  })))), (0, _react2.jsx)("tbody", {
-    css: noDefaultBorderStyles,
-    "data-testid": testId && "".concat(testId, "--body")
+  })))), /*#__PURE__*/React.createElement("tbody", {
+    "data-testid": testId && "".concat(testId, "--body"),
+    className: (0, _runtime.ax)(["_n7zlidpf"])
   }, rows.map(function (_ref17) {
     var key = _ref17.key,
       cells = _ref17.cells,
       ref = _ref17.ref;
-    return (0, _react2.jsx)("tr", {
+    return /*#__PURE__*/React.createElement("tr", {
       key: key,
       "data-testid": testId && "".concat(testId, "--row-").concat(key),
       ref: ref
@@ -662,17 +593,24 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
         shouldUseWidth: shouldUseWidth,
         width: width
       });
-      return (0, _react2.jsx)(_styled2.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: (0, _runtime.ax)([!(wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(cellKey)) && "_1bto1l2s _o5721q9c"])
       }, content);
     }));
   }))));
-  return (0, _react2.jsx)(_flag.FlagsProvider, null, view);
+  return /*#__PURE__*/React.createElement(_flag.FlagsProvider, null, view);
+};
+var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLikeDataTableView(props) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(IssueLikeDataTableViewNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(_issueLikeTableOld.IssueLikeDataTableViewOld, props);
+  }
 };
 var EmptyState = exports.EmptyState = _emptyState.default;