@atlaskit/link-datasource 3.22.6 → 4.0.0

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

@@ -1,678 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.scrollableContainerShadowsCssComponents = exports.getOrderedColumns = exports.IssueLikeDataTableViewOld = exports.EmptyStateOld = void 0;
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-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 _debounce = _interopRequireDefault(require("lodash/debounce"));
-var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
-var _flag = require("@atlaskit/flag");
-var _linkingCommon = require("@atlaskit/linking-common");
-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 _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 _renderType = require("./render-type");
-var _styled2 = require("./styled");
-var _tableCellContent = require("./table-cell-content");
-var _useIsOnScreen = require("./useIsOnScreen");
-var _utils = require("./utils");
-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
-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 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 tableContainerStyles = (0, _react2.css)({
-  borderBottomLeftRadius: 0,
-  borderBottomRightRadius: 0,
-  position: 'relative'
-});
-
-/**
- * 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.
- */
-
-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
-});
-
-// 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)"
-  }
-});
-function extractIndex(data) {
-  var index = data.index;
-  (0, _tinyInvariant.default)(typeof index === 'number');
-  return index;
-}
-var sortColumns = function sortColumns(firstOption, secondOption) {
-  return firstOption.title.localeCompare(secondOption.title);
-};
-var getOrderedColumns = exports.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((0, _toConsumableArray2.default)(visibleColumns), (0, _toConsumableArray2.default)(alphabeticallySortedInvisibleColumns));
-};
-var DEFAULT_WIDTH = _utils.COLUMN_BASE_WIDTH * 22;
-var keyBasedWidthMap = {
-  priority: _utils.COLUMN_BASE_WIDTH * 12.5,
-  // 100px
-  status: _utils.COLUMN_BASE_WIDTH * 12.5,
-  summary: _utils.COLUMN_BASE_WIDTH * 45,
-  description: _utils.COLUMN_BASE_WIDTH * 31,
-  type: _utils.COLUMN_BASE_WIDTH * 6,
-  key: _utils.COLUMN_BASE_WIDTH * 15
-};
-function getDefaultColumnWidth(key, type) {
-  var keyBasedWidth = keyBasedWidthMap[key];
-  if (keyBasedWidth) {
-    return keyBasedWidth;
-  }
-  switch (type) {
-    case 'date':
-      return _utils.COLUMN_BASE_WIDTH * 16;
-    case 'icon':
-      return _utils.COLUMN_BASE_WIDTH * 7;
-    default:
-      return DEFAULT_WIDTH;
-  }
-}
-var IssueLikeDataTableViewOld = exports.IssueLikeDataTableViewOld = function IssueLikeDataTableViewOld(_ref5) {
-  var testId = _ref5.testId,
-    onNextPage = _ref5.onNextPage,
-    onLoadDatasourceDetails = _ref5.onLoadDatasourceDetails,
-    items = _ref5.items,
-    itemIds = _ref5.itemIds,
-    columns = _ref5.columns,
-    _ref5$renderItem = _ref5.renderItem,
-    renderItem = _ref5$renderItem === void 0 ? _renderType.renderType : _ref5$renderItem,
-    visibleColumnKeys = _ref5.visibleColumnKeys,
-    onVisibleColumnKeysChange = _ref5.onVisibleColumnKeysChange,
-    columnCustomSizes = _ref5.columnCustomSizes,
-    onColumnResize = _ref5.onColumnResize,
-    wrappedColumnKeys = _ref5.wrappedColumnKeys,
-    onWrappedColumnChange = _ref5.onWrappedColumnChange,
-    status = _ref5.status,
-    hasNextPage = _ref5.hasNextPage,
-    scrollableContainerHeight = _ref5.scrollableContainerHeight,
-    extensionKey = _ref5.extensionKey;
-  var tableId = (0, _react.useMemo)(function () {
-    return Symbol('unique-id');
-  }, []);
-  var experienceId = (0, _datasourceExperienceId.useDatasourceExperienceId)();
-  var tableHeaderRowRef = (0, _react.useRef)(null);
-  var _useState = (0, _react.useState)(null),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    lastRowElement = _useState2[0],
-    setLastRowElement = _useState2[1];
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    hasFullSchema = _useState4[0],
-    setHasFullSchema = _useState4[1];
-  var isBottomOfTableVisibleRaw = (0, _useIsOnScreen.useIsOnScreen)(lastRowElement);
-  var containerRef = (0, _react.useRef)(null);
-  var _useState5 = (0, _react.useState)(function () {
-      return getOrderedColumns((0, _toConsumableArray2.default)(columns), (0, _toConsumableArray2.default)(visibleColumnKeys));
-    }),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    orderedColumns = _useState6[0],
-    setOrderedColumns = _useState6[1];
-
-  // Table container width is used to know if sum of all column widths is bigger of container or not.
-  // When sum of all columns is less than container size we make last column stretchable (width: undefined)
-  var _useState7 = (0, _react.useState)(),
-    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    tableContainerWidth = _useState8[0],
-    setTableContainerWidth = _useState8[1];
-  (0, _react.useEffect)(function () {
-    var current = containerRef.current;
-    if (containerRef && current) {
-      setTableContainerWidth(current.getBoundingClientRect().width);
-    }
-  }, [containerRef]);
-  (0, _react.useEffect)(function () {
-    if (orderedColumns.length !== columns.length) {
-      setOrderedColumns(getOrderedColumns((0, _toConsumableArray2.default)(columns), (0, _toConsumableArray2.default)(visibleColumnKeys)));
-    }
-  }, [columns, visibleColumnKeys, orderedColumns]);
-  (0, _react.useEffect)(function () {
-    if (experienceId && status === 'resolved') {
-      (0, _ufoExperiences.succeedUfoExperience)({
-        name: 'datasource-rendered'
-      }, experienceId);
-    }
-  }, [experienceId, status]);
-  var visibleSortedColumns = (0, _react.useMemo)(function () {
-    return visibleColumnKeys.map(function (visibleKey) {
-      return orderedColumns.find(function (_ref6) {
-        var key = _ref6.key;
-        return visibleKey === key;
-      });
-    }).filter(Boolean);
-  }, [orderedColumns, visibleColumnKeys]);
-
-  // 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 = (0, _react.useMemo)(function () {
-    return visibleSortedColumns.map(function (_ref7) {
-      var key = _ref7.key,
-        type = _ref7.type;
-      return (columnCustomSizes === null || columnCustomSizes === void 0 ? void 0 : columnCustomSizes[key]) || getDefaultColumnWidth(key, type);
-    }).reduce(function (sum, width) {
-      return width + sum;
-    }, 0) + (onVisibleColumnKeysChange ? columnPickerWidth : 0);
-  }, [columnCustomSizes, onVisibleColumnKeysChange, visibleSortedColumns]);
-  var shouldUseWidth = !!(onColumnResize || columnCustomSizes);
-  var getColumnWidth = (0, _react.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 = (0, _react.useMemo)(function () {
-    return visibleSortedColumns.map(function (_ref8, index) {
-      var key = _ref8.key,
-        title = _ref8.title,
-        type = _ref8.type;
-      return {
-        key: key,
-        content: title,
-        shouldTruncate: true,
-        width: getColumnWidth(key, type, index === visibleSortedColumns.length - 1)
-      };
-    });
-  }, [getColumnWidth, visibleSortedColumns]);
-  var loadingRow = (0, _react.useMemo)(function () {
-    return {
-      key: 'loading',
-      cells: headerColumns.map(function (column) {
-        return {
-          content: (0, _react2.jsx)(_primitives.Box, {
-            paddingInline: "space.100"
-          }, (0, _react2.jsx)(_linkingCommon.Skeleton, {
-            borderRadius: 8,
-            width: "100%",
-            height: 14,
-            testId: "issues-table-row-loading"
-          })),
-          key: column.key
-        };
-      })
-    };
-  }, [headerColumns]);
-  (0, _react.useEffect)(function () {
-    if (isBottomOfTableVisibleRaw && hasNextPage && status === 'resolved') {
-      void onNextPage({
-        isSchemaFromData: false,
-        shouldForceRequest: true
-      });
-    }
-  }, [isBottomOfTableVisibleRaw, status, hasNextPage, onNextPage]);
-  var hasData = items.length > 0;
-
-  // This variable contains initial Y mouse coordinate, so we can restrict
-  // autoScroller in X axis only
-  var initialAutoScrollerClientY = (0, _react.useRef)();
-  (0, _react.useEffect)(function () {
-    if (!onVisibleColumnKeysChange || !hasData) {
-      return;
-    }
-    return (0, _combine.combine)((0, _adapter.monitorForElements)({
-      onDragStart: function onDragStart(_ref9) {
-        var location = _ref9.location,
-          source = _ref9.source;
-        initialAutoScrollerClientY.current = location.current.input.clientY;
-        if (source.data.type === 'table-header') {
-          var _containerRef$current;
-          _pragmaticDragAndDropReactBeautifulDndAutoscroll.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$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.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$current2;
-          _pragmaticDragAndDropReactBeautifulDndAutoscroll.autoScroller.updateInput({
-            input: _objectSpread(_objectSpread({}, location.current.input), {}, {
-              clientY: (initialAutoScrollerClientY.current || 0) + (((_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.offsetHeight) || 0) / 2
-            })
-          });
-        }
-      },
-      onDrop: function onDrop(_ref11) {
-        var source = _ref11.source,
-          location = _ref11.location;
-        _pragmaticDragAndDropReactBeautifulDndAutoscroll.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 = (0, _closestEdge.extractClosestEdge)(target.data);
-          (0, _tinyInvariant.default)(closestEdgeOfTarget === 'left' || closestEdgeOfTarget === 'right');
-          var startIndex = extractIndex(source.data);
-          var indexOfTarget = extractIndex(target.data);
-          var newColumnKeyOrder = (0, _reorderWithEdge.reorderWithEdge)({
-            list: visibleColumnKeys,
-            closestEdgeOfTarget: closestEdgeOfTarget,
-            startIndex: startIndex,
-            indexOfTarget: indexOfTarget,
-            axis: 'horizontal'
-          });
-          onVisibleColumnKeysChange === null || onVisibleColumnKeysChange === void 0 || onVisibleColumnKeysChange((0, _toConsumableArray2.default)(newColumnKeyOrder));
-
-          // We sort columns (whole objects) according to their key order presented in newColumnKeyOrder
-          setOrderedColumns(function (columns) {
-            return getOrderedColumns((0, _toConsumableArray2.default)(columns), (0, _toConsumableArray2.default)(newColumnKeyOrder));
-          });
-        }
-      }
-    }));
-  }, [visibleColumnKeys, onVisibleColumnKeysChange, tableId, hasData]);
-  var tableRows = (0, _react.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,
-            // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-            content: (0, _react2.jsx)(_tableCellContent.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 rows = (0, _react.useMemo)(function () {
-    if (status !== 'loading') {
-      return tableRows;
-    }
-    // if there are table rows, only add 1 loading row
-    if (tableRows.length > 0) {
-      return [].concat((0, _toConsumableArray2.default)(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;
-    return (0, _toConsumableArray2.default)(Array(loadingRowsCount)).map(function (_, index) {
-      return _objectSpread(_objectSpread({}, loadingRow), {}, {
-        key: "loading-".concat(index)
-      });
-    });
-  }, [loadingRow, status, tableRows, scrollableContainerHeight]);
-  var onSelectedColumnKeysChange = (0, _react.useCallback)(function (newSelectedColumnKeys) {
-    onVisibleColumnKeysChange === null || onVisibleColumnKeysChange === void 0 || onVisibleColumnKeysChange(newSelectedColumnKeys);
-  }, [onVisibleColumnKeysChange]);
-  var handlePickerOpen = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-    return _regenerator.default.wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          if (!hasFullSchema) {
-            _context.next = 2;
-            break;
-          }
-          return _context.abrupt("return");
-        case 2:
-          if (experienceId) {
-            (0, _ufoExperiences.startUfoExperience)({
-              name: 'column-picker-rendered',
-              metadata: {
-                extensionKey: extensionKey !== null && extensionKey !== void 0 ? extensionKey : undefined
-              }
-            }, experienceId);
-          }
-          _context.prev = 3;
-          _context.next = 6;
-          return onLoadDatasourceDetails();
-        case 6:
-          setHasFullSchema(true);
-          _context.next = 12;
-          break;
-        case 9:
-          _context.prev = 9;
-          _context.t0 = _context["catch"](3);
-          setHasFullSchema(false);
-        case 12:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee, null, [[3, 9]]);
-  })), [experienceId, extensionKey, hasFullSchema, onLoadDatasourceDetails]);
-  var isEditable = onVisibleColumnKeysChange && hasData;
-  var orderedColumnsAreUpToDate = orderedColumns.length === columns.length;
-  var shouldDisplayColumnsInPicker = hasFullSchema && orderedColumnsAreUpToDate;
-  var view = (0, _react2.jsx)("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: "".concat(scrollableContainerHeight, "px")
-    } : undefined,
-    "data-testid": 'issue-like-table-container'
-  }, (0, _react2.jsx)(_widthDetector.WidthObserver, {
-    setWidth: (0, _debounce.default)(setTableContainerWidth, 100)
-  }), (0, _react2.jsx)(_styled2.Table, {
-    css: tableStyles,
-    "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", {
-    "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", {
-    ref: tableHeaderRowRef
-  }, headerColumns.map(function (_ref14, cellIndex) {
-    var key = _ref14.key,
-      content = _ref14.content,
-      width = _ref14.width;
-    var heading = (0, _react2.jsx)(_tooltip.default, {
-      content: content,
-      tag: "span",
-      position: "bottom-start",
-      testId: 'datasource-header-content'
-    }, (0, _react2.jsx)("span", {
-      css: headerStyles,
-      id: (0, _utils.getFieldLabelById)(key)
-    }, content));
-    var isHeadingOutsideButton = !isEditable || !onWrappedColumnChange;
-    if (isHeadingOutsideButton) {
-      heading = (0, _react2.jsx)("div", {
-        css: headingHoverEffectStyles
-      }, heading);
-    }
-    if (isEditable) {
-      var _containerRef$current3;
-      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 = (0, _react2.jsx)(_dragColumnPreview.DragColumnPreview, {
-        title: heading,
-        rows: previewRows
-      });
-      return (0, _react2.jsx)(_draggableTableHeading.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$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.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 (0, _react2.jsx)(_styled2.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
-        ,
-        style: (0, _utils.getWidthCss)({
-          shouldUseWidth: shouldUseWidth,
-          width: width
-        })
-      }, heading);
-    }
-  }), onVisibleColumnKeysChange && (0, _react2.jsx)(ColumnPickerHeader, null, (0, _react2.jsx)(_columnPicker.ColumnPicker, {
-    columns: shouldDisplayColumnsInPicker ? orderedColumns : [],
-    selectedColumnKeys: shouldDisplayColumnsInPicker ? visibleColumnKeys : [],
-    onSelectedColumnKeysChange: onSelectedColumnKeysChange,
-    onOpen: handlePickerOpen
-  })))), (0, _react2.jsx)("tbody", {
-    css: noDefaultBorderStyles,
-    "data-testid": testId && "".concat(testId, "--body")
-  }, rows.map(function (_ref17) {
-    var key = _ref17.key,
-      cells = _ref17.cells,
-      ref = _ref17.ref;
-    return (0, _react2.jsx)("tr", {
-      key: key,
-      "data-testid": testId && "".concat(testId, "--row-").concat(key),
-      ref: ref
-    }, cells.map(function (_ref18, cellIndex) {
-      var cellKey = _ref18.key,
-        content = _ref18.content,
-        width = _ref18.width;
-      var isLastCell = cellIndex === cells.length - 1;
-      var loadingRowStyle = (0, _utils.getWidthCss)({
-        shouldUseWidth: shouldUseWidth,
-        width: width
-      });
-      return (0, _react2.jsx)(_styled2.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]
-      }, content);
-    }));
-  }))));
-  return (0, _react2.jsx)(_flag.FlagsProvider, null, view);
-};
-var EmptyStateOld = exports.EmptyStateOld = _emptyState.default;