@atlaskit/link-datasource 6.6.0 → 6.7.0

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

@@ -0,0 +1,96 @@
+/* index.tsx generated by @compiled/babel-plugin v2.0.0 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.hasAvailableTableSettings = exports.TableSettingsMenu = void 0;
+require("./index.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _reactIntl = require("react-intl");
+var _new = require("@atlaskit/button/new");
+var _showMoreHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/show-more-horizontal"));
+var _popup = require("@atlaskit/popup/popup");
+var _compiled = require("@atlaskit/primitives/compiled");
+var _constants = require("@atlaskit/theme/constants");
+var _toggle = _interopRequireDefault(require("@atlaskit/toggle/toggle"));
+var _messages = require("./messages");
+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); }
+var styles = {
+  menu: "_1rjcu2gc _1bsb1mjv",
+  setting: "_bfhksm61 _ca0q1b66 _u5f3utpp _n3td1b66 _19bvutpp"
+};
+var hasAvailableTableSettings = exports.hasAvailableTableSettings = function hasAvailableTableSettings(_ref) {
+  var wrapTextSetting = _ref.wrapTextSetting;
+  return Boolean(wrapTextSetting);
+};
+var TableSettingsMenu = exports.TableSettingsMenu = function TableSettingsMenu(props) {
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var wrapTextToggleId = (0, _react.useId)();
+  if (!hasAvailableTableSettings(props)) {
+    return null;
+  }
+  var wrapTextSetting = props.wrapTextSetting;
+  var wrapTextLabel = formatMessage(_messages.tableSettingsMenuMessages.wrapTextOnAllColumns);
+  return /*#__PURE__*/React.createElement(_popup.Popup, {
+    isOpen: isOpen,
+    onClose: function onClose() {
+      return setIsOpen(false);
+    },
+    placement: "bottom-end",
+    shouldFlip: true,
+    testId: "table-settings-menu",
+    zIndex: _constants.layers.modal(),
+    role: "dialog",
+    label: formatMessage(_messages.tableSettingsMenuMessages.tableSettings),
+    trigger: function trigger(triggerProps) {
+      return /*#__PURE__*/React.createElement(_new.IconButton, {
+        ref: triggerProps.ref,
+        "aria-controls": triggerProps['aria-controls'],
+        "aria-expanded": triggerProps['aria-expanded'],
+        "aria-haspopup": triggerProps['aria-haspopup'],
+        icon: _showMoreHorizontal.default,
+        isSelected: isOpen,
+        isTooltipDisabled: false,
+        label: formatMessage(_messages.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(_compiled.Box, {
+        xcss: styles.menu
+      }, wrapTextSetting && /*#__PURE__*/React.createElement(_compiled.Box, {
+        xcss: styles.setting
+      }, /*#__PURE__*/React.createElement(_compiled.Inline, {
+        alignBlock: "center",
+        spread: "space-between"
+      }, /*#__PURE__*/React.createElement("label", {
+        htmlFor: wrapTextToggleId
+      }, wrapTextLabel), /*#__PURE__*/React.createElement(_toggle.default, {
+        ref: function ref(element) {
+          setInitialFocusRef(element);
+        },
+        id: wrapTextToggleId,
+        isChecked: wrapTextSetting.isChecked,
+        onChange: wrapTextSetting.onChange,
+        testId: "table-settings-menu-wrap-text-toggle"
+      }))));
+    }
+  });
+};

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

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tableSettingsMenuMessages = void 0;
+var _reactIntl = require("react-intl");
+var tableSettingsMenuMessages = exports.tableSettingsMenuMessages = (0, _reactIntl.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/es2019/ui/common/modal/datasource-context/index.js

@@ -22,7 +22,8 @@ export const DatasourceContextProvider = ({
   } = useColumnResize(initialColumnCustomSizes);
   const {
     wrappedColumnKeys,
-    onWrappedColumnChange
+    onWrappedColumnChange,
+    onWrappedColumnsChange
   } = useColumnWrapping(initialWrappedColumnKeys);
   const tableState = useDatasourceTableState({
     datasourceId,
@@ -49,10 +50,11 @@ export const DatasourceContextProvider = ({
     onColumnResize,
     wrappedColumnKeys,
     onWrappedColumnChange,
+    onWrappedColumnsChange,
     parameters,
     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.createElement(DatasourceContext.Provider, {
     value: contextValue
   }, children);

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { DatasourceAction } from '../../../../analytics/types';
 import { useUserInteractions } from '../../../../contexts/user-interactions';
 import { IssueLikeDataTableView } from '../../../issue-like-table';
@@ -10,6 +11,7 @@ const Table = props => {
     onColumnResize,
     wrappedColumnKeys,
     onWrappedColumnChange,
+    onWrappedColumnsChange,
     visibleColumnKeys,
     onVisibleColumnKeysChange,
     tableState: {
@@ -44,6 +46,8 @@ const Table = props => {
     onColumnResize: onColumnResize,
     wrappedColumnKeys: wrappedColumnKeys,
     onWrappedColumnChange: onWrappedColumnChange
-  }));
+  }, fg('platform_lp_sllv_table_settings_menu') ? {
+    onWrappedColumnsChange
+  } : {}));
 };
 export default Table;

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

@@ -1,4 +1,5 @@
 import { useCallback, useState } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 export const useColumnWrapping = (initialWrappedColumnKeys = []) => {
   const [wrappedColumnKeys, setWrappedColumnKeys] = useState(initialWrappedColumnKeys);
   const onWrappedColumnChange = useCallback((key, isWrapped) => {
@@ -10,6 +11,27 @@ export const useColumnWrapping = (initialWrappedColumnKeys = []) => {
     }
     setWrappedColumnKeys(Array.from(set));
   }, [wrappedColumnKeys]);
+  const onWrappedColumnChangeWithLatestState = useCallback((key, isWrapped) => {
+    setWrappedColumnKeys(currentWrappedColumnKeys => {
+      const nextWrappedColumnKeys = new Set(currentWrappedColumnKeys);
+      if (isWrapped) {
+        nextWrappedColumnKeys.add(key);
+      } else {
+        nextWrappedColumnKeys.delete(key);
+      }
+      return Array.from(nextWrappedColumnKeys);
+    });
+  }, []);
+  const onWrappedColumnsChange = useCallback(nextWrappedColumnKeys => {
+    setWrappedColumnKeys(nextWrappedColumnKeys);
+  }, []);
+  if (fg('platform_lp_sllv_table_settings_menu')) {
+    return {
+      wrappedColumnKeys,
+      onWrappedColumnChange: onWrappedColumnChangeWithLatestState,
+      onWrappedColumnsChange
+    };
+  }
   return {
     wrappedColumnKeys,
     onWrappedColumnChange

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

@@ -41,6 +41,7 @@ const DatasourceTableViewWithoutAnalytics = ({
   onColumnResize,
   wrappedColumnKeys,
   onWrappedColumnChange,
+  onWrappedColumnsChange,
   scrollableContainerHeight = DefaultScrollableContainerHeight
 }) => {
   // Local copy lets us apply in-session sort mutations without mutating external parameters.
@@ -221,7 +222,10 @@ const DatasourceTableViewWithoutAnalytics = ({
     sortState
   } : {}, {
     wrappedColumnKeys: wrappedColumnKeys,
-    onWrappedColumnChange: onWrappedColumnChange,
+    onWrappedColumnChange: onWrappedColumnChange
+  }, onWrappedColumnsChange && fg('platform_lp_sllv_table_settings_menu') ? {
+    onWrappedColumnsChange
+  } : {}, {
     scrollableContainerHeight: isInPDFRender ? undefined : fg('lp_enable_datasource-table-view_height_override') ? scrollableContainerHeight : DefaultScrollableContainerHeight,
     extensionKey: extensionKey
   })) : /*#__PURE__*/React.createElement(EmptyState, {

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

@@ -4,9 +4,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';
@@ -123,22 +125,35 @@ export const ColumnPicker = ({
     target: ({
       isOpen,
       ...triggerProps
-    }) => /*#__PURE__*/React.createElement(Tooltip, {
-      content: intl.formatMessage(columnPickerMessages.tooltip)
-    }, tooltipProps => /*#__PURE__*/React.createElement(Button, _extends({}, tooltipProps, triggerProps, {
-      isSelected: isOpen,
-      spacing: "compact",
-      appearance: 'default',
-      testId: "column-picker-trigger-button",
-      iconAfter: () => /*#__PURE__*/React.createElement(ChevronDownIcon, {
-        label: "down",
-        size: "small"
-      })
-    }), /*#__PURE__*/React.createElement(Box, {
-      as: "span",
-      xcss: styles.customizeIcon
-    }, /*#__PURE__*/React.createElement(CustomizeIcon, {
-      label: "customize"
-    }))))
+    }) => {
+      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)
+      }, tooltipProps => /*#__PURE__*/React.createElement(Button, _extends({}, tooltipProps, triggerProps, {
+        isSelected: isOpen,
+        spacing: "compact",
+        appearance: 'default',
+        testId: "column-picker-trigger-button",
+        iconAfter: () => /*#__PURE__*/React.createElement(ChevronDownIcon, {
+          label: "down",
+          size: "small"
+        })
+      }), /*#__PURE__*/React.createElement(Box, {
+        as: "span",
+        xcss: styles.customizeIcon
+      }, /*#__PURE__*/React.createElement(CustomizeIcon, {
+        label: "customize"
+      }))));
+    }
   });
 };

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

@@ -20,13 +20,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';
@@ -38,6 +39,7 @@ import { COLUMN_BASE_WIDTH, getFieldLabelById, getWidthCss } from './utils';
 const tableSidePadding = "var(--ds-space-200, 16px)";
 const tableHeadStyles = null;
 const columnPickerWidth = 80;
+const columnPickerWithSettingsWidth = 95;
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 const ColumnPickerHeader = forwardRef(({
   as: C = "th",
@@ -50,9 +52,24 @@ const ColumnPickerHeader = forwardRef(({
     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';
 }
+const ColumnPickerHeaderWithSettings = forwardRef(({
+  as: C = "th",
+  style: __cmpls,
+  ...__cmplp
+}, __cmplr) => {
+  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';
+}
 const truncateStyles = null;
 const wrappedStyles = null;
 const richTextCellStyles = null;
@@ -215,6 +232,7 @@ export const IssueLikeDataTableView = ({
   onColumnSort,
   wrappedColumnKeys,
   onWrappedColumnChange,
+  onWrappedColumnsChange,
   sortState,
   status,
   hasNextPage,
@@ -249,6 +267,25 @@ export const IssueLikeDataTableView = ({
   const visibleSortedColumns = useMemo(() => visibleColumnKeys.map(visibleKey => orderedColumns.find(({
     key
   }) => visibleKey === key)).filter(Boolean), [orderedColumns, visibleColumnKeys]);
+  const isWrapTextSettingAvailable = Boolean(onWrappedColumnsChange) && fg('platform_lp_sllv_table_settings_menu');
+  let areAllVisibleColumnsWrapped = false;
+  if (isWrapTextSettingAvailable) {
+    areAllVisibleColumnsWrapped = visibleColumnKeys.length > 0 && visibleColumnKeys.every(columnKey => wrappedColumnKeys === null || wrappedColumnKeys === void 0 ? void 0 : wrappedColumnKeys.includes(columnKey));
+  }
+  const handleWrapTextOnAllColumnsChange = useCallback(() => {
+    if (!onWrappedColumnsChange) {
+      return;
+    }
+    const nextWrappedColumnKeys = areAllVisibleColumnsWrapped ? (wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 ? wrappedColumnKeys : []).filter(columnKey => !visibleColumnKeys.includes(columnKey)) : Array.from(new Set([...(wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 ? wrappedColumnKeys : []), ...visibleColumnKeys]));
+    onWrappedColumnsChange(nextWrappedColumnKeys);
+  }, [areAllVisibleColumnsWrapped, onWrappedColumnsChange, visibleColumnKeys, wrappedColumnKeys]);
+  const tableSettingsMenuProps = {
+    wrapTextSetting: isWrapTextSettingAvailable ? {
+      isChecked: areAllVisibleColumnsWrapped,
+      onChange: handleWrapTextOnAllColumnsChange
+    } : undefined
+  };
+  const 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,
@@ -256,7 +293,7 @@ export const IssueLikeDataTableView = ({
   const columnsWidthsSum = useMemo(() => visibleSortedColumns.map(({
     key,
     type
-  }) => (columnCustomSizes === null || columnCustomSizes === void 0 ? void 0 : columnCustomSizes[key]) || getDefaultColumnWidth(key, type)).reduce((sum, width) => width + sum, 0) + (onVisibleColumnKeysChange ? columnPickerWidth : 0), [columnCustomSizes, onVisibleColumnKeysChange, visibleSortedColumns]);
+  }) => (columnCustomSizes === null || columnCustomSizes === void 0 ? void 0 : columnCustomSizes[key]) || getDefaultColumnWidth(key, type)).reduce((sum, width) => width + sum, 0) + (onVisibleColumnKeysChange && shouldShowTableSettingsMenu ? columnPickerWithSettingsWidth : onVisibleColumnKeysChange ? columnPickerWidth : 0), [columnCustomSizes, onVisibleColumnKeysChange, shouldShowTableSettingsMenu, visibleSortedColumns]);
   const shouldUseWidth = !!(onColumnResize || columnCustomSizes);
   const tableContainerWidth = Math.ceil(((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.getBoundingClientRect().width) || 0);
   const getColumnWidth = useCallback((key, type, isLastCell) => {
@@ -613,12 +650,23 @@ export const IssueLikeDataTableView = ({
         })
       }), 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 && `${testId}--body`,
     className: ax(["_n7zlidpf"])
   }, hasNoResults && /*#__PURE__*/React.createElement("tr", {

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

@@ -0,0 +1,76 @@
+/* index.tsx generated by @compiled/babel-plugin v2.0.0 */
+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';
+const styles = {
+  menu: "_1rjcu2gc _1bsb1mjv",
+  setting: "_bfhksm61 _ca0q1b66 _u5f3utpp _n3td1b66 _19bvutpp"
+};
+export const hasAvailableTableSettings = ({
+  wrapTextSetting
+}) => Boolean(wrapTextSetting);
+export const TableSettingsMenu = props => {
+  const {
+    formatMessage
+  } = useIntl();
+  const [isOpen, setIsOpen] = useState(false);
+  const wrapTextToggleId = useId();
+  if (!hasAvailableTableSettings(props)) {
+    return null;
+  }
+  const {
+    wrapTextSetting
+  } = props;
+  const wrapTextLabel = formatMessage(tableSettingsMenuMessages.wrapTextOnAllColumns);
+  return /*#__PURE__*/React.createElement(Popup, {
+    isOpen: isOpen,
+    onClose: () => setIsOpen(false),
+    placement: "bottom-end",
+    shouldFlip: true,
+    testId: "table-settings-menu",
+    zIndex: layers.modal(),
+    role: "dialog",
+    label: formatMessage(tableSettingsMenuMessages.tableSettings),
+    trigger: triggerProps => /*#__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: () => setIsOpen(currentIsOpen => !currentIsOpen),
+      spacing: "default"
+    }),
+    content: ({
+      setInitialFocusRef
+    }) => /*#__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: element => {
+        setInitialFocusRef(element);
+      },
+      id: wrapTextToggleId,
+      isChecked: wrapTextSetting.isChecked,
+      onChange: wrapTextSetting.onChange,
+      testId: "table-settings-menu-wrap-text-toggle"
+    }))))
+  });
+};

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

@@ -0,0 +1,18 @@
+import { defineMessages } from 'react-intl';
+export const 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/esm/ui/common/modal/datasource-context/index.js

@@ -27,7 +27,8 @@ export var DatasourceContextProvider = function DatasourceContextProvider(_ref)
     onColumnResize = _useColumnResize.onColumnResize;
   var _useColumnWrapping = useColumnWrapping(initialWrappedColumnKeys),
     wrappedColumnKeys = _useColumnWrapping.wrappedColumnKeys,
-    onWrappedColumnChange = _useColumnWrapping.onWrappedColumnChange;
+    onWrappedColumnChange = _useColumnWrapping.onWrappedColumnChange,
+    onWrappedColumnsChange = _useColumnWrapping.onWrappedColumnsChange;
   var tableState = useDatasourceTableState({
     datasourceId: datasourceId,
     parameters: isValidParameters(parameters) ? parameters : undefined,
@@ -53,11 +54,12 @@ export var DatasourceContextProvider = function DatasourceContextProvider(_ref)
       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.createElement(DatasourceContext.Provider, {
     value: contextValue
   }, children);

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { DatasourceAction } from '../../../../analytics/types';
 import { useUserInteractions } from '../../../../contexts/user-interactions';
 import { IssueLikeDataTableView } from '../../../issue-like-table';
@@ -10,6 +11,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,
@@ -44,6 +46,8 @@ var Table = function Table(props) {
     onColumnResize: onColumnResize,
     wrappedColumnKeys: wrappedColumnKeys,
     onWrappedColumnChange: onWrappedColumnChange
-  }));
+  }, fg('platform_lp_sllv_table_settings_menu') ? {
+    onWrappedColumnsChange: onWrappedColumnsChange
+  } : {}));
 };
 export default Table;

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

@@ -1,5 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { useCallback, useState } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 export var useColumnWrapping = function useColumnWrapping() {
   var initialWrappedColumnKeys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   var _useState = useState(initialWrappedColumnKeys),
@@ -15,6 +16,27 @@ export var useColumnWrapping = function useColumnWrapping() {
     }
     setWrappedColumnKeys(Array.from(set));
   }, [wrappedColumnKeys]);
+  var onWrappedColumnChangeWithLatestState = 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 = useCallback(function (nextWrappedColumnKeys) {
+    setWrappedColumnKeys(nextWrappedColumnKeys);
+  }, []);
+  if (fg('platform_lp_sllv_table_settings_menu')) {
+    return {
+      wrappedColumnKeys: wrappedColumnKeys,
+      onWrappedColumnChange: onWrappedColumnChangeWithLatestState,
+      onWrappedColumnsChange: onWrappedColumnsChange
+    };
+  }
   return {
     wrappedColumnKeys: wrappedColumnKeys,
     onWrappedColumnChange: onWrappedColumnChange

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

@@ -42,6 +42,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.
@@ -227,7 +228,10 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
     sortState: sortState
   } : {}, {
     wrappedColumnKeys: wrappedColumnKeys,
-    onWrappedColumnChange: onWrappedColumnChange,
+    onWrappedColumnChange: onWrappedColumnChange
+  }, onWrappedColumnsChange && fg('platform_lp_sllv_table_settings_menu') ? {
+    onWrappedColumnsChange: onWrappedColumnsChange
+  } : {}, {
     scrollableContainerHeight: isInPDFRender ? undefined : fg('lp_enable_datasource-table-view_height_override') ? scrollableContainerHeight : DefaultScrollableContainerHeight,
     extensionKey: extensionKey
   })) : /*#__PURE__*/React.createElement(EmptyState, {