@atlaskit/link-datasource 6.6.0 → 6.7.0

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

@@ -8,9 +8,11 @@ import "./index.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
-import Button from '@atlaskit/button/default/button';
+import Button, { IconButton } from '@atlaskit/button/new';
 import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
 import CustomizeIcon from '@atlaskit/icon/core/customize';
+import TableColumnsDistributeIcon from '@atlaskit/icon/core/table-columns-distribute';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { Box } from '@atlaskit/primitives/compiled';
 import { createFilter } from '@atlaskit/react-select/filters';
 import { PopupSelect } from '@atlaskit/select/popup-select';
@@ -141,6 +143,17 @@ export var ColumnPicker = function ColumnPicker(_ref) {
     target: function target(_ref8) {
       var isOpen = _ref8.isOpen,
         triggerProps = _objectWithoutProperties(_ref8, _excluded);
+      if (fg('platform_lp_sllv_table_settings_menu')) {
+        return /*#__PURE__*/React.createElement(IconButton, _extends({}, triggerProps, {
+          appearance: "default",
+          icon: TableColumnsDistributeIcon,
+          isSelected: isOpen,
+          isTooltipDisabled: false,
+          label: intl.formatMessage(columnPickerMessages.tooltip),
+          spacing: "default",
+          testId: "column-picker-trigger-button"
+        }));
+      }
       return /*#__PURE__*/React.createElement(Tooltip, {
         content: intl.formatMessage(columnPickerMessages.tooltip)
       }, function (tooltipProps) {

package/dist/esm/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/esm/ui/issue-like-table/index.js

@@ -9,7 +9,8 @@ var _excluded = ["as", "style"],
   _excluded2 = ["as", "style"],
   _excluded3 = ["as", "style"],
   _excluded4 = ["as", "style"],
-  _excluded5 = ["as", "style"];
+  _excluded5 = ["as", "style"],
+  _excluded6 = ["as", "style"];
 import "./index.compiled.css";
 import { forwardRef } from 'react';
 import * as React from 'react';
@@ -33,13 +34,14 @@ import { reorderWithEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/util/r
 import { autoScroller } from '@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/utils/combine';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element-adapter';
-import { Box } from '@atlaskit/primitives/compiled';
+import { Box, Inline } from '@atlaskit/primitives/compiled';
 import Tooltip from '@atlaskit/tooltip/Tooltip';
 import { startUfoExperience, succeedUfoExperience } from '../../analytics/ufoExperiences';
 import { useDatasourceExperienceId } from '../../contexts/datasource-experience-id';
 import { useIsInPDFRender } from '../../hooks/useIsInPDFRender';
 import { NoResults } from '../common/error-state/no-results';
 import { ColumnPicker } from './column-picker';
+import { hasAvailableTableSettings, TableSettingsMenu } from './table-settings-menu';
 import { DragColumnPreview } from './drag-column-preview';
 import { DraggableTableHeading } from './draggable-table-heading';
 import TableEmptyState from './empty-state';
@@ -51,6 +53,7 @@ import { COLUMN_BASE_WIDTH, getFieldLabelById, getWidthCss } from './utils';
 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 = forwardRef(function (_ref, __cmplr) {
   var _ref$as = _ref.as,
@@ -63,9 +66,24 @@ var ColumnPickerHeader = forwardRef(function (_ref, __cmplr) {
     className: 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 = forwardRef(function (_ref2, __cmplr) {
+  var _ref2$as = _ref2.as,
+    C = _ref2$as === void 0 ? "th" : _ref2$as,
+    __cmpls = _ref2.style,
+    __cmplp = _objectWithoutProperties(_ref2, _excluded2);
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: 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;
@@ -88,11 +106,11 @@ var getHorizontalScrollParent = function getHorizontalScrollParent(element) {
 };
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
-var Table = forwardRef(function (_ref2, __cmplr) {
-  var _ref2$as = _ref2.as,
-    C = _ref2$as === void 0 ? "table" : _ref2$as,
-    __cmpls = _ref2.style,
-    __cmplp = _objectWithoutProperties(_ref2, _excluded2);
+var Table = forwardRef(function (_ref3, __cmplr) {
+  var _ref3$as = _ref3.as,
+    C = _ref3$as === void 0 ? "table" : _ref3$as,
+    __cmpls = _ref3.style,
+    __cmplp = _objectWithoutProperties(_ref3, _excluded3);
   return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
     style: __cmpls,
     ref: __cmplr,
@@ -104,11 +122,11 @@ var Table = forwardRef(function (_ref2, __cmplr) {
 if (process.env.NODE_ENV !== 'production') {
   Table.displayName = 'Table';
 }
-var TableHeading = forwardRef(function (_ref3, __cmplr) {
-  var _ref3$as = _ref3.as,
-    C = _ref3$as === void 0 ? "th" : _ref3$as,
-    __cmpls = _ref3.style,
-    __cmplp = _objectWithoutProperties(_ref3, _excluded3);
+var TableHeading = forwardRef(function (_ref4, __cmplr) {
+  var _ref4$as = _ref4.as,
+    C = _ref4$as === void 0 ? "th" : _ref4$as,
+    __cmpls = _ref4.style,
+    __cmplp = _objectWithoutProperties(_ref4, _excluded4);
   return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
     style: __cmpls,
     ref: __cmplr,
@@ -120,11 +138,11 @@ var TableHeading = forwardRef(function (_ref3, __cmplr) {
 if (process.env.NODE_ENV !== 'production') {
   TableHeading.displayName = 'TableHeading';
 }
-var InlineEditableTableCell = forwardRef(function (_ref4, __cmplr) {
-  var _ref4$as = _ref4.as,
-    C = _ref4$as === void 0 ? "td" : _ref4$as,
-    __cmpls = _ref4.style,
-    __cmplp = _objectWithoutProperties(_ref4, _excluded4);
+var InlineEditableTableCell = forwardRef(function (_ref5, __cmplr) {
+  var _ref5$as = _ref5.as,
+    C = _ref5$as === void 0 ? "td" : _ref5$as,
+    __cmpls = _ref5.style,
+    __cmplp = _objectWithoutProperties(_ref5, _excluded5);
   return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
     style: __cmpls,
     ref: __cmplr,
@@ -154,11 +172,11 @@ var headerStyles = null;
 var headingHoverEffectStyles = null;
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- Matches DraggableTableHeading button normalization.
-var SortableHeaderParent = forwardRef(function (_ref5, __cmplr) {
-  var _ref5$as = _ref5.as,
-    C = _ref5$as === void 0 ? "div" : _ref5$as,
-    __cmpls = _ref5.style,
-    __cmplp = _objectWithoutProperties(_ref5, _excluded5);
+var SortableHeaderParent = forwardRef(function (_ref6, __cmplr) {
+  var _ref6$as = _ref6.as,
+    C = _ref6$as === void 0 ? "div" : _ref6$as,
+    __cmpls = _ref6.style,
+    __cmplp = _objectWithoutProperties(_ref6, _excluded6);
   return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
     style: __cmpls,
     ref: __cmplr,
@@ -214,28 +232,29 @@ function getDefaultColumnWidth(key, type) {
       return DEFAULT_WIDTH;
   }
 }
-export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref6) {
+export var 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 : _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 : _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 = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var tableId = useMemo(function () {
@@ -274,25 +293,48 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref6) {
   }, [experienceId, status]);
   var visibleSortedColumns = 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) && 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 = 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(_toConsumableArray(wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 ? wrappedColumnKeys : []), _toConsumableArray(visibleColumnKeys))));
+    onWrappedColumnsChange(nextWrappedColumnKeys);
+  }, [areAllVisibleColumnsWrapped, onWrappedColumnsChange, visibleColumnKeys, wrappedColumnKeys]);
+  var tableSettingsMenuProps = {
+    wrapTextSetting: isWrapTextSettingAvailable ? {
+      isChecked: areAllVisibleColumnsWrapped,
+      onChange: handleWrapTextOnAllColumnsChange
+    } : undefined
+  };
+  var shouldShowTableSettingsMenu = 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 = 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 = useCallback(function (key, type, isLastCell) {
@@ -303,10 +345,10 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref6) {
     }
   }, [columnCustomSizes, columnsWidthsSum, shouldUseWidth, tableContainerWidth]);
   var headerColumns = 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,
@@ -389,9 +431,9 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref6) {
       return;
     }
     return combine(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;
@@ -407,9 +449,9 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref6) {
           });
         }
       },
-      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;
           autoScroller.updateInput({
@@ -419,9 +461,9 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref6) {
           });
         }
       },
-      onDrop: function onDrop(_ref10) {
-        var source = _ref10.source,
-          location = _ref10.location;
+      onDrop: function onDrop(_ref11) {
+        var source = _ref11.source,
+          location = _ref11.location;
         autoScroller.stop();
         if (location.current.dropTargets.length === 0) {
           return;
@@ -456,10 +498,10 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref6) {
     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,
@@ -595,10 +637,10 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref6) {
     className: 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, {
       content: content,
       tag: "span",
@@ -643,10 +685,10 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref6) {
     }
     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) {
@@ -683,12 +725,23 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref6) {
         })
       }), heading);
     }
-  }), onVisibleColumnKeysChange && /*#__PURE__*/React.createElement(ColumnPickerHeader, null, /*#__PURE__*/React.createElement(ColumnPicker, {
+  }), onVisibleColumnKeysChange && (shouldShowTableSettingsMenu ? /*#__PURE__*/React.createElement(ColumnPickerHeaderWithSettings, null, /*#__PURE__*/React.createElement(Inline, {
+    alignBlock: "center",
+    alignInline: "end",
+    space: "space.050"
+  }, /*#__PURE__*/React.createElement(ColumnPicker, {
+    columns: shouldDisplayColumnsInPicker ? orderedColumns : [],
+    selectedColumnKeys: shouldDisplayColumnsInPicker ? visibleColumnKeys : [],
+    onSelectedColumnKeysChange: onSelectedColumnKeysChange,
+    onOpen: handlePickerOpen
+  }), /*#__PURE__*/React.createElement(TableSettingsMenu, {
+    wrapTextSetting: tableSettingsMenuProps.wrapTextSetting
+  }))) : /*#__PURE__*/React.createElement(ColumnPickerHeader, null, /*#__PURE__*/React.createElement(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: ax(["_n7zlidpf"])
   }, hasNoResults && /*#__PURE__*/React.createElement("tr", {
@@ -703,19 +756,19 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref6) {
     className: ax(["_kqsw1if8 _1ltvidpf _1e0c1txw _1bah1h6o"])
   }, /*#__PURE__*/React.createElement(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 = getWidthCss({
         shouldUseWidth: shouldUseWidth,

package/dist/esm/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)}

package/dist/esm/ui/issue-like-table/table-settings-menu/index.js

@@ -0,0 +1,87 @@
+/* index.tsx generated by @compiled/babel-plugin v2.0.0 */
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useId, useState } from 'react';
+import { useIntl } from 'react-intl';
+import { IconButton } from '@atlaskit/button/new';
+import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
+import { Popup } from '@atlaskit/popup/popup';
+import { Box, Inline } from '@atlaskit/primitives/compiled';
+import { layers } from '@atlaskit/theme/constants';
+import Toggle from '@atlaskit/toggle/toggle';
+import { tableSettingsMenuMessages } from './messages';
+var styles = {
+  menu: "_1rjcu2gc _1bsb1mjv",
+  setting: "_bfhksm61 _ca0q1b66 _u5f3utpp _n3td1b66 _19bvutpp"
+};
+export var hasAvailableTableSettings = function hasAvailableTableSettings(_ref) {
+  var wrapTextSetting = _ref.wrapTextSetting;
+  return Boolean(wrapTextSetting);
+};
+export var TableSettingsMenu = function TableSettingsMenu(props) {
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var wrapTextToggleId = useId();
+  if (!hasAvailableTableSettings(props)) {
+    return null;
+  }
+  var wrapTextSetting = props.wrapTextSetting;
+  var wrapTextLabel = formatMessage(tableSettingsMenuMessages.wrapTextOnAllColumns);
+  return /*#__PURE__*/React.createElement(Popup, {
+    isOpen: isOpen,
+    onClose: function onClose() {
+      return setIsOpen(false);
+    },
+    placement: "bottom-end",
+    shouldFlip: true,
+    testId: "table-settings-menu",
+    zIndex: layers.modal(),
+    role: "dialog",
+    label: formatMessage(tableSettingsMenuMessages.tableSettings),
+    trigger: function trigger(triggerProps) {
+      return /*#__PURE__*/React.createElement(IconButton, {
+        ref: triggerProps.ref,
+        "aria-controls": triggerProps['aria-controls'],
+        "aria-expanded": triggerProps['aria-expanded'],
+        "aria-haspopup": triggerProps['aria-haspopup'],
+        icon: ShowMoreHorizontalIcon,
+        isSelected: isOpen,
+        isTooltipDisabled: false,
+        label: formatMessage(tableSettingsMenuMessages.moreActions),
+        onClick: function onClick() {
+          return setIsOpen(function (currentIsOpen) {
+            return !currentIsOpen;
+          });
+        },
+        spacing: "default"
+      });
+    },
+    content: function content(_ref2) {
+      var setInitialFocusRef = _ref2.setInitialFocusRef;
+      return /*#__PURE__*/React.createElement(Box, {
+        xcss: styles.menu
+      }, wrapTextSetting && /*#__PURE__*/React.createElement(Box, {
+        xcss: styles.setting
+      }, /*#__PURE__*/React.createElement(Inline, {
+        alignBlock: "center",
+        spread: "space-between"
+      }, /*#__PURE__*/React.createElement("label", {
+        htmlFor: wrapTextToggleId
+      }, wrapTextLabel), /*#__PURE__*/React.createElement(Toggle, {
+        ref: function ref(element) {
+          setInitialFocusRef(element);
+        },
+        id: wrapTextToggleId,
+        isChecked: wrapTextSetting.isChecked,
+        onChange: wrapTextSetting.onChange,
+        testId: "table-settings-menu-wrap-text-toggle"
+      }))));
+    }
+  });
+};

package/dist/esm/ui/issue-like-table/table-settings-menu/messages.js

@@ -0,0 +1,18 @@
+import { defineMessages } from 'react-intl';
+export var tableSettingsMenuMessages = defineMessages({
+  moreActions: {
+    id: 'link-datasource.issue-like-table.table-settings-menu.moreActions',
+    description: 'Tooltip and accessibility label for the table settings meatball menu button',
+    defaultMessage: 'More actions'
+  },
+  tableSettings: {
+    id: 'link-datasource.issue-like-table.table-settings-menu.tableSettings',
+    description: 'Accessibility label for the table settings popup',
+    defaultMessage: 'Table settings'
+  },
+  wrapTextOnAllColumns: {
+    id: 'link-datasource.issue-like-table.table-settings-menu.wrapTextOnAllColumns',
+    description: 'Label for the toggle that wraps text in every table column',
+    defaultMessage: 'Wrap text in all columns'
+  }
+});

package/dist/types/ui/common/modal/datasources-table-in-modal-preview/use-column-wrapping/index.d.ts

@@ -1,3 +1,3 @@
 import { type IssueLikeDataTableViewProps } from '../../../../issue-like-table/types';
-export type ColumnWrappingProps = Required<Pick<IssueLikeDataTableViewProps, 'wrappedColumnKeys' | 'onWrappedColumnChange'>>;
+export type ColumnWrappingProps = Required<Pick<IssueLikeDataTableViewProps, 'wrappedColumnKeys' | 'onWrappedColumnChange'>> & Pick<IssueLikeDataTableViewProps, 'onWrappedColumnsChange'>;
 export declare const useColumnWrapping: (initialWrappedColumnKeys?: string[]) => ColumnWrappingProps;

package/dist/types/ui/datasource-table-view/datasourceTableView.d.ts

@@ -10,9 +10,9 @@ export declare const DatasourceTableView: ForwardRefExoticComponent<{
     datasourceId: string;
     parameters: DatasourceParameters;
     url?: string;
-} & Partial<Pick<IssueLikeDataTableViewProps, 'visibleColumnKeys' | 'onVisibleColumnKeysChange' | 'wrappedColumnKeys' | 'onWrappedColumnChange' | 'onColumnResize' | 'onColumnSort' | 'sortState' | 'columnCustomSizes' | 'scrollableContainerHeight'>> & WithContextProps & RefAttributes<any>>;
+} & Partial<Pick<IssueLikeDataTableViewProps, 'visibleColumnKeys' | 'onVisibleColumnKeysChange' | 'wrappedColumnKeys' | 'onWrappedColumnChange' | 'onWrappedColumnsChange' | 'onColumnResize' | 'onColumnSort' | 'sortState' | 'columnCustomSizes' | 'scrollableContainerHeight'>> & WithContextProps & RefAttributes<any>>;
 export declare const DataSourceTableViewNoSuspense: ForwardRefExoticComponent<{
     datasourceId: string;
     parameters: DatasourceParameters;
     url?: string;
-} & Partial<Pick<IssueLikeDataTableViewProps, 'visibleColumnKeys' | 'onVisibleColumnKeysChange' | 'wrappedColumnKeys' | 'onWrappedColumnChange' | 'onColumnResize' | 'onColumnSort' | 'sortState' | 'columnCustomSizes' | 'scrollableContainerHeight'>> & WithContextProps & RefAttributes<any>>;
+} & Partial<Pick<IssueLikeDataTableViewProps, 'visibleColumnKeys' | 'onVisibleColumnKeysChange' | 'wrappedColumnKeys' | 'onWrappedColumnChange' | 'onWrappedColumnsChange' | 'onColumnResize' | 'onColumnSort' | 'sortState' | 'columnCustomSizes' | 'scrollableContainerHeight'>> & WithContextProps & RefAttributes<any>>;

package/dist/types/ui/datasource-table-view/types.d.ts

@@ -7,4 +7,4 @@ export type DatasourceTableViewProps = {
     parameters: DatasourceParameters;
     /** Url for an existing datasource, initially used for displaying to a user unauthorized to query that site  */
     url?: string;
-} & Partial<Pick<IssueLikeDataTableViewProps, 'visibleColumnKeys' | 'onVisibleColumnKeysChange' | 'wrappedColumnKeys' | 'onWrappedColumnChange' | 'onColumnResize' | 'onColumnSort' | 'sortState' | 'columnCustomSizes' | 'scrollableContainerHeight'>>;
+} & Partial<Pick<IssueLikeDataTableViewProps, 'visibleColumnKeys' | 'onVisibleColumnKeysChange' | 'wrappedColumnKeys' | 'onWrappedColumnChange' | 'onWrappedColumnsChange' | 'onColumnResize' | 'onColumnSort' | 'sortState' | 'columnCustomSizes' | 'scrollableContainerHeight'>>;

package/dist/types/ui/issue-like-table/index.d.ts

@@ -2,5 +2,5 @@ import { type DatasourceResponseSchemaProperty } from '@atlaskit/linking-types/d
 import { type Props } from './empty-state';
 import { type IssueLikeDataTableViewProps } from './types';
 export declare const getOrderedColumns: (columns: DatasourceResponseSchemaProperty[], visibleColumnKeys: string[]) => DatasourceResponseSchemaProperty[];
-export declare const IssueLikeDataTableView: ({ testId, onNextPage, onLoadDatasourceDetails, items, itemIds, columns, renderItem, visibleColumnKeys, onVisibleColumnKeysChange, columnCustomSizes, onColumnResize, onColumnSort, wrappedColumnKeys, onWrappedColumnChange, sortState, status, hasNextPage, scrollableContainerHeight, extensionKey, }: IssueLikeDataTableViewProps) => JSX.Element;
+export declare const IssueLikeDataTableView: ({ testId, onNextPage, onLoadDatasourceDetails, items, itemIds, columns, renderItem, visibleColumnKeys, onVisibleColumnKeysChange, columnCustomSizes, onColumnResize, onColumnSort, wrappedColumnKeys, onWrappedColumnChange, onWrappedColumnsChange, sortState, status, hasNextPage, scrollableContainerHeight, extensionKey, }: IssueLikeDataTableViewProps) => JSX.Element;
 export declare const EmptyState: ({ isCompact, testId }: Props) => JSX.Element;

package/dist/types/ui/issue-like-table/table-settings-menu/index.d.ts

@@ -0,0 +1,8 @@
+export type TableSettingsMenuProps = {
+    wrapTextSetting?: {
+        isChecked: boolean;
+        onChange: () => void;
+    };
+};
+export declare const hasAvailableTableSettings: ({ wrapTextSetting }: TableSettingsMenuProps) => boolean;
+export declare const TableSettingsMenu: (props: TableSettingsMenuProps) => React.JSX.Element | null;

package/dist/types/ui/issue-like-table/table-settings-menu/messages.d.ts

@@ -0,0 +1,17 @@
+export declare const tableSettingsMenuMessages: {
+    moreActions: {
+        defaultMessage: string;
+        description: string;
+        id: string;
+    };
+    tableSettings: {
+        defaultMessage: string;
+        description: string;
+        id: string;
+    };
+    wrapTextOnAllColumns: {
+        defaultMessage: string;
+        description: string;
+        id: string;
+    };
+};

package/dist/types/ui/issue-like-table/types.d.ts

@@ -67,6 +67,12 @@ export interface IssueLikeDataTableViewProps {
      * @param shouldWrap  Whenever column should wrap
      */
     onWrappedColumnChange?: (key: string, shouldWrap: boolean) => void;
+    /**
+     * Callback to be invoked whenever wrap is toggled for all currently visible columns.
+     *
+     * @param wrappedColumnKeys the full list of column keys that should wrap after the change
+     */
+    onWrappedColumnsChange?: (wrappedColumnKeys: string[]) => void;
     /**
      * A function to define new or override existing render components.
      * eg:

package/examples-helpers/buildAssetsIssuesTable.tsx

@@ -38,6 +38,7 @@ const AssetsTableView = ({
 		onColumnResize,
 		wrappedColumnKeys,
 		onWrappedColumnChange,
+		onWrappedColumnsChange,
 	} = useAssetsTableProps({
 		defaultColumnCustomSizes: {
 			people: 100,
@@ -53,6 +54,7 @@ const AssetsTableView = ({
 			columnCustomSizes={columnCustomSizes}
 			onColumnResize={onColumnResize}
 			onWrappedColumnChange={onWrappedColumnChange}
+			onWrappedColumnsChange={onWrappedColumnsChange}
 			wrappedColumnKeys={wrappedColumnKeys}
 		/>
 	);