@atlaskit/link-datasource 6.5.0 → 6.7.0

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

@@ -20,24 +20,25 @@ 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 _new = _interopRequireDefault(require("@atlaskit/button/new"));
-var _flag = require("@atlaskit/flag");
+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 _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _closestEdge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge");
+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 _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 _combine = require("@atlaskit/pragmatic-drag-and-drop/utils/combine");
+var _elementAdapter = require("@atlaskit/pragmatic-drag-and-drop/adapter/element-adapter");
 var _compiled = require("@atlaskit/primitives/compiled");
-var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _Tooltip = _interopRequireDefault(require("@atlaskit/tooltip/Tooltip"));
 var _ufoExperiences = require("../../analytics/ufoExperiences");
 var _datasourceExperienceId = require("../../contexts/datasource-experience-id");
 var _useIsInPDFRender = require("../../hooks/useIsInPDFRender");
 var _noResults = require("../common/error-state/no-results");
 var _columnPicker = require("./column-picker");
+var _tableSettingsMenu = require("./table-settings-menu");
 var _dragColumnPreview = require("./drag-column-preview");
 var _draggableTableHeading = require("./draggable-table-heading");
 var _emptyState = _interopRequireDefault(require("./empty-state"));
@@ -50,7 +51,8 @@ var _excluded = ["as", "style"],
   _excluded2 = ["as", "style"],
   _excluded3 = ["as", "style"],
   _excluded4 = ["as", "style"],
-  _excluded5 = ["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; }
@@ -58,6 +60,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var tableSidePadding = "var(--ds-space-200, 16px)";
 var tableHeadStyles = null;
 var columnPickerWidth = 80;
+var columnPickerWithSettingsWidth = 95;
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var ColumnPickerHeader = (0, _react.forwardRef)(function (_ref, __cmplr) {
   var _ref$as = _ref.as,
@@ -70,9 +73,24 @@ var ColumnPickerHeader = (0, _react.forwardRef)(function (_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;
@@ -95,11 +113,11 @@ var getHorizontalScrollParent = function getHorizontalScrollParent(element) {
 };
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
-var Table = (0, _react.forwardRef)(function (_ref2, __cmplr) {
-  var _ref2$as = _ref2.as,
-    C = _ref2$as === void 0 ? "table" : _ref2$as,
-    __cmpls = _ref2.style,
-    __cmplp = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
+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,
@@ -111,11 +129,11 @@ var Table = (0, _react.forwardRef)(function (_ref2, __cmplr) {
 if (process.env.NODE_ENV !== 'production') {
   Table.displayName = 'Table';
 }
-var TableHeading = (0, _react.forwardRef)(function (_ref3, __cmplr) {
-  var _ref3$as = _ref3.as,
-    C = _ref3$as === void 0 ? "th" : _ref3$as,
-    __cmpls = _ref3.style,
-    __cmplp = (0, _objectWithoutProperties2.default)(_ref3, _excluded3);
+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,
@@ -127,11 +145,11 @@ var TableHeading = (0, _react.forwardRef)(function (_ref3, __cmplr) {
 if (process.env.NODE_ENV !== 'production') {
   TableHeading.displayName = 'TableHeading';
 }
-var InlineEditableTableCell = (0, _react.forwardRef)(function (_ref4, __cmplr) {
-  var _ref4$as = _ref4.as,
-    C = _ref4$as === void 0 ? "td" : _ref4$as,
-    __cmpls = _ref4.style,
-    __cmplp = (0, _objectWithoutProperties2.default)(_ref4, _excluded4);
+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,
@@ -161,11 +179,11 @@ 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 (_ref5, __cmplr) {
-  var _ref5$as = _ref5.as,
-    C = _ref5$as === void 0 ? "div" : _ref5$as,
-    __cmpls = _ref5.style,
-    __cmplp = (0, _objectWithoutProperties2.default)(_ref5, _excluded5);
+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,
@@ -221,28 +239,29 @@ function getDefaultColumnWidth(key, type) {
       return DEFAULT_WIDTH;
   }
 }
-var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLikeDataTableView(_ref6) {
+var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLikeDataTableView(_ref7) {
   var _containerRef$current;
-  var testId = _ref6.testId,
-    onNextPage = _ref6.onNextPage,
-    onLoadDatasourceDetails = _ref6.onLoadDatasourceDetails,
-    items = _ref6.items,
-    itemIds = _ref6.itemIds,
-    columns = _ref6.columns,
-    _ref6$renderItem = _ref6.renderItem,
-    renderItem = _ref6$renderItem === void 0 ? _renderType.renderType : _ref6$renderItem,
-    visibleColumnKeys = _ref6.visibleColumnKeys,
-    onVisibleColumnKeysChange = _ref6.onVisibleColumnKeysChange,
-    columnCustomSizes = _ref6.columnCustomSizes,
-    onColumnResize = _ref6.onColumnResize,
-    onColumnSort = _ref6.onColumnSort,
-    wrappedColumnKeys = _ref6.wrappedColumnKeys,
-    onWrappedColumnChange = _ref6.onWrappedColumnChange,
-    sortState = _ref6.sortState,
-    status = _ref6.status,
-    hasNextPage = _ref6.hasNextPage,
-    scrollableContainerHeight = _ref6.scrollableContainerHeight,
-    extensionKey = _ref6.extensionKey;
+  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 () {
@@ -281,25 +300,48 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
   }, [experienceId, status]);
   var visibleSortedColumns = (0, _react.useMemo)(function () {
     return visibleColumnKeys.map(function (visibleKey) {
-      return orderedColumns.find(function (_ref7) {
-        var key = _ref7.key;
+      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, _tableSettingsMenu.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 (_ref8) {
-      var key = _ref8.key,
-        type = _ref8.type;
+    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 ? columnPickerWidth : 0);
-  }, [columnCustomSizes, onVisibleColumnKeysChange, visibleSortedColumns]);
+    }, 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) {
@@ -310,10 +352,10 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
     }
   }, [columnCustomSizes, columnsWidthsSum, shouldUseWidth, tableContainerWidth]);
   var headerColumns = (0, _react.useMemo)(function () {
-    return visibleSortedColumns.map(function (_ref9, index) {
-      var key = _ref9.key,
-        title = _ref9.title,
-        type = _ref9.type;
+    return visibleSortedColumns.map(function (_ref0, index) {
+      var key = _ref0.key,
+        title = _ref0.title,
+        type = _ref0.type;
       return {
         key: key,
         content: title,
@@ -363,7 +405,7 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
 
   // 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, _platformFeatureFlags.fg)('platform_lp_sllv_ux_improvements');
+  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],
@@ -395,10 +437,10 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
     if (!onVisibleColumnKeysChange || !hasData) {
       return;
     }
-    return (0, _combine.combine)((0, _adapter.monitorForElements)({
-      onDragStart: function onDragStart(_ref0) {
-        var location = _ref0.location,
-          source = _ref0.source;
+    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;
@@ -414,9 +456,9 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
           });
         }
       },
-      onDrag: function onDrag(_ref1) {
-        var location = _ref1.location,
-          source = _ref1.source;
+      onDrag: function onDrag(_ref10) {
+        var location = _ref10.location,
+          source = _ref10.source;
         if (source.data.type === 'table-header') {
           var _containerRef$current3;
           _pragmaticDragAndDropReactBeautifulDndAutoscroll.autoScroller.updateInput({
@@ -426,9 +468,9 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
           });
         }
       },
-      onDrop: function onDrop(_ref10) {
-        var source = _ref10.source,
-          location = _ref10.location;
+      onDrop: function onDrop(_ref11) {
+        var source = _ref11.source,
+          location = _ref11.location;
         _pragmaticDragAndDropReactBeautifulDndAutoscroll.autoScroller.stop();
         if (location.current.dropTargets.length === 0) {
           return;
@@ -438,7 +480,7 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
           return;
         }
         if (source.data.type === 'table-header' && source.data.tableId === tableId) {
-          var closestEdgeOfTarget = (0, _closestEdge.extractClosestEdge)(target.data);
+          var closestEdgeOfTarget = (0, _extractClosestEdge.extractClosestEdge)(target.data);
           (0, _tinyInvariant.default)(closestEdgeOfTarget === 'left' || closestEdgeOfTarget === 'right');
           var startIndex = extractIndex(source.data);
           var indexOfTarget = extractIndex(target.data);
@@ -463,10 +505,10 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
     return itemIds.map(function (id, rowIndex) {
       return {
         key: id,
-        cells: visibleSortedColumns.map(function (_ref11, cellIndex) {
-          var key = _ref11.key,
-            type = _ref11.type,
-            title = _ref11.title;
+        cells: visibleSortedColumns.map(function (_ref12, cellIndex) {
+          var key = _ref12.key,
+            type = _ref12.type,
+            title = _ref12.title;
           return {
             key: key,
             columnKey: key,
@@ -495,7 +537,7 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
     }
   }, [tableRows.length]);
   var rows = (0, _react.useMemo)(function () {
-    if ((0, _platformFeatureFlags.fg)('platform_lp_jira_sllv_renderer_column_sorting')) {
+    if ((0, _fg.fg)('platform_lp_jira_sllv_renderer_column_sorting')) {
       var hasPreviousRealRows = !!previousRealRowsCountRef.current;
       var isLoadingState = status === 'loading' || status === 'empty' && hasPreviousRealRows;
       if (!isLoadingState) {
@@ -516,7 +558,7 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
     // 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, _platformFeatureFlags.fg)('platform_lp_jira_sllv_renderer_column_sorting')) {
+    if ((0, _fg.fg)('platform_lp_jira_sllv_renderer_column_sorting')) {
       var defaultLoadingRowsCount = scrollableContainerHeight ? 14 : 10;
       var previousRealRowsCount = previousRealRowsCountRef.current;
       loadingRowsCount = defaultLoadingRowsCount;
@@ -602,11 +644,11 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
     className: (0, _runtime.ax)(["_n7zlidpf", "_bfhkchd4 _kqsw1if8 _154iidpf _1pbyzo7u", !!onVisibleColumnKeysChange ? 'has-column-picker' : ''])
   }, /*#__PURE__*/React.createElement("tr", {
     ref: tableHeaderRowRef
-  }, headerColumns.map(function (_ref13, cellIndex) {
-    var key = _ref13.key,
-      content = _ref13.content,
-      width = _ref13.width;
-    var heading = /*#__PURE__*/React.createElement(_tooltip.default, {
+  }, 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",
@@ -626,7 +668,7 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
       }) : formatMessage(_messages.issueLikeTableMessages.sortByColumnAscendingAction, {
         column: sortLabel
       });
-      heading = /*#__PURE__*/React.createElement(SortableHeaderParent, null, /*#__PURE__*/React.createElement(_new.default, (0, _extends2.default)({
+      heading = /*#__PURE__*/React.createElement(SortableHeaderParent, null, /*#__PURE__*/React.createElement(_button.default, (0, _extends2.default)({
         appearance: "subtle",
         spacing: "compact",
         shouldFitContainer: true,
@@ -650,10 +692,10 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
     }
     if (isEditable) {
       var _containerRef$current4;
-      var previewRows = tableRows.map(function (_ref14) {
-        var cells = _ref14.cells;
-        var cell = cells.find(function (_ref15) {
-          var cellKey = _ref15.key;
+      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) {
@@ -680,7 +722,7 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
       return /*#__PURE__*/React.createElement(TableHeading, (0, _extends2.default)({
         key: key,
         "data-testid": "".concat(key, "-column-heading")
-      }, (0, _platformFeatureFlags.fg)('platform_lp_jira_sllv_renderer_column_sorting') ? {
+      }, (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
@@ -690,12 +732,23 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
         })
       }), heading);
     }
-  }), onVisibleColumnKeysChange && /*#__PURE__*/React.createElement(ColumnPickerHeader, null, /*#__PURE__*/React.createElement(_columnPicker.ColumnPicker, {
+  }), 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", {
+  }))))), /*#__PURE__*/React.createElement("tbody", {
     "data-testid": testId && "".concat(testId, "--body"),
     className: (0, _runtime.ax)(["_n7zlidpf"])
   }, hasNoResults && /*#__PURE__*/React.createElement("tr", {
@@ -710,19 +763,19 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
     className: (0, _runtime.ax)(["_kqsw1if8 _1ltvidpf _1e0c1txw _1bah1h6o"])
   }, /*#__PURE__*/React.createElement(_noResults.NoResults, {
     isCompact: true
-  })))), rows.map(function (_ref16) {
-    var key = _ref16.key,
-      cells = _ref16.cells,
-      ref = _ref16.ref;
+  })))), 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 (_ref17, cellIndex) {
-      var cellKey = _ref17.key,
-        cellType = _ref17.type,
-        content = _ref17.content,
-        width = _ref17.width;
+    }, 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, _utils.getWidthCss)({
         shouldUseWidth: shouldUseWidth,
@@ -735,10 +788,10 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
         // 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, _platformFeatureFlags.fg)('platform_lp_sllv_richtext_margin_reset') && "_s7n4jp4b"])
+        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(_flag.FlagsProvider, null, view);
+  return /*#__PURE__*/React.createElement(_flagsProvider.FlagsProvider, null, view);
 };
 var EmptyState = exports.EmptyState = _emptyState.default;

package/dist/cjs/ui/issue-like-table/render-type/status/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.STATUS_TYPE_TEST_ID = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
+var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge/lozenge"));
 var STATUS_TYPE_TEST_ID = exports.STATUS_TYPE_TEST_ID = 'link-datasource-render-type--status';
 var StatusRenderType = function StatusRenderType(_ref) {
   var text = _ref.text,

package/dist/cjs/ui/issue-like-table/render-type/tag/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.TAG_TYPE_TEST_ID = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _tag = _interopRequireDefault(require("@atlaskit/tag"));
+var _removableTag = _interopRequireDefault(require("@atlaskit/tag/removable-tag"));
 var TAG_TYPE_TEST_ID = exports.TAG_TYPE_TEST_ID = 'link-datasource-render-type--tag';
 var TagRenderType = function TagRenderType(_ref) {
   var _tag$color;
@@ -17,7 +17,7 @@ var TagRenderType = function TagRenderType(_ref) {
   if (!(text && typeof text === 'string')) {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
   }
-  return /*#__PURE__*/_react.default.createElement(_tag.default, {
+  return /*#__PURE__*/_react.default.createElement(_removableTag.default, {
     text: text,
     testId: testId,
     appearance: 'default',

package/dist/cjs/ui/issue-like-table/render-type/user/index.js

@@ -14,10 +14,10 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _reactIntl = require("react-intl");
-var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
-var _avatarGroup = _interopRequireDefault(require("@atlaskit/avatar-group"));
+var _avatar = _interopRequireDefault(require("@atlaskit/avatar/avatar"));
+var _avatarGroup = _interopRequireDefault(require("@atlaskit/avatar-group/avatar-group"));
 var _compiled = require("@atlaskit/primitives/compiled");
-var _widthDetector = require("@atlaskit/width-detector");
+var _widthObserver = require("@atlaskit/width-detector/width-observer");
 var _messages = require("./messages");
 var _excluded = ["as", "style"];
 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 _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -99,7 +99,7 @@ var UserType = function UserType(_ref2) {
     });
     return /*#__PURE__*/_react.default.createElement(AvatarGroupWrapperStyles, null, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
       xcss: styles.widthObserverWrapperStyles
-    }, /*#__PURE__*/_react.default.createElement(_widthDetector.WidthObserver, {
+    }, /*#__PURE__*/_react.default.createElement(_widthObserver.WidthObserver, {
       setWidth: setWidth
     })), /*#__PURE__*/_react.default.createElement(_avatarGroup.default, {
       data: data,

package/dist/cjs/ui/issue-like-table/shared-components/avatar/index.js

@@ -10,9 +10,9 @@ require("./index.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
 var _reactIntl = require("react-intl");
-var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
+var _avatar = _interopRequireDefault(require("@atlaskit/avatar/avatar"));
 var _compiled = require("@atlaskit/primitives/compiled");
-var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _Tooltip = _interopRequireDefault(require("@atlaskit/tooltip/Tooltip"));
 var _user = require("../../render-type/user");
 var _messages = require("../../render-type/user/messages");
 var styles = {
@@ -21,7 +21,7 @@ var styles = {
 };
 var EmptyAvatar = exports.EmptyAvatar = function EmptyAvatar() {
   var intl = (0, _reactIntl.useIntl)();
-  return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+  return /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
     content: intl.formatMessage(_messages.userTypeMessages.userDefaultdisplayNameValue)
   }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     xcss: styles.emptyAvatarWrapperStyles,

package/dist/cjs/ui/issue-like-table/table-cell-content/index.js

@@ -13,7 +13,7 @@ var _reactIntl = require("react-intl");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _linkUrl = _interopRequireDefault(require("@atlaskit/smart-card/link-url"));
-var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _Tooltip = _interopRequireDefault(require("@atlaskit/tooltip/Tooltip"));
 var _useDatasourceCrossProductAttribution = require("../../../analytics/xpc/useDatasourceCrossProductAttribution");
 var _state = require("../../../state");
 var _actions = require("../../../state/actions");
@@ -41,7 +41,7 @@ var TooltipWrapper = function TooltipWrapper(_ref) {
     return value !== '';
   }).join(', ');
   if (stringifiedContent && !(wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(columnKey))) {
-    return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    return /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
       tag: _truncateTextTag.TruncateTextTag,
       content: stringifiedContent,
       testId: "issues-table-cell-tooltip"
@@ -120,25 +120,18 @@ var ReadOnlyCell = exports.ReadOnlyCell = function ReadOnlyCell(_ref4) {
     type: columnType,
     values: values
   };
-  if ((0, _fg.fg)('platform_lp_sllv_jira_type_as_link')) {
-    var isIssueTypeColumn = isIssueTypeColumnFn(columnKey);
-    var issueLinkData = getIssueLinkData(rowData);
-    return /*#__PURE__*/_react.default.createElement(TooltipWrapper, {
-      columnKey: columnKey,
-      datasourceTypeWithValues: datasourceTypeWithValues,
-      wrappedColumnKeys: wrappedColumnKeys
-    }, isIssueTypeColumn && issueLinkData ? (0, _fg.fg)('electric_issue_like_table_xpc_url_wrapping') ? /*#__PURE__*/_react.default.createElement(LinkedCellContentWrapped, {
-      issueLinkData: issueLinkData
-    }, renderItem(datasourceTypeWithValues)) : getLinkedCellContent({
-      children: renderItem(datasourceTypeWithValues),
-      issueLinkData: issueLinkData
-    }) : renderItem(datasourceTypeWithValues));
-  }
+  var isIssueTypeColumn = isIssueTypeColumnFn(columnKey);
+  var issueLinkData = getIssueLinkData(rowData);
   return /*#__PURE__*/_react.default.createElement(TooltipWrapper, {
     columnKey: columnKey,
     datasourceTypeWithValues: datasourceTypeWithValues,
     wrappedColumnKeys: wrappedColumnKeys
-  }, renderItem(datasourceTypeWithValues));
+  }, isIssueTypeColumn && issueLinkData ? (0, _fg.fg)('electric_issue_like_table_xpc_url_wrapping') ? /*#__PURE__*/_react.default.createElement(LinkedCellContentWrapped, {
+    issueLinkData: issueLinkData
+  }, renderItem(datasourceTypeWithValues)) : getLinkedCellContent({
+    children: renderItem(datasourceTypeWithValues),
+    issueLinkData: issueLinkData
+  }) : renderItem(datasourceTypeWithValues));
 };
 var InlineEditableCell = function InlineEditableCell(_ref5) {
   var ari = _ref5.ari,
@@ -175,12 +168,12 @@ var InlineEditableCell = function InlineEditableCell(_ref5) {
     style: {
       minHeight: 'calc(40px - 2px * 2)'
     }
-  }, (0, _fg.fg)('platform_lp_sllv_jira_type_as_link') ? !isEditable && isIssueTypeColumnFn(columnKey) && issueLinkData ? (0, _fg.fg)('electric_issue_like_table_xpc_url_wrapping') ? /*#__PURE__*/_react.default.createElement(LinkedCellContentWrapped, {
+  }, !isEditable && isIssueTypeColumnFn(columnKey) && issueLinkData ? (0, _fg.fg)('electric_issue_like_table_xpc_url_wrapping') ? /*#__PURE__*/_react.default.createElement(LinkedCellContentWrapped, {
     issueLinkData: issueLinkData
   }, renderItem(values)) : getLinkedCellContent({
     children: renderItem(values),
     issueLinkData: issueLinkData
-  }) : renderItem(values) : renderItem(values)));
+  }) : renderItem(values)));
   if (!isEditable) {
     return readView;
   }
@@ -234,7 +227,7 @@ var TableCellContent = exports.TableCellContent = function TableCellContent(_ref
         columnTitle: columnTitle,
         renderItem: renderItem,
         integrationKey: integrationKey,
-        issueLinkData: (0, _fg.fg)('platform_lp_sllv_jira_type_as_link') ? getIssueLinkData(rowData) : undefined,
+        issueLinkData: getIssueLinkData(rowData),
         values: toDatasourceTypeWithValues({
           rowData: rowData,
           columnKey: columnKey,

package/dist/cjs/ui/issue-like-table/table-cell-content/inline-edit.js

@@ -15,7 +15,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntl = require("react-intl");
-var _inlineEdit = _interopRequireDefault(require("@atlaskit/inline-edit"));
+var _inlineEdit = _interopRequireDefault(require("@atlaskit/inline-edit/inline-edit"));
 var _compiled = require("@atlaskit/primitives/compiled");
 var _hooks = require("@atlaskit/smart-card/hooks");
 var _analytics = require("../../../analytics");

package/dist/cjs/ui/issue-like-table/table-settings-menu/index.compiled.css

@@ -0,0 +1,6 @@
+._1rjcu2gc{padding-block:var(--ds-space-100,8px)}._19bvutpp{padding-left:var(--ds-space-150,9pt)}
+._1bsb1mjv{width:300px}
+._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
+._ca0q1b66{padding-top:var(--ds-space-050,4px)}
+._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
+._u5f3utpp{padding-right:var(--ds-space-150,9pt)}