@atlaskit/link-datasource 3.19.2 → 3.20.0

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

@@ -0,0 +1,678 @@
+"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;