@atlaskit/link-datasource 6.6.0 → 6.7.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/link-datasource
 
+## 6.7.0
+
+### Minor Changes
+
+- [`a8fb048ddba1a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a8fb048ddba1a) -
+  Add a gated table settings menu next to the column picker. When
+  `platform_lp_sllv_table_settings_menu` is on, the menu includes a wrap-text toggle that turns
+  wrapping on for every visible column, or off for every visible column. Gate off keeps the previous
+  column-picker-only header, and the editor does not pass `onWrappedColumnsChange`.
+
+  `DatasourceTableView` now accepts an optional `onWrappedColumnsChange` callback that updates the
+  wrapped state of multiple columns at once.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 6.6.0
 
 ### Minor Changes

package/dist/cjs/ui/common/modal/datasource-context/index.js

@@ -36,7 +36,8 @@ var DatasourceContextProvider = exports.DatasourceContextProvider = function Dat
     onColumnResize = _useColumnResize.onColumnResize;
   var _useColumnWrapping = (0, _useColumnWrapping2.useColumnWrapping)(initialWrappedColumnKeys),
     wrappedColumnKeys = _useColumnWrapping.wrappedColumnKeys,
-    onWrappedColumnChange = _useColumnWrapping.onWrappedColumnChange;
+    onWrappedColumnChange = _useColumnWrapping.onWrappedColumnChange,
+    onWrappedColumnsChange = _useColumnWrapping.onWrappedColumnsChange;
   var tableState = (0, _useDatasourceTableState.useDatasourceTableState)({
     datasourceId: datasourceId,
     parameters: isValidParameters(parameters) ? parameters : undefined,
@@ -62,11 +63,12 @@ var DatasourceContextProvider = exports.DatasourceContextProvider = function Dat
       onColumnResize: onColumnResize,
       wrappedColumnKeys: wrappedColumnKeys,
       onWrappedColumnChange: onWrappedColumnChange,
+      onWrappedColumnsChange: onWrappedColumnsChange,
       parameters: parameters,
       setParameters: setParameters,
       onInsert: onInsert
     };
-  }, [datasourceId, isValidParameters, tableState, visibleColumnCount, visibleColumnKeys, onVisibleColumnKeysChange, columnCustomSizes, onColumnResize, wrappedColumnKeys, onWrappedColumnChange, parameters, onInsert]);
+  }, [datasourceId, isValidParameters, tableState, visibleColumnCount, visibleColumnKeys, onVisibleColumnKeysChange, columnCustomSizes, onColumnResize, wrappedColumnKeys, onWrappedColumnChange, onWrappedColumnsChange, parameters, onInsert]);
   return /*#__PURE__*/_react.default.createElement(DatasourceContext.Provider, {
     value: contextValue
   }, children);

package/dist/cjs/ui/common/modal/datasources-table-in-modal-preview/index.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _types = require("../../../../analytics/types");
 var _userInteractions = require("../../../../contexts/user-interactions");
 var _issueLikeTable = require("../../../issue-like-table");
@@ -19,6 +20,7 @@ var Table = function Table(props) {
     onColumnResize = _useDatasourceContext.onColumnResize,
     wrappedColumnKeys = _useDatasourceContext.wrappedColumnKeys,
     onWrappedColumnChange = _useDatasourceContext.onWrappedColumnChange,
+    onWrappedColumnsChange = _useDatasourceContext.onWrappedColumnsChange,
     visibleColumnKeys = _useDatasourceContext.visibleColumnKeys,
     onVisibleColumnKeysChange = _useDatasourceContext.onVisibleColumnKeysChange,
     _useDatasourceContext2 = _useDatasourceContext.tableState,
@@ -53,6 +55,8 @@ var Table = function Table(props) {
     onColumnResize: onColumnResize,
     wrappedColumnKeys: wrappedColumnKeys,
     onWrappedColumnChange: onWrappedColumnChange
-  }));
+  }, (0, _fg.fg)('platform_lp_sllv_table_settings_menu') ? {
+    onWrappedColumnsChange: onWrappedColumnsChange
+  } : {}));
 };
 var _default = exports.default = Table;

package/dist/cjs/ui/common/modal/datasources-table-in-modal-preview/use-column-wrapping/index.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useColumnWrapping = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 var useColumnWrapping = exports.useColumnWrapping = function useColumnWrapping() {
   var initialWrappedColumnKeys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   var _useState = (0, _react.useState)(initialWrappedColumnKeys),
@@ -22,6 +23,27 @@ var useColumnWrapping = exports.useColumnWrapping = function useColumnWrapping()
     }
     setWrappedColumnKeys(Array.from(set));
   }, [wrappedColumnKeys]);
+  var onWrappedColumnChangeWithLatestState = (0, _react.useCallback)(function (key, isWrapped) {
+    setWrappedColumnKeys(function (currentWrappedColumnKeys) {
+      var nextWrappedColumnKeys = new Set(currentWrappedColumnKeys);
+      if (isWrapped) {
+        nextWrappedColumnKeys.add(key);
+      } else {
+        nextWrappedColumnKeys.delete(key);
+      }
+      return Array.from(nextWrappedColumnKeys);
+    });
+  }, []);
+  var onWrappedColumnsChange = (0, _react.useCallback)(function (nextWrappedColumnKeys) {
+    setWrappedColumnKeys(nextWrappedColumnKeys);
+  }, []);
+  if ((0, _fg.fg)('platform_lp_sllv_table_settings_menu')) {
+    return {
+      wrappedColumnKeys: wrappedColumnKeys,
+      onWrappedColumnChange: onWrappedColumnChangeWithLatestState,
+      onWrappedColumnsChange: onWrappedColumnsChange
+    };
+  }
   return {
     wrappedColumnKeys: wrappedColumnKeys,
     onWrappedColumnChange: onWrappedColumnChange

package/dist/cjs/ui/datasource-table-view/datasourceTableView.js

@@ -51,6 +51,7 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
     onColumnResize = _ref.onColumnResize,
     wrappedColumnKeys = _ref.wrappedColumnKeys,
     onWrappedColumnChange = _ref.onWrappedColumnChange,
+    onWrappedColumnsChange = _ref.onWrappedColumnsChange,
     _ref$scrollableContai = _ref.scrollableContainerHeight,
     scrollableContainerHeight = _ref$scrollableContai === void 0 ? DefaultScrollableContainerHeight : _ref$scrollableContai;
   // Local copy lets us apply in-session sort mutations without mutating external parameters.
@@ -236,7 +237,10 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
     sortState: sortState
   } : {}, {
     wrappedColumnKeys: wrappedColumnKeys,
-    onWrappedColumnChange: onWrappedColumnChange,
+    onWrappedColumnChange: onWrappedColumnChange
+  }, onWrappedColumnsChange && (0, _fg.fg)('platform_lp_sllv_table_settings_menu') ? {
+    onWrappedColumnsChange: onWrappedColumnsChange
+  } : {}, {
     scrollableContainerHeight: isInPDFRender ? undefined : (0, _fg.fg)('lp_enable_datasource-table-view_height_override') ? scrollableContainerHeight : DefaultScrollableContainerHeight,
     extensionKey: extensionKey
   })) : /*#__PURE__*/React.createElement(_emptyState.default, {

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

@@ -15,9 +15,11 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntl = require("react-intl");
-var _button = _interopRequireDefault(require("@atlaskit/button/default/button"));
+var _new = _interopRequireWildcard(require("@atlaskit/button/new"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
 var _customize = _interopRequireDefault(require("@atlaskit/icon/core/customize"));
+var _tableColumnsDistribute = _interopRequireDefault(require("@atlaskit/icon/core/table-columns-distribute"));
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _filters = require("@atlaskit/react-select/filters");
 var _popupSelect = require("@atlaskit/select/popup-select");
@@ -150,10 +152,21 @@ var ColumnPicker = exports.ColumnPicker = function ColumnPicker(_ref) {
     target: function target(_ref8) {
       var isOpen = _ref8.isOpen,
         triggerProps = (0, _objectWithoutProperties2.default)(_ref8, _excluded);
+      if ((0, _fg.fg)('platform_lp_sllv_table_settings_menu')) {
+        return /*#__PURE__*/_react.default.createElement(_new.IconButton, (0, _extends2.default)({}, triggerProps, {
+          appearance: "default",
+          icon: _tableColumnsDistribute.default,
+          isSelected: isOpen,
+          isTooltipDisabled: false,
+          label: intl.formatMessage(_messages.columnPickerMessages.tooltip),
+          spacing: "default",
+          testId: "column-picker-trigger-button"
+        }));
+      }
       return /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
         content: intl.formatMessage(_messages.columnPickerMessages.tooltip)
       }, function (tooltipProps) {
-        return /*#__PURE__*/_react.default.createElement(_button.default, (0, _extends2.default)({}, tooltipProps, triggerProps, {
+        return /*#__PURE__*/_react.default.createElement(_new.default, (0, _extends2.default)({}, tooltipProps, triggerProps, {
           isSelected: isOpen,
           spacing: "compact",
           appearance: 'default',

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

@@ -51,6 +51,7 @@ thead.has-column-picker ._10i2idpf:nth-last-of-type(2){border-right:0}.ProseMirr
 .ProseMirror .pm-table-wrapper>table thead ._1pmc1b66{padding-right:var(--ds-space-050,4px)}
 .ProseMirror .pm-table-wrapper>table thead ._1pmsusvi:last-of-type{box-sizing:border-box}
 .ProseMirror .pm-table-wrapper>table thead ._1wwnusvi{box-sizing:border-box}
+.ProseMirror .pm-table-wrapper>table thead ._2k5114em:last-of-type{width:95px}
 .ProseMirror .pm-table-wrapper>table thead ._2k51ys9h:last-of-type{width:5pc}
 .ProseMirror .pm-table-wrapper>table thead ._6dd7v77o{padding-bottom:var(--ds-space-025,2px)}
 .ProseMirror .pm-table-wrapper>table thead ._7cz2v77o{padding-top:var(--ds-space-025,2px)}
@@ -118,6 +119,7 @@ thead.has-column-picker ._10i2idpf:nth-last-of-type(2){border-right:0}.ProseMirr
 ._kqsw1if8{position:sticky}
 ._kqswh2mm{position:relative}
 ._lura1osq [data-testid=datasource-header-content--container]{width:100%}
+._mgul14em:last-of-type{width:95px}
 ._mgulys9h:last-of-type{width:5pc}
 ._ml92nkob:last-of-type{vertical-align:middle}
 ._mrkbidpf{border-bottom-left-radius:0}
@@ -159,6 +161,7 @@ thead.has-column-picker ._10i2idpf:nth-last-of-type(2){border-right:0}.ProseMirr
 .pm-table-wrapper>table thead ._3mvc1tcg{line-height:24px}
 .pm-table-wrapper>table thead ._7okwusvi:last-of-type{box-sizing:border-box}
 .pm-table-wrapper>table thead ._7s0n1if8:last-of-type{position:sticky}
+.pm-table-wrapper>table thead ._efqo14em:last-of-type{width:95px}
 .pm-table-wrapper>table thead ._efqoys9h:last-of-type{width:5pc}
 .pm-table-wrapper>table thead ._gdprpxbi:last-of-type{padding-right:var(--ds-space-200,1pc)}
 .pm-table-wrapper>table thead ._mowjusic:last-of-type{text-align:right}

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

@@ -38,6 +38,7 @@ 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,
@@ -396,9 +438,9 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
       return;
     }
     return (0, _combine.combine)((0, _elementAdapter.monitorForElements)({
-      onDragStart: function onDragStart(_ref0) {
-        var location = _ref0.location,
-          source = _ref0.source;
+      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;
@@ -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,
@@ -602,10 +644,10 @@ 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;
+  }, 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",
@@ -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) {
@@ -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,

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)}