@atlaskit/link-datasource 6.8.0 → 6.10.0

package/dist/cjs/ui/issue-like-table/issue-like-data-table-view.js

@@ -0,0 +1,786 @@
+/* issue-like-data-table-view.tsx generated by @compiled/babel-plugin v2.0.0 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IssueLikeDataTableView = void 0;
+require("./issue-like-data-table-view.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _reactIntl = require("react-intl");
+var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
+var _button = _interopRequireDefault(require("@atlaskit/button/default/button"));
+var _flagsProvider = require("@atlaskit/flag/flags-provider");
+var _sortAscending = _interopRequireDefault(require("@atlaskit/icon/core/sort-ascending"));
+var _sortDescending = _interopRequireDefault(require("@atlaskit/icon/core/sort-descending"));
+var _linkingCommon = require("@atlaskit/linking-common");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
+var _extractClosestEdge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge/extract-closest-edge");
+var _reorderWithEdge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge");
+var _autoScroller = require("@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll/auto-scroller");
+var _elementAdapter = require("@atlaskit/pragmatic-drag-and-drop/adapter/element-adapter");
+var _combine = require("@atlaskit/pragmatic-drag-and-drop/utils/combine");
+var _compiled = require("@atlaskit/primitives/compiled");
+var _Tooltip = _interopRequireDefault(require("@atlaskit/tooltip/Tooltip"));
+var _startUfoExperience = require("../../analytics/ufoExperiences/startUfoExperience");
+var _succeedUfoExperience = require("../../analytics/ufoExperiences/succeedUfoExperience");
+var _useDatasourceExperienceId = require("../../contexts/datasource-experience-id/use-datasource-experience-id");
+var _useIsInPDFRender = require("../../hooks/useIsInPDFRender");
+var _noResults = require("../common/error-state/no-results");
+var _columnPicker = require("./column-picker");
+var _dragColumnPreview = require("./drag-column-preview");
+var _draggableTableHeading = require("./draggable-table-heading");
+var _getFieldLabelById = require("./get-field-label-by-id");
+var _getOrderedColumns = require("./get-ordered-columns");
+var _getWidthCss = require("./get-width-css");
+var _messages = require("./messages");
+var _renderType = require("./render-type/renderType");
+var _tableCellContent = require("./table-cell-content/table-cell-content");
+var _TableSettingsMenu = require("./table-settings-menu/TableSettingsMenu");
+var _hasAvailableTableSettings = require("./table-settings-menu/hasAvailableTableSettings");
+var _useIsOnScreen = require("./useIsOnScreen");
+var _utils = require("./utils");
+var _excluded = ["as", "style"],
+  _excluded2 = ["as", "style"],
+  _excluded3 = ["as", "style"],
+  _excluded4 = ["as", "style"],
+  _excluded5 = ["as", "style"],
+  _excluded6 = ["as", "style"];
+/* eslint-disable @atlaskit/design-system/use-tokens-typography */
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+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; }
+var tableSidePadding = "var(--ds-space-200, 16px)";
+var columnPickerWidth = 80;
+var columnPickerWithSettingsWidth = 95;
+var tableHeadStyles = null;
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
+var ColumnPickerHeader = (0, _react.forwardRef)(function (_ref, __cmplr) {
+  var _ref$as = _ref.as,
+    C = _ref$as === void 0 ? "th" : _ref$as,
+    __cmpls = _ref.style,
+    __cmplp = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(C, (0, _extends2.default)({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: (0, _runtime.ax)(["_1bqmidpf _2eacidpf _1rmlidpf _13xs13hi _19xw13hi _ex0g13hi _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 = (0, _react.forwardRef)(function (_ref2, __cmplr) {
+  var _ref2$as = _ref2.as,
+    C = _ref2$as === void 0 ? "th" : _ref2$as,
+    __cmpls = _ref2.style,
+    __cmplp = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
+  return /*#__PURE__*/React.createElement(C, (0, _extends2.default)({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: (0, _runtime.ax)(["_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 = (0, _react.forwardRef)(function (_ref3, __cmplr) {
+  var _ref3$as = _ref3.as,
+    C = _ref3$as === void 0 ? "table" : _ref3$as,
+    __cmpls = _ref3.style,
+    __cmplp = (0, _objectWithoutProperties2.default)(_ref3, _excluded3);
+  return /*#__PURE__*/React.createElement(C, (0, _extends2.default)({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: (0, _runtime.ax)(["_1bsb1osq", __cmplp.className])
+  }));
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
+if (process.env.NODE_ENV !== 'production') {
+  Table.displayName = 'Table';
+}
+var TableHeading = (0, _react.forwardRef)(function (_ref4, __cmplr) {
+  var _ref4$as = _ref4.as,
+    C = _ref4$as === void 0 ? "th" : _ref4$as,
+    __cmpls = _ref4.style,
+    __cmplp = (0, _objectWithoutProperties2.default)(_ref4, _excluded4);
+  return /*#__PURE__*/React.createElement(C, (0, _extends2.default)({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: (0, _runtime.ax)(["_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 = (0, _react.forwardRef)(function (_ref5, __cmplr) {
+  var _ref5$as = _ref5.as,
+    C = _ref5$as === void 0 ? "td" : _ref5$as,
+    __cmpls = _ref5.style,
+    __cmplp = (0, _objectWithoutProperties2.default)(_ref5, _excluded5);
+  return /*#__PURE__*/React.createElement(C, (0, _extends2.default)({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: (0, _runtime.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.
+ */
+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 = (0, _react.forwardRef)(function (_ref6, __cmplr) {
+  var _ref6$as = _ref6.as,
+    C = _ref6$as === void 0 ? "div" : _ref6$as,
+    __cmpls = _ref6.style,
+    __cmplp = (0, _objectWithoutProperties2.default)(_ref6, _excluded6);
+  return /*#__PURE__*/React.createElement(C, (0, _extends2.default)({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: (0, _runtime.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;
+  (0, _tinyInvariant.default)(typeof index === 'number');
+  return index;
+}
+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,
+  issuetype: _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 IssueLikeDataTableView = exports.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.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 = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var tableId = (0, _react.useMemo)(function () {
+    return Symbol('unique-id');
+  }, []);
+  var experienceId = (0, _useDatasourceExperienceId.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 isInPDFRender = (0, _useIsInPDFRender.useIsInPDFRender)();
+  var isBottomOfTableVisibleRaw = (0, _useIsOnScreen.useIsOnScreen)(lastRowElement) && !isInPDFRender;
+  var containerRef = (0, _react.useRef)(null);
+  var _useState5 = (0, _react.useState)(function () {
+      return (0, _getOrderedColumns.getOrderedColumns)((0, _toConsumableArray2.default)(columns), (0, _toConsumableArray2.default)(visibleColumnKeys));
+    }),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    orderedColumns = _useState6[0],
+    setOrderedColumns = _useState6[1];
+  (0, _react.useEffect)(function () {
+    if (orderedColumns.length !== columns.length) {
+      setOrderedColumns((0, _getOrderedColumns.getOrderedColumns)((0, _toConsumableArray2.default)(columns), (0, _toConsumableArray2.default)(visibleColumnKeys)));
+    }
+  }, [columns, visibleColumnKeys, orderedColumns]);
+  (0, _react.useEffect)(function () {
+    if (experienceId && status === 'resolved') {
+      (0, _succeedUfoExperience.succeedUfoExperience)({
+        name: 'datasource-rendered'
+      }, experienceId);
+    }
+  }, [experienceId, status]);
+  var visibleSortedColumns = (0, _react.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) && (0, _fg.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 = (0, _react.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((0, _toConsumableArray2.default)(wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 ? wrappedColumnKeys : []), (0, _toConsumableArray2.default)(visibleColumnKeys))));
+    onWrappedColumnsChange(nextWrappedColumnKeys);
+  }, [areAllVisibleColumnsWrapped, onWrappedColumnsChange, visibleColumnKeys, wrappedColumnKeys]);
+  var tableSettingsMenuProps = {
+    wrapTextSetting: isWrapTextSettingAvailable ? {
+      isChecked: areAllVisibleColumnsWrapped,
+      onChange: handleWrapTextOnAllColumnsChange
+    } : undefined
+  };
+  var shouldShowTableSettingsMenu = (0, _hasAvailableTableSettings.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 = (0, _react.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 = (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 (_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 = (0, _react.useMemo)(function () {
+    return {
+      key: 'loading',
+      cells: headerColumns.map(function (column) {
+        return {
+          content: /*#__PURE__*/React.createElement(_compiled.Box, {
+            paddingInline: "space.100"
+          }, /*#__PURE__*/React.createElement(_linkingCommon.Skeleton, {
+            borderRadius: "var(--ds-radius-large, 8px)",
+            width: "100%",
+            height: 14,
+            testId: "issues-table-row-loading"
+          })),
+          key: column.key,
+          width: column.width
+        };
+      })
+    };
+  }, [headerColumns]);
+  (0, _react.useEffect)(function () {
+    if (isBottomOfTableVisibleRaw && hasNextPage && status === 'resolved') {
+      void onNextPage({
+        isSchemaFromData: false,
+        shouldForceRequest: true
+      });
+    }
+  }, [isBottomOfTableVisibleRaw, status, hasNextPage, onNextPage]);
+  (0, _react.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 && (0, _fg.fg)('platform_lp_sllv_ux_improvements');
+  var _useState7 = (0, _react.useState)(),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    noResultsWidth = _useState8[0],
+    setNoResultsWidth = _useState8[1];
+  (0, _react.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 = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {
+    if (!onVisibleColumnKeysChange || !hasData) {
+      return;
+    }
+    return (0, _combine.combine)((0, _elementAdapter.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.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.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.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, _extractClosestEdge.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 (0, _getOrderedColumns.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,
+            type: type,
+            content: /*#__PURE__*/React.createElement(_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 previousRealRowsCountRef = (0, _react.useRef)(undefined);
+  (0, _react.useEffect)(function () {
+    if (tableRows.length > 0) {
+      previousRealRowsCountRef.current = tableRows.length;
+    }
+  }, [tableRows.length]);
+  var rows = (0, _react.useMemo)(function () {
+    if ((0, _fg.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((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;
+    if ((0, _fg.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 (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() {
+    var _t;
+    return _regenerator.default.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) {
+            (0, _startUfoExperience.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: (0, _runtime.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: (0, _runtime.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: (0, _runtime.ax)(["_n7zlidpf", "_bfhkchd4 _kqsw1if8 _154iidpf _1pbyzo7u", !!onVisibleColumnKeysChange ? 'has-column-picker' : ''])
+  }, /*#__PURE__*/React.createElement("tr", {
+    ref: tableHeaderRowRef
+  }, headerColumns.map(function (_ref14, cellIndex) {
+    var key = _ref14.key,
+      content = _ref14.content,
+      width = _ref14.width;
+    var heading = /*#__PURE__*/React.createElement(_Tooltip.default, {
+      content: content,
+      tag: "span",
+      position: "bottom-start",
+      testId: 'datasource-header-content'
+    }, /*#__PURE__*/React.createElement("span", {
+      id: (0, _getFieldLabelById.getFieldLabelById)(key),
+      className: (0, _runtime.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' ? _sortAscending.default : _sortDescending.default : null;
+      var sortLabel = typeof content === 'string' ? content : key;
+      var sortButtonAriaLabel = sortedDirection === 'ASC' ? formatMessage(_messages.issueLikeTableMessages.sortByColumnDescendingAction, {
+        column: sortLabel
+      }) : formatMessage(_messages.issueLikeTableMessages.sortByColumnAscendingAction, {
+        column: sortLabel
+      });
+      heading = /*#__PURE__*/React.createElement(SortableHeaderParent, null, /*#__PURE__*/React.createElement(_button.default, (0, _extends2.default)({
+        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, (0, _extends2.default)({}, 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: (0, _runtime.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.DragColumnPreview, {
+        title: heading,
+        rows: previewRows
+      });
+      return /*#__PURE__*/React.createElement(_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$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, (0, _extends2.default)({
+        key: key,
+        "data-testid": "".concat(key, "-column-heading")
+      }, (0, _fg.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: (0, _getWidthCss.getWidthCss)({
+          shouldUseWidth: shouldUseWidth,
+          width: width
+        })
+      }), heading);
+    }
+  }), onVisibleColumnKeysChange && (shouldShowTableSettingsMenu ? /*#__PURE__*/React.createElement(ColumnPickerHeaderWithSettings, null, /*#__PURE__*/React.createElement(_compiled.Inline, {
+    alignBlock: "center",
+    alignInline: "end",
+    space: "space.050"
+  }, /*#__PURE__*/React.createElement(_columnPicker.ColumnPicker, {
+    columns: shouldDisplayColumnsInPicker ? orderedColumns : [],
+    selectedColumnKeys: shouldDisplayColumnsInPicker ? visibleColumnKeys : [],
+    onSelectedColumnKeysChange: onSelectedColumnKeysChange,
+    onOpen: handlePickerOpen
+  }), /*#__PURE__*/React.createElement(_TableSettingsMenu.TableSettingsMenu, {
+    wrapTextSetting: tableSettingsMenuProps.wrapTextSetting
+  }))) : /*#__PURE__*/React.createElement(ColumnPickerHeader, null, /*#__PURE__*/React.createElement(_columnPicker.ColumnPicker, {
+    columns: shouldDisplayColumnsInPicker ? orderedColumns : [],
+    selectedColumnKeys: shouldDisplayColumnsInPicker ? visibleColumnKeys : [],
+    onSelectedColumnKeysChange: onSelectedColumnKeysChange,
+    onOpen: handlePickerOpen
+  }))))), /*#__PURE__*/React.createElement("tbody", {
+    "data-testid": testId && "".concat(testId, "--body"),
+    className: (0, _runtime.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: (0, _runtime.ax)(["_kqsw1if8 _1ltvidpf _1e0c1txw _1bah1h6o"])
+  }, /*#__PURE__*/React.createElement(_noResults.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 = (0, _getWidthCss.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: (0, _runtime.ax)([wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(cellKey) ? "_o5724jg8" : "_1bto1l2s _o5721q9c", cellType === 'richtext' && (0, _fg.fg)('platform_lp_sllv_richtext_margin_reset') && "_s7n4jp4b"])
+      }, content);
+    }));
+  }))));
+  return /*#__PURE__*/React.createElement(_flagsProvider.FlagsProvider, null, view);
+};