@atlaskit/link-datasource 6.7.0 → 6.9.0

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

@@ -1,790 +1,8 @@
-/* index.tsx generated by @compiled/babel-plugin v2.0.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 _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"],
-  _excluded5 = ["as", "style"],
-  _excluded6 = ["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; }
 /* eslint-disable @atlaskit/design-system/use-tokens-typography */
-
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useIntl } from 'react-intl';
-import invariant from 'tiny-invariant';
-import Button from '@atlaskit/button/default/button';
-import { FlagsProvider } from '@atlaskit/flag/flags-provider';
-import SortAscendingIcon from '@atlaskit/icon/core/sort-ascending';
-import SortDescendingIcon from '@atlaskit/icon/core/sort-descending';
-import { Skeleton } from '@atlaskit/linking-common';
-import { fg } from '@atlaskit/platform-feature-flags/fg';
-import { extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge/extract-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/utils/combine';
-import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element-adapter';
-import { Box, Inline } from '@atlaskit/primitives/compiled';
-import Tooltip from '@atlaskit/tooltip/Tooltip';
-import { startUfoExperience, succeedUfoExperience } from '../../analytics/ufoExperiences';
-import { useDatasourceExperienceId } from '../../contexts/datasource-experience-id';
-import { useIsInPDFRender } from '../../hooks/useIsInPDFRender';
-import { NoResults } from '../common/error-state/no-results';
-import { ColumnPicker } from './column-picker';
-import { hasAvailableTableSettings, TableSettingsMenu } from './table-settings-menu';
-import { DragColumnPreview } from './drag-column-preview';
-import { DraggableTableHeading } from './draggable-table-heading';
-import TableEmptyState from './empty-state';
-import { issueLikeTableMessages } from './messages';
-import { renderType } from './render-type';
-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 = null;
-var columnPickerWidth = 80;
-var columnPickerWithSettingsWidth = 95;
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
-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 _1rag1uh4 _1ul51uh4 _12ch1uh4 _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])
-  }));
-});
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
-if (process.env.NODE_ENV !== 'production') {
-  ColumnPickerHeader.displayName = 'ColumnPickerHeader';
-}
-var ColumnPickerHeaderWithSettings = forwardRef(function (_ref2, __cmplr) {
-  var _ref2$as = _ref2.as,
-    C = _ref2$as === void 0 ? "th" : _ref2$as,
-    __cmpls = _ref2.style,
-    __cmplp = _objectWithoutProperties(_ref2, _excluded2);
-  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
-    style: __cmpls,
-    ref: __cmplr,
-    className: ax(["_1bqmidpf _2eacidpf _1rmlidpf _13xs13hi _19xw13hi _ex0g13hi _1rag1uh4 _1ul51uh4 _12ch1uh4 _12ruusvi _1pmsusvi _7okwusvi _mgul14em _2k5114em _efqo14em _1xzrzo7u _1ejpzo7u _1fmczo7u _77i31if8 _zjk41if8 _7s0n1if8 _3t471vc6 _9g2k1vc6 _1h0z1vc6 _1o59pxbi _1l3vpxbi _gdprpxbi _ml92nkob _1nfwnkob _11ljnkob _1ixkusic _s1peusic _mowjusic", __cmplp.className])
-  }));
-});
-if (process.env.NODE_ENV !== 'production') {
-  ColumnPickerHeaderWithSettings.displayName = 'ColumnPickerHeaderWithSettings';
-}
-var truncateStyles = null;
-var wrappedStyles = null;
-var richTextCellStyles = null;
-var tableContainerStyles = null;
-
-// The cell spans every column, so it is as wide as the scrollable table rather than the part of it
-// that is on screen. Sticking to the left edge of the scrollport keeps the empty state centred on
-// what the user can actually see while the headers still scroll behind it.
-var noResultsCellContentStyles = null;
-var getHorizontalScrollParent = function getHorizontalScrollParent(element) {
-  var current = element;
-  while (current) {
-    var _getComputedStyle = getComputedStyle(current),
-      overflowX = _getComputedStyle.overflowX;
-    if (overflowX === 'auto' || overflowX === 'scroll') {
-      return current;
-    }
-    current = current.parentElement;
-  }
-};
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
-var Table = forwardRef(function (_ref3, __cmplr) {
-  var _ref3$as = _ref3.as,
-    C = _ref3$as === void 0 ? "table" : _ref3$as,
-    __cmpls = _ref3.style,
-    __cmplp = _objectWithoutProperties(_ref3, _excluded3);
-  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 (_ref4, __cmplr) {
-  var _ref4$as = _ref4.as,
-    C = _ref4$as === void 0 ? "th" : _ref4$as,
-    __cmpls = _ref4.style,
-    __cmplp = _objectWithoutProperties(_ref4, _excluded4);
-  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
-    style: __cmpls,
-    ref: __cmplr,
-    className: ax(["_19itidpf _aks5idpf _1u3bidpf _1s7z1gk9 _1o9m1gk9 _1oup1gk9 _n7zl1uh4 _1fqk1uh4 _1vvv1uh4 _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 (_ref5, __cmplr) {
-  var _ref5$as = _ref5.as,
-    C = _ref5$as === void 0 ? "td" : _ref5$as,
-    __cmpls = _ref5.style,
-    __cmplp = _objectWithoutProperties(_ref5, _excluded5);
-  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
-    style: __cmpls,
-    ref: __cmplr,
-    className: ax(["_11c8fhey _1otxfhey _1wi1fhey _19itidpf _1i5zidpf _aifmidpf _1s7zia51 _1xqpia51 _mxouia51 _n7zlia51 _15lria51 _itmmia51 _ca0qze3t _7jflze3t _1ikkze3t _u5f3ze3t _1cngze3t _1h12ze3t _n3tdze3t _v6nkze3t _jivqze3t _19bvze3t _krvdze3t _1w1yze3t _1ul91wug _1lkc1wug _1jcm1wug _4t3i1ylp _1ugg1ylp _lt6w1ylp _s7n41kw7 _11nx1kw7 _18a21kw7 _vchh1ntv _16601ntv _1qd91ntv _1ls2idpf _1ho1idpf _1y4pidpf _1cimn7od _124in7od", __cmplp.className])
-  }));
-});
-
 /**
- * Following section deals with slight gradient shadows that we add
- * on all four sides when there is more content in that direction.
- *
- * We do that by applying two gradients to the background -
- * one is "static" ('local') and other is "sticky" ('scroll'). \
- * "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.
+ * @jsxRuntime classic
+ * @jsx jsx
  */
-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 = null;
-var headerStyles = null;
-var headingHoverEffectStyles = null;
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- Matches DraggableTableHeading button normalization.
-var SortableHeaderParent = forwardRef(function (_ref6, __cmplr) {
-  var _ref6$as = _ref6.as,
-    C = _ref6$as === void 0 ? "div" : _ref6$as,
-    __cmpls = _ref6.style,
-    __cmplp = _objectWithoutProperties(_ref6, _excluded6);
-  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
-    style: __cmpls,
-    ref: __cmplr,
-    className: ax(["_1e0c1txw _4cvr1h6o _o5721q9c _1wtnze3t _ficf1e5h _jq8g1wug _11lvze3t _yhjm1b66", __cmplp.className])
-  }));
-});
-if (process.env.NODE_ENV !== 'production') {
-  SortableHeaderParent.displayName = 'SortableHeaderParent';
-}
-function extractIndex(data) {
-  var index = data.index;
-  invariant(typeof index === 'number');
-  return index;
-}
-var sortColumns = function sortColumns(firstOption, secondOption) {
-  return firstOption.title.localeCompare(secondOption.title);
-};
-export var getOrderedColumns = function getOrderedColumns(columns, visibleColumnKeys) {
-  var visibleColumns = columns.filter(function (column) {
-    return visibleColumnKeys.includes(column.key);
-  }).sort(function (a, b) {
-    var indexB = visibleColumnKeys.indexOf(b.key);
-    var indexA = visibleColumnKeys.indexOf(a.key);
-    return indexA - indexB;
-  });
-  var alphabeticallySortedInvisibleColumns = columns.filter(function (column) {
-    return !visibleColumnKeys.includes(column.key);
-  }).sort(sortColumns);
-  return [].concat(_toConsumableArray(visibleColumns), _toConsumableArray(alphabeticallySortedInvisibleColumns));
-};
-var DEFAULT_WIDTH = COLUMN_BASE_WIDTH * 22;
-var keyBasedWidthMap = {
-  priority: COLUMN_BASE_WIDTH * 12.5,
-  // 100px
-  status: COLUMN_BASE_WIDTH * 12.5,
-  summary: COLUMN_BASE_WIDTH * 45,
-  description: COLUMN_BASE_WIDTH * 31,
-  type: COLUMN_BASE_WIDTH * 6,
-  issuetype: COLUMN_BASE_WIDTH * 6,
-  key: COLUMN_BASE_WIDTH * 15
-};
-function getDefaultColumnWidth(key, type) {
-  var keyBasedWidth = keyBasedWidthMap[key];
-  if (keyBasedWidth) {
-    return keyBasedWidth;
-  }
-  switch (type) {
-    case 'date':
-      return COLUMN_BASE_WIDTH * 16;
-    case 'icon':
-      return COLUMN_BASE_WIDTH * 7;
-    default:
-      return DEFAULT_WIDTH;
-  }
-}
-export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref7) {
-  var _containerRef$current;
-  var testId = _ref7.testId,
-    onNextPage = _ref7.onNextPage,
-    onLoadDatasourceDetails = _ref7.onLoadDatasourceDetails,
-    items = _ref7.items,
-    itemIds = _ref7.itemIds,
-    columns = _ref7.columns,
-    _ref7$renderItem = _ref7.renderItem,
-    renderItem = _ref7$renderItem === void 0 ? renderType : _ref7$renderItem,
-    visibleColumnKeys = _ref7.visibleColumnKeys,
-    onVisibleColumnKeysChange = _ref7.onVisibleColumnKeysChange,
-    columnCustomSizes = _ref7.columnCustomSizes,
-    onColumnResize = _ref7.onColumnResize,
-    onColumnSort = _ref7.onColumnSort,
-    wrappedColumnKeys = _ref7.wrappedColumnKeys,
-    onWrappedColumnChange = _ref7.onWrappedColumnChange,
-    onWrappedColumnsChange = _ref7.onWrappedColumnsChange,
-    sortState = _ref7.sortState,
-    status = _ref7.status,
-    hasNextPage = _ref7.hasNextPage,
-    scrollableContainerHeight = _ref7.scrollableContainerHeight,
-    extensionKey = _ref7.extensionKey;
-  var _useIntl = useIntl(),
-    formatMessage = _useIntl.formatMessage;
-  var tableId = useMemo(function () {
-    return Symbol('unique-id');
-  }, []);
-  var experienceId = useDatasourceExperienceId();
-  var tableHeaderRowRef = useRef(null);
-  var _useState = useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    lastRowElement = _useState2[0],
-    setLastRowElement = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    hasFullSchema = _useState4[0],
-    setHasFullSchema = _useState4[1];
-  var isInPDFRender = useIsInPDFRender();
-  var isBottomOfTableVisibleRaw = useIsOnScreen(lastRowElement) && !isInPDFRender;
-  var containerRef = useRef(null);
-  var _useState5 = useState(function () {
-      return getOrderedColumns(_toConsumableArray(columns), _toConsumableArray(visibleColumnKeys));
-    }),
-    _useState6 = _slicedToArray(_useState5, 2),
-    orderedColumns = _useState6[0],
-    setOrderedColumns = _useState6[1];
-  useEffect(function () {
-    if (orderedColumns.length !== columns.length) {
-      setOrderedColumns(getOrderedColumns(_toConsumableArray(columns), _toConsumableArray(visibleColumnKeys)));
-    }
-  }, [columns, visibleColumnKeys, orderedColumns]);
-  useEffect(function () {
-    if (experienceId && status === 'resolved') {
-      succeedUfoExperience({
-        name: 'datasource-rendered'
-      }, experienceId);
-    }
-  }, [experienceId, status]);
-  var visibleSortedColumns = useMemo(function () {
-    return visibleColumnKeys.map(function (visibleKey) {
-      return orderedColumns.find(function (_ref8) {
-        var key = _ref8.key;
-        return visibleKey === key;
-      });
-    }).filter(Boolean);
-  }, [orderedColumns, visibleColumnKeys]);
-  var isWrapTextSettingAvailable = Boolean(onWrappedColumnsChange) && fg('platform_lp_sllv_table_settings_menu');
-  var areAllVisibleColumnsWrapped = false;
-  if (isWrapTextSettingAvailable) {
-    areAllVisibleColumnsWrapped = visibleColumnKeys.length > 0 && visibleColumnKeys.every(function (columnKey) {
-      return wrappedColumnKeys === null || wrappedColumnKeys === void 0 ? void 0 : wrappedColumnKeys.includes(columnKey);
-    });
-  }
-  var handleWrapTextOnAllColumnsChange = useCallback(function () {
-    if (!onWrappedColumnsChange) {
-      return;
-    }
-    var nextWrappedColumnKeys = areAllVisibleColumnsWrapped ? (wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 ? wrappedColumnKeys : []).filter(function (columnKey) {
-      return !visibleColumnKeys.includes(columnKey);
-    }) : Array.from(new Set([].concat(_toConsumableArray(wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 ? wrappedColumnKeys : []), _toConsumableArray(visibleColumnKeys))));
-    onWrappedColumnsChange(nextWrappedColumnKeys);
-  }, [areAllVisibleColumnsWrapped, onWrappedColumnsChange, visibleColumnKeys, wrappedColumnKeys]);
-  var tableSettingsMenuProps = {
-    wrapTextSetting: isWrapTextSettingAvailable ? {
-      isChecked: areAllVisibleColumnsWrapped,
-      onChange: handleWrapTextOnAllColumnsChange
-    } : undefined
-  };
-  var shouldShowTableSettingsMenu = hasAvailableTableSettings(tableSettingsMenuProps);
-
-  // TODO seems like this component can't handle some combination of incremental data retrieval.
-  // If data comes first, then columns and then visibleColumnKeys it blows up,
-  // or some other combination.
-  var columnsWidthsSum = useMemo(function () {
-    return visibleSortedColumns.map(function (_ref9) {
-      var key = _ref9.key,
-        type = _ref9.type;
-      return (columnCustomSizes === null || columnCustomSizes === void 0 ? void 0 : columnCustomSizes[key]) || getDefaultColumnWidth(key, type);
-    }).reduce(function (sum, width) {
-      return width + sum;
-    }, 0) + (onVisibleColumnKeysChange && shouldShowTableSettingsMenu ? columnPickerWithSettingsWidth : onVisibleColumnKeysChange ? columnPickerWidth : 0);
-  }, [columnCustomSizes, onVisibleColumnKeysChange, shouldShowTableSettingsMenu, visibleSortedColumns]);
-  var shouldUseWidth = !!(onColumnResize || columnCustomSizes);
-  var tableContainerWidth = Math.ceil(((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.getBoundingClientRect().width) || 0);
-  var getColumnWidth = useCallback(function (key, type, isLastCell) {
-    if (isLastCell && shouldUseWidth && tableContainerWidth && tableContainerWidth > columnsWidthsSum) {
-      return undefined;
-    } else {
-      return (columnCustomSizes === null || columnCustomSizes === void 0 ? void 0 : columnCustomSizes[key]) || getDefaultColumnWidth(key, type);
-    }
-  }, [columnCustomSizes, columnsWidthsSum, shouldUseWidth, tableContainerWidth]);
-  var headerColumns = useMemo(function () {
-    return visibleSortedColumns.map(function (_ref0, index) {
-      var key = _ref0.key,
-        title = _ref0.title,
-        type = _ref0.type;
-      return {
-        key: key,
-        content: title,
-        shouldTruncate: true,
-        width: getColumnWidth(key, type, index === visibleSortedColumns.length - 1)
-      };
-    });
-  }, [getColumnWidth, visibleSortedColumns]);
-  var loadingRow = useMemo(function () {
-    return {
-      key: 'loading',
-      cells: headerColumns.map(function (column) {
-        return {
-          content: /*#__PURE__*/React.createElement(Box, {
-            paddingInline: "space.100"
-          }, /*#__PURE__*/React.createElement(Skeleton, {
-            borderRadius: "var(--ds-radius-large, 8px)",
-            width: "100%",
-            height: 14,
-            testId: "issues-table-row-loading"
-          })),
-          key: column.key,
-          width: column.width
-        };
-      })
-    };
-  }, [headerColumns]);
-  useEffect(function () {
-    if (isBottomOfTableVisibleRaw && hasNextPage && status === 'resolved') {
-      void onNextPage({
-        isSchemaFromData: false,
-        shouldForceRequest: true
-      });
-    }
-  }, [isBottomOfTableVisibleRaw, status, hasNextPage, onNextPage]);
-  useEffect(function () {
-    if (isInPDFRender && hasNextPage && status === 'resolved') {
-      setTimeout(function () {
-        onNextPage({
-          isSchemaFromData: false,
-          shouldRequestFirstPage: false
-        });
-      }, 10);
-    }
-  }, [isInPDFRender, onNextPage, status, hasNextPage]);
-  var hasData = items.length > 0;
-
-  // A resolved response with no items still carries column metadata, so the table can keep its
-  // headers and render the empty state where the rows would normally be.
-  var hasNoResults = status === 'resolved' && !hasData && fg('platform_lp_sllv_ux_improvements');
-  var _useState7 = useState(),
-    _useState8 = _slicedToArray(_useState7, 2),
-    noResultsWidth = _useState8[0],
-    setNoResultsWidth = _useState8[1];
-  useEffect(function () {
-    var container = containerRef.current;
-    if (!hasNoResults || !container) {
-      return;
-    }
-    var scrollport = getHorizontalScrollParent(container) || container;
-    var updateWidth = function updateWidth() {
-      return setNoResultsWidth(scrollport.clientWidth || undefined);
-    };
-    updateWidth();
-    if (typeof ResizeObserver === 'undefined') {
-      return;
-    }
-    var observer = new ResizeObserver(updateWidth);
-    observer.observe(scrollport);
-    return function () {
-      return observer.disconnect();
-    };
-  }, [hasNoResults]);
-
-  // This variable contains initial Y mouse coordinate, so we can restrict
-  // autoScroller in X axis only
-  var initialAutoScrollerClientY = useRef();
-  useEffect(function () {
-    if (!onVisibleColumnKeysChange || !hasData) {
-      return;
-    }
-    return combine(monitorForElements({
-      onDragStart: function onDragStart(_ref1) {
-        var location = _ref1.location,
-          source = _ref1.source;
-        initialAutoScrollerClientY.current = location.current.input.clientY;
-        if (source.data.type === 'table-header') {
-          var _containerRef$current2;
-          autoScroller.start({
-            input: _objectSpread(_objectSpread({}, location.current.input), {}, {
-              clientY:
-              // The goal is to have clientY the same and in the middle of the scrollable area
-              // Since clientY is taken from to of the viewport we need to plus that in order to get
-              // middle of the scrollable area in reference to the viewport
-              (initialAutoScrollerClientY.current || 0) + (((_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.offsetHeight) || 0) / 2
-            }),
-            behavior: 'container-only'
-          });
-        }
-      },
-      onDrag: function onDrag(_ref10) {
-        var location = _ref10.location,
-          source = _ref10.source;
-        if (source.data.type === 'table-header') {
-          var _containerRef$current3;
-          autoScroller.updateInput({
-            input: _objectSpread(_objectSpread({}, location.current.input), {}, {
-              clientY: (initialAutoScrollerClientY.current || 0) + (((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.offsetHeight) || 0) / 2
-            })
-          });
-        }
-      },
-      onDrop: function onDrop(_ref11) {
-        var source = _ref11.source,
-          location = _ref11.location;
-        autoScroller.stop();
-        if (location.current.dropTargets.length === 0) {
-          return;
-        }
-        var target = location.current.dropTargets[0];
-        if (source.data.id === target.data.id) {
-          return;
-        }
-        if (source.data.type === 'table-header' && source.data.tableId === tableId) {
-          var closestEdgeOfTarget = extractClosestEdge(target.data);
-          invariant(closestEdgeOfTarget === 'left' || closestEdgeOfTarget === 'right');
-          var startIndex = extractIndex(source.data);
-          var indexOfTarget = extractIndex(target.data);
-          var newColumnKeyOrder = reorderWithEdge({
-            list: visibleColumnKeys,
-            closestEdgeOfTarget: closestEdgeOfTarget,
-            startIndex: startIndex,
-            indexOfTarget: indexOfTarget,
-            axis: 'horizontal'
-          });
-          onVisibleColumnKeysChange === null || onVisibleColumnKeysChange === void 0 || onVisibleColumnKeysChange(_toConsumableArray(newColumnKeyOrder));
-
-          // We sort columns (whole objects) according to their key order presented in newColumnKeyOrder
-          setOrderedColumns(function (columns) {
-            return getOrderedColumns(_toConsumableArray(columns), _toConsumableArray(newColumnKeyOrder));
-          });
-        }
-      }
-    }));
-  }, [visibleColumnKeys, onVisibleColumnKeysChange, tableId, hasData]);
-  var tableRows = useMemo(function () {
-    return itemIds.map(function (id, rowIndex) {
-      return {
-        key: id,
-        cells: visibleSortedColumns.map(function (_ref12, cellIndex) {
-          var key = _ref12.key,
-            type = _ref12.type,
-            title = _ref12.title;
-          return {
-            key: key,
-            columnKey: key,
-            type: type,
-            content: /*#__PURE__*/React.createElement(TableCellContent, {
-              id: id,
-              columnKey: key,
-              columnType: type,
-              columnTitle: title,
-              wrappedColumnKeys: wrappedColumnKeys,
-              renderItem: renderItem
-            }),
-            width: getColumnWidth(key, type, cellIndex === visibleSortedColumns.length - 1)
-          };
-        }),
-        ref: rowIndex === items.length - 1 ? function (el) {
-          return setLastRowElement(el);
-        } : undefined
-      };
-    });
-  }, [items, itemIds, renderItem, wrappedColumnKeys, visibleSortedColumns, getColumnWidth]);
-  var previousRealRowsCountRef = useRef(undefined);
-  useEffect(function () {
-    if (tableRows.length > 0) {
-      previousRealRowsCountRef.current = tableRows.length;
-    }
-  }, [tableRows.length]);
-  var rows = useMemo(function () {
-    if (fg('platform_lp_jira_sllv_renderer_column_sorting')) {
-      var hasPreviousRealRows = !!previousRealRowsCountRef.current;
-      var isLoadingState = status === 'loading' || status === 'empty' && hasPreviousRealRows;
-      if (!isLoadingState) {
-        return tableRows;
-      }
-    } else {
-      if (status !== 'loading') {
-        return tableRows;
-      }
-    }
-
-    // if there are table rows, only add 1 loading row
-    if (tableRows.length > 0) {
-      return [].concat(_toConsumableArray(tableRows), [_objectSpread(_objectSpread({}, loadingRow), {}, {
-        key: "loading-".concat(tableRows.length)
-      })]);
-    }
-    // if there are no table rows add 14 rows if it is compact (has scrollableContainerHeight or non-modal)
-    // add 10 rows if it is modal (no scrollableContainerHeight)
-    var loadingRowsCount = scrollableContainerHeight ? 14 : 10;
-    if (fg('platform_lp_jira_sllv_renderer_column_sorting')) {
-      var defaultLoadingRowsCount = scrollableContainerHeight ? 14 : 10;
-      var previousRealRowsCount = previousRealRowsCountRef.current;
-      loadingRowsCount = defaultLoadingRowsCount;
-      if (previousRealRowsCount && previousRealRowsCount < defaultLoadingRowsCount) {
-        loadingRowsCount = previousRealRowsCount;
-      }
-    }
-    return _toConsumableArray(Array(loadingRowsCount)).map(function (_, index) {
-      return _objectSpread(_objectSpread({}, loadingRow), {}, {
-        key: "loading-".concat(index)
-      });
-    });
-  }, [loadingRow, status, tableRows, scrollableContainerHeight]);
-  var onSelectedColumnKeysChange = useCallback(function (newSelectedColumnKeys) {
-    onVisibleColumnKeysChange === null || onVisibleColumnKeysChange === void 0 || onVisibleColumnKeysChange(newSelectedColumnKeys);
-  }, [onVisibleColumnKeysChange]);
-  var handlePickerOpen = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-    var _t;
-    return _regeneratorRuntime.wrap(function (_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          if (!hasFullSchema) {
-            _context.next = 1;
-            break;
-          }
-          return _context.abrupt("return");
-        case 1:
-          if (experienceId) {
-            startUfoExperience({
-              name: 'column-picker-rendered',
-              metadata: {
-                extensionKey: extensionKey !== null && extensionKey !== void 0 ? extensionKey : undefined
-              }
-            }, experienceId);
-          }
-          _context.prev = 2;
-          _context.next = 3;
-          return onLoadDatasourceDetails();
-        case 3:
-          setHasFullSchema(true);
-          _context.next = 5;
-          break;
-        case 4:
-          _context.prev = 4;
-          _t = _context["catch"](2);
-          setHasFullSchema(false);
-        case 5:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee, null, [[2, 4]]);
-  })), [experienceId, extensionKey, hasFullSchema, onLoadDatasourceDetails]);
-  var isEditable = onVisibleColumnKeysChange && hasData;
-  // Sorting is enabled only when the table owns the header interaction (read-only mode).
-  // Editable tables reserve header interactions for drag/resize/wrap controls.
-  var shouldEnableColumnSort = !!onColumnSort && !onVisibleColumnKeysChange && !onColumnResize && !onWrappedColumnChange;
-  var orderedColumnsAreUpToDate = orderedColumns.length === columns.length;
-  var shouldDisplayColumnsInPicker = hasFullSchema && orderedColumnsAreUpToDate;
-  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,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    style: scrollableContainerHeight ? {
-      maxHeight: "".concat(scrollableContainerHeight, "px")
-    } : undefined,
-    "data-testid": 'issue-like-table-container',
-    className: ax(["_mrkbidpf _1o0zidpf _kqswh2mm", scrollableContainerHeight && "_1reo1wug _18m91wug _vchhusvi _bfhkchd4 _1itkhcjh _ouxlbac2 _12vemgnk _1lrw1sd4 _qmxj1c00"])
-  }, /*#__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'
-    } : {},
-    className: ax(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _yq5hus1c _btyzidpf"])
-  }, /*#__PURE__*/React.createElement("thead", {
-    "data-testid": testId && "".concat(testId, "--head"),
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    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 = /*#__PURE__*/React.createElement(Tooltip, {
-      content: content,
-      tag: "span",
-      position: "bottom-start",
-      testId: 'datasource-header-content'
-    }, /*#__PURE__*/React.createElement("span", {
-      id: getFieldLabelById(key),
-      className: ax(["_11c8wadc _k48p1wq8"])
-    }, content));
-    var isHeadingOutsideButton = !isEditable || !onWrappedColumnChange;
-    if (shouldEnableColumnSort) {
-      var sortedDirection = (sortState === null || sortState === void 0 ? void 0 : sortState.key) === key ? sortState.direction : undefined;
-      // Use directional icon only for the active sort column; keep width stable otherwise.
-      var SortIcon = sortedDirection ? sortedDirection === 'ASC' ? SortAscendingIcon : SortDescendingIcon : null;
-      var sortLabel = typeof content === 'string' ? content : key;
-      var sortButtonAriaLabel = sortedDirection === 'ASC' ? formatMessage(issueLikeTableMessages.sortByColumnDescendingAction, {
-        column: sortLabel
-      }) : formatMessage(issueLikeTableMessages.sortByColumnAscendingAction, {
-        column: sortLabel
-      });
-      heading = /*#__PURE__*/React.createElement(SortableHeaderParent, null, /*#__PURE__*/React.createElement(Button, _extends({
-        appearance: "subtle",
-        spacing: "compact",
-        shouldFitContainer: true,
-        testId: "".concat(key, "-column-sort-button"),
-        "aria-label": sortButtonAriaLabel
-      }, SortIcon ? {
-        iconAfter: function iconAfter(iconProps) {
-          return /*#__PURE__*/React.createElement(SortIcon, _extends({}, iconProps, {
-            size: "small"
-          }));
-        }
-      } : {}, {
-        onClick: function onClick() {
-          return onColumnSort === null || onColumnSort === void 0 ? void 0 : onColumnSort(key);
-        }
-      }), heading));
-    } else if (isHeadingOutsideButton) {
-      heading = /*#__PURE__*/React.createElement("div", {
-        className: ax(["_1e0c1txw _4cvr1h6o _o5721q9c _8vu418qm _irr3l4ek"])
-      }, heading);
-    }
-    if (isEditable) {
-      var _containerRef$current4;
-      var previewRows = tableRows.map(function (_ref15) {
-        var cells = _ref15.cells;
-        var cell = cells.find(function (_ref16) {
-          var cellKey = _ref16.key;
-          return cellKey === key;
-        });
-        if (cell) {
-          return cell.content;
-        }
-      }).slice(0, 5);
-      var dragPreview = /*#__PURE__*/React.createElement(DragColumnPreview, {
-        title: heading,
-        rows: previewRows
-      });
-      return /*#__PURE__*/React.createElement(DraggableTableHeading, {
-        tableId: tableId,
-        key: key,
-        id: key,
-        index: cellIndex,
-        width: width,
-        onWidthChange: onColumnResize === null || onColumnResize === void 0 ? void 0 : onColumnResize.bind(null, key),
-        dndPreviewHeight: ((_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.offsetHeight) || 0,
-        dragPreview: dragPreview,
-        isWrapped: wrappedColumnKeys === null || wrappedColumnKeys === void 0 ? void 0 : wrappedColumnKeys.includes(key),
-        onIsWrappedChange: onWrappedColumnChange === null || onWrappedColumnChange === void 0 ? void 0 : onWrappedColumnChange.bind(null, key)
-      }, heading);
-    } else {
-      return /*#__PURE__*/React.createElement(TableHeading, _extends({
-        key: key,
-        "data-testid": "".concat(key, "-column-heading")
-      }, fg('platform_lp_jira_sllv_renderer_column_sorting') ? {
-        'aria-sort': (sortState === null || sortState === void 0 ? void 0 : sortState.key) === key && sortState.direction === 'ASC' ? 'ascending' : (sortState === null || sortState === void 0 ? void 0 : sortState.key) === key && sortState.direction === 'DESC' ? 'descending' : undefined
-      } : {}, {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-        style: getWidthCss({
-          shouldUseWidth: shouldUseWidth,
-          width: width
-        })
-      }), heading);
-    }
-  }), onVisibleColumnKeysChange && (shouldShowTableSettingsMenu ? /*#__PURE__*/React.createElement(ColumnPickerHeaderWithSettings, null, /*#__PURE__*/React.createElement(Inline, {
-    alignBlock: "center",
-    alignInline: "end",
-    space: "space.050"
-  }, /*#__PURE__*/React.createElement(ColumnPicker, {
-    columns: shouldDisplayColumnsInPicker ? orderedColumns : [],
-    selectedColumnKeys: shouldDisplayColumnsInPicker ? visibleColumnKeys : [],
-    onSelectedColumnKeysChange: onSelectedColumnKeysChange,
-    onOpen: handlePickerOpen
-  }), /*#__PURE__*/React.createElement(TableSettingsMenu, {
-    wrapTextSetting: tableSettingsMenuProps.wrapTextSetting
-  }))) : /*#__PURE__*/React.createElement(ColumnPickerHeader, null, /*#__PURE__*/React.createElement(ColumnPicker, {
-    columns: shouldDisplayColumnsInPicker ? orderedColumns : [],
-    selectedColumnKeys: shouldDisplayColumnsInPicker ? visibleColumnKeys : [],
-    onSelectedColumnKeysChange: onSelectedColumnKeysChange,
-    onOpen: handlePickerOpen
-  }))))), /*#__PURE__*/React.createElement("tbody", {
-    "data-testid": testId && "".concat(testId, "--body"),
-    className: ax(["_n7zlidpf"])
-  }, hasNoResults && /*#__PURE__*/React.createElement("tr", {
-    "data-testid": testId && "".concat(testId, "--no-results-row")
-  }, /*#__PURE__*/React.createElement(InlineEditableTableCell, {
-    colSpan: Math.max(headerColumns.length + (onVisibleColumnKeysChange ? 1 : 0), 1)
-  }, /*#__PURE__*/React.createElement("div", {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- width is measured from the scrollport at runtime
-    style: {
-      width: noResultsWidth
-    },
-    className: ax(["_kqsw1if8 _1ltvidpf _1e0c1txw _1bah1h6o"])
-  }, /*#__PURE__*/React.createElement(NoResults, {
-    isCompact: true
-  })))), rows.map(function (_ref17) {
-    var key = _ref17.key,
-      cells = _ref17.cells,
-      ref = _ref17.ref;
-    return /*#__PURE__*/React.createElement("tr", {
-      key: key,
-      "data-testid": testId && "".concat(testId, "--row-").concat(key),
-      ref: ref
-    }, cells.map(function (_ref18, cellIndex) {
-      var cellKey = _ref18.key,
-        cellType = _ref18.type,
-        content = _ref18.content,
-        width = _ref18.width;
-      var isLastCell = cellIndex === cells.length - 1;
-      var loadingRowStyle = getWidthCss({
-        shouldUseWidth: shouldUseWidth,
-        width: width
-      });
-      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,
-        className: ax([wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(cellKey) ? "_o5724jg8" : "_1bto1l2s _o5721q9c", cellType === 'richtext' && fg('platform_lp_sllv_richtext_margin_reset') && "_s7n4jp4b"])
-      }, content);
-    }));
-  }))));
-  return /*#__PURE__*/React.createElement(FlagsProvider, null, view);
-};
+import TableEmptyState from './empty-state';
 export var EmptyState = TableEmptyState;