@atlaskit/link-datasource 3.19.2 → 3.20.0

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

@@ -1,77 +1,102 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./index.compiled.css";
+import { forwardRef } from 'react';
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+/* 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';
 const tableSidePadding = "var(--ds-space-200, 16px)";
-const 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
-});
+const tableHeadStyles = null;
 const columnPickerWidth = 80;
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
-const ColumnPickerHeader = styled.th({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  [`${withTablePluginHeaderPrefix('&:last-of-type')}`]: {
-    boxSizing: 'border-box',
-    border: 0,
-    width: `${columnPickerWidth}px`,
-    zIndex: 10,
-    position: 'sticky',
-    right: `calc(-1 * ${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 ${`var(--ds-border, ${N40})`}`,
-    paddingRight: tableSidePadding,
-    background: `linear-gradient( 90deg, rgba(255, 255, 255, 0) 0%, ${"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'
-  }
+const ColumnPickerHeader = forwardRef(({
+  as: C = "th",
+  style: __cmpls,
+  ...__cmplp
+}, __cmplr) => {
+  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])
+  }));
 });
-const truncateStyles = css({
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
+if (process.env.NODE_ENV !== 'production') {
+  ColumnPickerHeader.displayName = 'ColumnPickerHeader';
+}
+const truncateStyles = null;
+const tableContainerStyles = null;
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
+const Table = forwardRef(({
+  as: C = "table",
+  style: __cmpls,
+  ...__cmplp
+}, __cmplr) => {
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_1bsb1osq", __cmplp.className])
+  }));
 });
-const tableContainerStyles = css({
-  borderBottomLeftRadius: 0,
-  borderBottomRightRadius: 0,
-  position: 'relative'
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
+if (process.env.NODE_ENV !== 'production') {
+  Table.displayName = 'Table';
+}
+const TableHeading = forwardRef(({
+  as: C = "th",
+  style: __cmpls,
+  ...__cmplp
+}, __cmplr) => {
+  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';
+}
+const InlineEditableTableCell = forwardRef(({
+  as: C = "td",
+  style: __cmpls,
+  ...__cmplp
+}, __cmplr) => {
+  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])
+  }));
 });
 
 /**
@@ -83,157 +108,17 @@ const 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.
  */
-
-const shadowColor = "var(--ds-shadow-overflow-perimeter, rgba(0, 0, 0, 0.1))";
-const shadowColorLight = "var(--ds-shadow-overflow-perimeter, rgba(0, 0, 0, 0.05))";
-const leftWhiteOverrideGradient = {
-  backgroundImage: `
-  linear-gradient(
-    90deg,
-    ${"var(--ds-elevation-surface-current, #FFF)"} 30%,
-    rgba(255, 255, 255, 0)
-  )`,
-  backgroundPosition: 'left center',
-  size: `40px 100%`,
-  attachment: `local`
-};
-const topWhiteOverrideGradient = {
-  backgroundImage: `
-  linear-gradient(
-    0deg,
-    rgba(255, 255, 255, 0),
-    ${"var(--ds-elevation-surface-current, #FFF)"} 30%
-  )`,
-  backgroundPosition: 'top center',
-  size: `100% 100px`,
-  attachment: `local`
-};
-const rightWhiteOverrideGradient = {
-  backgroundImage: `
-  linear-gradient(
-    90deg,
-    rgba(255, 255, 255, 0),
-    ${"var(--ds-elevation-surface-current, #FFF)"} 70%
-  )`,
-  backgroundPosition: 'right center',
-  size: `40px 100%`,
-  attachment: `local`
-};
-const bottomWhiteOverride = {
-  backgroundImage: `
-  linear-gradient(
-    0deg,
-    ${"var(--ds-elevation-surface-current, #FFF)"} 30%,
-    rgba(255, 255, 255, 0)
-  )`,
-  backgroundPosition: 'bottom center',
-  size: `100% 40px`,
-  attachment: `local`
-};
-const leftShadowGradient = {
-  backgroundImage: `
-  linear-gradient(
-    90deg,
-    ${shadowColor},
-    rgba(0, 0, 0, 0)
-  )`,
-  backgroundPosition: 'left center',
-  size: `14px 100%`,
-  attachment: `scroll`
-};
-const topShadowGradient = {
-  backgroundImage: `
-  linear-gradient(
-    0deg,
-    rgba(0, 0, 0, 0),
-    ${shadowColorLight}
-  )`,
-  backgroundPosition: '0 52px',
-  size: `100% 14px`,
-  attachment: `scroll`
-};
-const rightShadowGradient = {
-  backgroundImage: `
-  linear-gradient(
-    90deg,
-    rgba(0, 0, 0, 0),
-    ${shadowColor}
-  )`,
-  backgroundPosition: 'right center',
-  size: `14px 100%`,
-  attachment: `scroll`
-};
-const bottomShadowGradient = {
-  backgroundImage: `
-  linear-gradient(
-    0deg,
-    ${shadowColorLight},
-    rgba(0, 0, 0, 0)
-  )`,
-  backgroundPosition: 'bottom center',
-  size: `100% 10px`,
-  attachment: `scroll`
-};
-const shadows = [leftWhiteOverrideGradient, leftShadowGradient, rightWhiteOverrideGradient, rightShadowGradient, topWhiteOverrideGradient, topShadowGradient, bottomWhiteOverride, bottomShadowGradient];
-export const scrollableContainerShadowsCssComponents = {
-  backgroundImage: shadows.map(({
-    backgroundImage
-  }) => backgroundImage).join(','),
-  backgroundPosition: shadows.map(({
-    backgroundPosition
-  }) => backgroundPosition).join(','),
-  backgroundRepeat: 'no-repeat',
-  backgroundSize: shadows.map(({
-    size
-  }) => size).join(','),
-  backgroundAttachment: shadows.map(({
-    attachment
-  }) => attachment).join(',')
-};
-const 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
-});
-const 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';
+}
+const scrollableContainerStyles = null;
+const 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
-const noDefaultBorderStyles = css({
-  borderBottom: 0
-});
-const 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, ${fontFallback.body.UNSAFE_small})`,
-  fontWeight: "var(--ds-font-weight-medium, 500)"
-});
-const headingHoverEffectStyles = css({
-  display: 'flex',
-  alignItems: 'center',
-  whiteSpace: 'nowrap',
-  '&:hover': {
-    background: "var(--ds-background-input-hovered, #F7F8F9)",
-    borderRadius: "var(--ds-border-radius-200, 3px)"
-  }
-});
+const noDefaultBorderStyles = null;
+const headerStyles = null;
+const headingHoverEffectStyles = null;
 function extractIndex(data) {
   const {
     index
@@ -277,7 +162,7 @@ function getDefaultColumnWidth(key, type) {
       return DEFAULT_WIDTH;
   }
 }
-export const IssueLikeDataTableView = ({
+const IssueLikeDataTableViewNew = ({
   testId,
   onNextPage,
   onLoadDatasourceDetails,
@@ -360,9 +245,9 @@ export const IssueLikeDataTableView = ({
   const loadingRow = useMemo(() => ({
     key: 'loading',
     cells: headerColumns.map(column => ({
-      content: jsx(Box, {
+      content: /*#__PURE__*/React.createElement(Box, {
         paddingInline: "space.100"
-      }, jsx(Skeleton, {
+      }, /*#__PURE__*/React.createElement(Skeleton, {
         borderRadius: 8,
         width: "100%",
         height: 14,
@@ -467,7 +352,7 @@ export const IssueLikeDataTableView = ({
           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,
@@ -525,56 +410,53 @@ export const IssueLikeDataTableView = ({
   const isEditable = onVisibleColumnKeysChange && hasData;
   const orderedColumnsAreUpToDate = orderedColumns.length === columns.length;
   const shouldDisplayColumnsInPicker = hasFullSchema && orderedColumnsAreUpToDate;
-  const view = jsx("div", {
+  const 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 ? {
       maxHeight: `${scrollableContainerHeight}px`
     } : undefined,
-    "data-testid": 'issue-like-table-container'
-  }, jsx(WidthObserver, {
+    "data-testid": 'issue-like-table-container',
+    className: ax(["_mrkbidpf _1o0zidpf _kqswh2mm", scrollableContainerHeight && "_1reo1wug _18m91wug _vchhusvi _bfhkchd4 _1itk1sfv _ouxlbac2 _12vemgnk _1lrw1sd4 _qmxj1c00"])
+  }, /*#__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 && `${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(({
     key,
     content,
     width
   }, cellIndex) => {
-    let heading = jsx(Tooltip, {
+    let 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(["_11c8qk37 _k48p1wq8"])
     }, content));
     const 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) {
@@ -589,11 +471,11 @@ export const IssueLikeDataTableView = ({
           return cell.content;
         }
       }).slice(0, 5);
-      const dragPreview = jsx(DragColumnPreview, {
+      const dragPreview = /*#__PURE__*/React.createElement(DragColumnPreview, {
         title: heading,
         rows: previewRows
       });
-      return jsx(DraggableTableHeading, {
+      return /*#__PURE__*/React.createElement(DraggableTableHeading, {
         tableId: tableId,
         key: key,
         id: key,
@@ -606,7 +488,7 @@ export const IssueLikeDataTableView = ({
         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": `${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
@@ -617,19 +499,19 @@ export const IssueLikeDataTableView = ({
         })
       }, 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 && `${testId}--body`
+  })))), /*#__PURE__*/React.createElement("tbody", {
+    "data-testid": testId && `${testId}--body`,
+    className: ax(["_n7zlidpf"])
   }, rows.map(({
     key,
     cells,
     ref
-  }) => jsx("tr", {
+  }) => /*#__PURE__*/React.createElement("tr", {
     key: key,
     "data-testid": testId && `${testId}--row-${key}`,
     ref: ref
@@ -643,16 +525,23 @@ export const IssueLikeDataTableView = ({
       shouldUseWidth,
       width
     });
-    return jsx(InlineEditableTableCell, {
+    return /*#__PURE__*/React.createElement(InlineEditableTableCell, {
       key: cellKey,
       "data-testid": testId && `${testId}--cell-${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 const IssueLikeDataTableView = props => {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(IssueLikeDataTableViewNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(IssueLikeDataTableViewOld, props);
+  }
 };
 export const EmptyState = TableEmptyState;