@atlaskit/link-datasource 1.22.8 → 1.23.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/link-datasource
 
+## 1.23.0
+
+### Minor Changes
+
+- [#74624](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/74624) [`0b777e6a934c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0b777e6a934c) - [ux] New props added to `DatasourceTableView`: `wrappedColumnKeys` and `onWrappedColumnChange` that control wrapping behaviour of a column. When callback is defined, table headers become a dropdown with action that allows column content to start wrapping to a new line.
+
 ## 1.22.8
 
 ### Patch Changes

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

@@ -38,7 +38,9 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
     onVisibleColumnKeysChange = _ref.onVisibleColumnKeysChange,
     url = _ref.url,
     columnCustomSizes = _ref.columnCustomSizes,
-    onColumnResize = _ref.onColumnResize;
+    onColumnResize = _ref.onColumnResize,
+    wrappedColumnKeys = _ref.wrappedColumnKeys,
+    onWrappedColumnChange = _ref.onWrappedColumnChange;
   var _useDatasourceTableSt = (0, _useDatasourceTableState.useDatasourceTableState)({
       datasourceId: datasourceId,
       parameters: parameters,
@@ -166,6 +168,8 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
     onVisibleColumnKeysChange: onVisibleColumnKeysChange,
     columnCustomSizes: columnCustomSizes,
     onColumnResize: onColumnResize,
+    wrappedColumnKeys: wrappedColumnKeys,
+    onWrappedColumnChange: onWrappedColumnChange,
     scrollableContainerHeight: _styled.ScrollableContainerHeight,
     parentContainerRenderInstanceId: tableRenderInstanceId,
     extensionKey: extensionKey

package/dist/cjs/ui/issue-like-table/custom-icons.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WrapTextIcon = exports.UnwrapTextIcon = exports.GlyphPlaceholder = void 0;
+var _react = _interopRequireDefault(require("react"));
+var GlyphPlaceholder = exports.GlyphPlaceholder = function GlyphPlaceholder(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    "data-testid": props['data-testid'],
+    "aria-label": props['aria-label'],
+    className: props.className
+  });
+};
+var WrapTextIcon = exports.WrapTextIcon = function WrapTextIcon() {
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M5 6.75C5 6.19772 5.44772 5.75 6 5.75H18C18.5523 5.75 19 6.19772 19 6.75C19 7.30228 18.5523 7.75 18 7.75H6C5.44772 7.75 5 7.30228 5 6.75ZM5 12C5 11.4477 5.44772 11 6 11H11.9996L12 12L12 13H6C5.44772 13 5 12.5523 5 12ZM13 12C13 12.5523 12.5522 13 12 13L12 12L11.9996 11C12.5519 11 13 11.4477 13 12ZM18.25 12C18.8023 12 19.25 12.4477 19.25 13V15.25C19.25 16.9069 17.9069 18.25 16.25 18.25H15.2023L16.0049 19.0352C16.3997 19.4214 16.4066 20.0545 16.0204 20.4493C15.6342 20.8441 15.0011 20.851 14.6063 20.4648L12.0507 17.9648C11.8584 17.7767 11.75 17.519 11.75 17.25C11.75 16.981 11.8584 16.7233 12.0507 16.5352L14.6063 14.0352C15.0011 13.649 15.6342 13.6559 16.0204 14.0507C16.4066 14.4455 16.3997 15.0786 16.0049 15.4648L15.2023 16.25H16.25C16.8023 16.25 17.25 15.8023 17.25 15.25V13C17.25 12.4477 17.6977 12 18.25 12ZM5 17.25C5 16.6977 5.44772 16.25 6 16.25H7.99911C8.55141 16.25 9 16.6977 9 17.25C9 17.8023 8.55228 18.25 7.99999 18.25H6C5.44772 18.25 5 17.8023 5 17.25Z",
+    fill: 'currentColor'
+  }));
+};
+var UnwrapTextIcon = exports.UnwrapTextIcon = function UnwrapTextIcon() {
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071Z",
+    fill: "currentColor"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M15.4214 5.75H6C5.44772 5.75 5 6.19772 5 6.75C5 7.30228 5.44772 7.75 6 7.75L13.4214 7.75L15.4214 5.75Z",
+    fill: "currentColor"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M10.1714 11L6 11C5.44772 11 5 11.4477 5 12C5 12.5523 5.44772 13 6 13H8.17139L10.1714 11Z",
+    fill: "currentColor"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M19.25 13C19.25 12.4477 18.8023 12 18.25 12C17.6977 12 17.25 12.4477 17.25 13V15.25C17.25 15.8023 16.8023 16.25 16.25 16.25H15.2022L16.0048 15.4648C16.3996 15.0786 16.4066 14.4455 16.0204 14.0507C15.6342 13.6559 15.0011 13.649 14.6063 14.0352L12.0507 16.5352C11.8584 16.7233 11.75 16.981 11.75 17.25C11.75 17.519 11.8584 17.7767 12.0507 17.9648L14.6063 20.4648C15.0011 20.851 15.6342 20.8441 16.0204 20.4493C16.4066 20.0545 16.3996 19.4214 16.0048 19.0352L15.2022 18.25H16.25C17.9069 18.25 19.25 16.9069 19.25 15.25V13Z",
+    fill: "currentColor"
+  }));
+};

package/dist/cjs/ui/issue-like-table/drag-column-preview.js

@@ -5,22 +5,37 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DragColumnPreview = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _colors = require("@atlaskit/theme/colors");
 var _styled2 = require("./styled");
-var _templateObject, _templateObject2;
 /** @jsx jsx */
+
 var maxWidth = '200px';
 var firstLastChildOverride = "\n  &:first-of-type, &:last-of-type {\n    padding-left: ".concat("var(--ds-space-100, 8px)", ";\n    padding-right: ", "var(--ds-space-100, 8px)", ";\n  }\n");
-var TablePreviewHeading = (0, _styled.default)(_styled2.TableHeading)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  background: ", ";\n  color: ", ";\n  max-width: ", ";\n  ", "\n"])), "var(--ds-background-disabled, #091E4224)", "var(--ds-text-disabled, #091E424F)", maxWidth, firstLastChildOverride);
-var TablePreviewCell = _styled.default.td(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: ", ";\n  padding: ", " ", ";\n  ", "\n"])), maxWidth, "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", firstLastChildOverride);
+var TablePreviewHeading = (0, _styled.default)(_styled2.TableHeading)({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  background: "var(--ds-background-disabled, #091E4224)",
+  maxWidth: maxWidth
+}, firstLastChildOverride);
+var TablePreviewCell = _styled.default.td({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  maxWidth: maxWidth,
+  padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-100, 8px)"),
+  boxSizing: 'border-box',
+  borderBottom: "0.5px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")")),
+  height: '30px'
+}, firstLastChildOverride);
 var tableStyles = (0, _react2.css)({
   background: "var(--ds-surface, #FFF)",
   borderCollapse: 'separate',
   borderSpacing: 0,
-  fontSize: "var(--ds-font-size-200, 16px)",
+  fontSize: "var(--ds-font-size-100, 14px)",
   maxWidth: maxWidth
 });
 var DragColumnPreview = exports.DragColumnPreview = function DragColumnPreview(_ref) {

package/dist/cjs/ui/issue-like-table/draggable-table-heading.js

@@ -1,16 +1,26 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DraggableTableHeading = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
+var _reactIntlNext = require("react-intl-next");
 var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
+var _new = _interopRequireDefault(require("@atlaskit/button/new"));
+var _dropdownMenu = _interopRequireWildcard(require("@atlaskit/dropdown-menu"));
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
+var _chevronUp = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-up"));
 var _closestEdge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge");
 var _boxWithoutTerminal = require("@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box-without-terminal");
 var _combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
@@ -19,15 +29,18 @@ var _disableNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/eleme
 var _pointerOutsideOfPreview = require("@atlaskit/pragmatic-drag-and-drop/element/pointer-outside-of-preview");
 var _setCustomNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview");
 var _preventUnhandled = require("@atlaskit/pragmatic-drag-and-drop/prevent-unhandled");
-var _styled = require("./styled");
+var _customIcons = require("./custom-icons");
+var _messages = require("./messages");
+var _styled2 = require("./styled");
 var _utils = require("./utils");
+var _excluded = ["triggerRef"];
+var _templateObject;
+/** @jsx jsx */
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */
-var verticallyAlignedStyles = (0, _react2.css)({
-  display: 'flex',
-  alignItems: 'center',
-  whiteSpace: 'nowrap'
-});
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var DropdownParent = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  white-space: nowrap;\n  & button {\n    text-align: left; /* By default button center in the middle without props to control it */\n    height: auto; /* By default button is not happy with tall (up to lines in our case) content */\n    padding-left: 0px; /* By default button's padding left and right is 8 + 4. We control that 8, so left with 4 that we need.  */\n    padding-right: 0px;\n  }\n"])));
 var dropTargetStyles = (0, _react2.css)({
   position: 'absolute',
   top: 0,
@@ -85,7 +98,9 @@ var DraggableTableHeading = exports.DraggableTableHeading = function DraggableTa
     dndPreviewHeight = _ref.dndPreviewHeight,
     dragPreview = _ref.dragPreview,
     width = _ref.width,
-    onWidthChange = _ref.onWidthChange;
+    onWidthChange = _ref.onWidthChange,
+    isWrapped = _ref.isWrapped,
+    onIsWrappedChange = _ref.onIsWrappedChange;
   var mainHeaderCellRef = (0, _react.useRef)(null);
   var columnResizeHandleRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(idleState),
@@ -265,7 +280,45 @@ var DraggableTableHeading = exports.DraggableTableHeading = function DraggableTa
       }
     });
   }, [id, index, onWidthChange, state, tableId, width]);
-  return (0, _react2.jsx)(_styled.TableHeading, {
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    buttonHovered = _useState8[0],
+    setButtonHovered = _useState8[1];
+  var _useState9 = (0, _react.useState)(false),
+    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+    isDropdownOpen = _useState10[0],
+    setIsDropdownOpen = _useState10[1];
+  var isWideEnoughToHaveChevron = width > 76;
+  var shouldShowTriggerIcon = (buttonHovered || isDropdownOpen) && isWideEnoughToHaveChevron;
+  var triggerIcon = (0, _react.useMemo)(function () {
+    return shouldShowTriggerIcon ? isDropdownOpen ? _chevronUp.default : _chevronDown.default : isWideEnoughToHaveChevron ? _customIcons.GlyphPlaceholder : undefined;
+  }, [shouldShowTriggerIcon, isDropdownOpen, isWideEnoughToHaveChevron]);
+  var getTriggerButton = (0, _react.useCallback)(function (_ref8) {
+    var triggerRef = _ref8.triggerRef,
+      props = (0, _objectWithoutProperties2.default)(_ref8, _excluded);
+    return (0, _react2.jsx)(_new.default, (0, _extends2.default)({}, props, {
+      testId: "".concat(id, "-column-dropdown"),
+      shouldFitContainer: true,
+      iconAfter: triggerIcon,
+      ref: triggerRef,
+      appearance: "subtle",
+      spacing: "compact",
+      onMouseEnter: function onMouseEnter() {
+        return setButtonHovered(true);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return setButtonHovered(false);
+      }
+    }), children);
+  }, [children, id, triggerIcon]);
+  var onDropdownOpenChange = (0, _react.useCallback)(function (_ref9) {
+    var isOpen = _ref9.isOpen;
+    return setIsDropdownOpen(isOpen);
+  }, []);
+  var toggleWrap = (0, _react.useCallback)(function () {
+    return onIsWrappedChange && onIsWrappedChange(!(isWrapped || false));
+  }, [isWrapped, onIsWrappedChange]);
+  return (0, _react2.jsx)(_styled2.TableHeading, {
     ref: mainHeaderCellRef,
     "data-testid": "".concat(id, "-column-heading"),
     style: _objectSpread({
@@ -281,7 +334,15 @@ var DraggableTableHeading = exports.DraggableTableHeading = function DraggableTa
       height: "".concat(dndPreviewHeight, "px")
     },
     "data-testid": "column-resize-handle"
-  }) : null, (0, _react2.jsx)("div", {
+  }) : null, onIsWrappedChange ? (0, _react2.jsx)(DropdownParent, null, (0, _react2.jsx)(_dropdownMenu.default, {
+    trigger: getTriggerButton,
+    onOpenChange: onDropdownOpenChange,
+    placement: 'bottom'
+  }, (0, _react2.jsx)(_dropdownMenu.DropdownItem, {
+    elemBefore: isWrapped ? (0, _react2.jsx)(_customIcons.UnwrapTextIcon, null) : (0, _react2.jsx)(_customIcons.WrapTextIcon, null),
+    testId: "".concat(id, "-column-dropdown-item-toggle-wrapping"),
+    onClick: toggleWrap
+  }, isWrapped ? (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.issueLikeTableMessages.unwrapText) : (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.issueLikeTableMessages.wrapText)))) : children, (0, _react2.jsx)("div", {
     ref: dropTargetRef,
     css: [dropTargetStyles, isDraggingAnyColumn ? null : noPointerEventsStyles],
     style: {
@@ -290,7 +351,5 @@ var DraggableTableHeading = exports.DraggableTableHeading = function DraggableTa
     "data-testid": 'column-drop-target'
   }, closestEdge && (0, _react2.jsx)(_boxWithoutTerminal.DropIndicator, {
     edge: closestEdge
-  })), (0, _react2.jsx)("div", {
-    css: verticallyAlignedStyles
-  }, children), state.type === 'preview' ? /*#__PURE__*/_reactDom.default.createPortal(dragPreview, state.container) : null);
+  })), state.type === 'preview' ? /*#__PURE__*/_reactDom.default.createPortal(dragPreview, state.container) : null);
 };

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

@@ -7,24 +7,21 @@ Object.defineProperty(exports, "__esModule", {
 exports.scrollableContainerShadowsCssComponents = exports.getOrderedColumns = exports.IssueLikeDataTableView = exports.EmptyState = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _reactIntlNext = require("react-intl-next");
 var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
-var _heading = _interopRequireDefault(require("@atlaskit/heading"));
 var _linkingCommon = require("@atlaskit/linking-common");
 var _closestEdge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge");
 var _reorderWithEdge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge");
 var _pragmaticDragAndDropReactBeautifulDndAutoscroll = require("@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll");
 var _combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
-var _primitives = require("@atlaskit/primitives");
 var _colors = require("@atlaskit/theme/colors");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _ufoExperiences = require("../../analytics/ufoExperiences");
@@ -37,7 +34,7 @@ var _renderType = require("./render-type");
 var _styled2 = require("./styled");
 var _useIsOnScreen = require("./useIsOnScreen");
 var _utils = require("./utils");
-var _templateObject, _templateObject2;
+var _styled$th, _styled$td;
 /** @jsx jsx */
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -53,8 +50,42 @@ var truncateTextStyles = (0, _react2.css)({
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
-var ColumnPickerHeader = _styled.default.th(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", " {\n    box-sizing: content-box;\n    border: 0;\n\n    width: 56px;\n    z-index: 10;\n    position: sticky;\n    right: calc(-1 * ", ");\n    background-color: ", ";\n    border-bottom: 2px solid ", "; /* It is required to have solid (not half-transparent) color because of this gradient business below */\n\n    padding-right: ", ";\n\n    background: linear-gradient(\n      90deg,\n      rgba(255, 255, 255, 0) 0%,\n      ", " 10%\n    );\n    vertical-align: middle; /* Keeps dropdown button in the middle */\n    text-align: right; /* In case when TH itself is bigger we want to keep picker at the right side */\n  }\n\n  ", " {\n    padding-right: ", ";\n  }\n"])), (0, _styled2.withTablePluginHeaderPrefix)(), tableSidePadding, "var(--ds-elevation-surface-current, #FFF)", "var(--ds-border, ".concat(_colors.N40, ")"), "var(--ds-space-100, 4px)", "var(--ds-elevation-surface-current, #FFF)", (0, _styled2.withTablePluginHeaderPrefix)('&:last-of-type'), tableSidePadding);
-var TableCell = _styled.default.td(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", " {\n    /* First section here is to override things editor table plugin css defines */\n    padding: ", " ", ";\n    border: 0;\n    min-width: auto;\n    vertical-align: inherit;\n    box-sizing: border-box;\n\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    border-right: 0.5px solid ", ";\n    border-bottom: 0.5px solid ", ";\n  }\n\n  ", " {\n    padding-left: ", ";\n  }\n\n  ", " {\n    border-right: 0;\n    padding-right: ", ";\n  }\n"])), (0, _styled2.withTablePluginBodyPrefix)(), "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", "var(--ds-border, ".concat(_colors.N40, ")"), "var(--ds-border, ".concat(_colors.N40, ")"), (0, _styled2.withTablePluginBodyPrefix)('&:first-child'), "var(--ds-space-100, 8px)", (0, _styled2.withTablePluginBodyPrefix)('&:last-child'), "var(--ds-space-100, 8px)");
+var ColumnPickerHeader = _styled.default.th((_styled$th = {}, (0, _defineProperty2.default)(_styled$th, "".concat((0, _styled2.withTablePluginHeaderPrefix)()), {
+  boxSizing: 'content-box',
+  border: 0,
+  width: '56px',
+  zIndex: 10,
+  position: 'sticky',
+  right: "calc(-1 * ".concat(tableSidePadding, ")"),
+  backgroundColor: "var(--ds-elevation-surface-current, #FFF)",
+  borderBottom: "2px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")")),
+  paddingRight: "var(--ds-space-100, 4px)",
+  background: "linear-gradient( 90deg, rgba(255, 255, 255, 0) 0%, ".concat("var(--ds-elevation-surface-current, #FFF)", " 10% )"),
+  verticalAlign: 'middle',
+  textAlign: 'right'
+}), (0, _defineProperty2.default)(_styled$th, "".concat((0, _styled2.withTablePluginHeaderPrefix)('&:last-of-type')), {
+  paddingRight: tableSidePadding
+}), _styled$th));
+var truncateStyles = (0, _react2.css)({
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+var TableCell = _styled.default.td((_styled$td = {}, (0, _defineProperty2.default)(_styled$td, "".concat((0, _styled2.withTablePluginBodyPrefix)()), {
+  fontSize: _styled2.fieldTextFontSize,
+  padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-100, 8px)"),
+  border: 0,
+  minWidth: 'auto',
+  verticalAlign: 'inherit',
+  boxSizing: 'border-box',
+  borderRight: "0.5px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")")),
+  borderBottom: "0.5px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")")),
+  overflow: 'hidden'
+}), (0, _defineProperty2.default)(_styled$td, "".concat((0, _styled2.withTablePluginBodyPrefix)('&:first-child')), {
+  paddingLeft: "var(--ds-space-100, 8px)"
+}), (0, _defineProperty2.default)(_styled$td, "".concat((0, _styled2.withTablePluginBodyPrefix)('&:last-child')), {
+  borderRight: 0,
+  paddingRight: "var(--ds-space-100, 8px)"
+}), _styled$td));
 var tableContainerStyles = (0, _react2.css)({
   borderRadius: 'inherit',
   borderBottomLeftRadius: 0,
@@ -163,6 +194,19 @@ var tableStyles = (0, _react2.css)({
 var noDefaultBorderStyles = (0, _react2.css)({
   borderBottom: 0
 });
+var headerStyles = (0, _react2.css)({
+  fontSize: "var(--ds-font-size-075, 12px)",
+  fontWeight: "var(--ds-font-weight-medium, 500)"
+});
+var headingHoverEffectStyles = (0, _react2.css)({
+  display: 'flex',
+  alignItems: 'center',
+  whiteSpace: 'nowrap',
+  '&:hover': {
+    background: "var(--ds-background-input-hovered, #F7F8F9)",
+    borderRadius: "var(--ds-border-radius-200, 3px)"
+  }
+});
 function extractIndex(data) {
   var index = data.index;
   (0, _tinyInvariant.default)(typeof index === 'number');
@@ -226,6 +270,8 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
     onVisibleColumnKeysChange = _ref5.onVisibleColumnKeysChange,
     columnCustomSizes = _ref5.columnCustomSizes,
     onColumnResize = _ref5.onColumnResize,
+    wrappedColumnKeys = _ref5.wrappedColumnKeys,
+    onWrappedColumnChange = _ref5.onWrappedColumnChange,
     status = _ref5.status,
     hasNextPage = _ref5.hasNextPage,
     scrollableContainerHeight = _ref5.scrollableContainerHeight,
@@ -412,7 +458,7 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
           }).filter(function (value) {
             return value !== '';
           }).join(', ');
-          var contentComponent = stringifiedContent ? (0, _react2.jsx)(_tooltip.default, {
+          var contentComponent = stringifiedContent && !(wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(key)) ? (0, _react2.jsx)(_tooltip.default, {
             tag: TruncateTextTag,
             content: stringifiedContent,
             testId: "issues-table-cell-tooltip"
@@ -428,7 +474,7 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
         } : undefined
       };
     });
-  }, [items, visibleSortedColumns, getColumnWidth, renderItem, intl]);
+  }, [items, visibleSortedColumns, renderItem, wrappedColumnKeys, getColumnWidth, intl.formatMessage, intl.formatDate]);
   var rows = (0, _react.useMemo)(function () {
     if (status !== 'loading') {
       return tableRows;
@@ -518,11 +564,17 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
     var heading = (0, _react2.jsx)(_tooltip.default, {
       content: content,
       tag: "span",
+      position: "bottom-start",
       testId: 'datasource-header-content'
-    }, (0, _react2.jsx)(_heading.default, {
-      level: "h200",
-      as: 'span'
+    }, (0, _react2.jsx)("span", {
+      css: headerStyles
     }, content));
+    var isHeadingOutsideButton = !isEditable || !onWrappedColumnChange;
+    if (isHeadingOutsideButton) {
+      heading = (0, _react2.jsx)("div", {
+        css: headingHoverEffectStyles
+      }, heading);
+    }
     if (isEditable) {
       var _containerRef$current3;
       var previewRows = tableRows.map(function (_ref14) {
@@ -547,7 +599,9 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
         width: width,
         onWidthChange: onColumnResize === null || onColumnResize === void 0 ? void 0 : onColumnResize.bind(null, key),
         dndPreviewHeight: ((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.offsetHeight) || 0,
-        dragPreview: dragPreview
+        dragPreview: dragPreview,
+        isWrapped: wrappedColumnKeys === null || wrappedColumnKeys === void 0 ? void 0 : wrappedColumnKeys.includes(key),
+        onIsWrappedChange: onWrappedColumnChange === null || onWrappedColumnChange === void 0 ? void 0 : onWrappedColumnChange.bind(null, key)
       }, heading);
     } else {
       return (0, _react2.jsx)(_styled2.TableHeading, {
@@ -557,7 +611,7 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
           shouldUseWidth: shouldUseWidth,
           width: width
         })
-      }, (0, _react2.jsx)(_primitives.Flex, null, heading));
+      }, heading);
     }
   }), onVisibleColumnKeysChange && (0, _react2.jsx)(ColumnPickerHeader, null, (0, _react2.jsx)(_columnPicker.ColumnPicker, {
     columns: hasFullSchema ? orderedColumns : [],
@@ -595,7 +649,8 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
         key: cellKey,
         "data-testid": testId && "".concat(testId, "--cell-").concat(cellIndex),
         colSpan: isEditable && isLastCell ? 2 : undefined,
-        style: loadingRowStyle
+        style: loadingRowStyle,
+        css: [wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(cellKey) ? null : truncateStyles]
       }, content);
     }));
   }))));

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

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.issueLikeTableMessages = void 0;
+var _reactIntlNext = require("react-intl-next");
+var issueLikeTableMessages = exports.issueLikeTableMessages = (0, _reactIntlNext.defineMessages)({
+  wrapText: {
+    id: 'linkDataSource.issue-line-table.wrap-text',
+    description: 'Table header Dropdown item for making whole column to wrap text',
+    defaultMessage: 'Wrap text'
+  },
+  unwrapText: {
+    id: 'linkDataSource.issue-line-table.unwrap-text',
+    description: 'Table header Dropdown item for making whole column to not wrap text',
+    defaultMessage: 'Unwrap text'
+  }
+});

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

@@ -7,12 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.DATETIME_TYPE_TEST_ID = void 0;
 exports.getFormattedDate = getFormattedDate;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _reactIntlNext = require("react-intl-next");
 var _styled2 = require("../../styled");
-var _templateObject;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var DATETIME_TYPE_TEST_ID = exports.DATETIME_TYPE_TEST_ID = 'link-datasource-render-type--datetime';
@@ -26,7 +24,9 @@ var timeOptions = {
   hour: '2-digit',
   minute: '2-digit'
 };
-var DateTimeWrapper = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  font-size: ", ";\n"])), _styled2.FieldTextFontSize);
+var DateTimeWrapper = _styled.default.span({
+  fontSize: _styled2.fieldTextFontSize
+});
 function getFormattedDate(value) {
   var display = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'datetime';
   var formatDate = arguments.length > 2 ? arguments[2] : undefined;

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

@@ -42,7 +42,7 @@ var LinkRenderType = function LinkRenderType(_ref) {
     }, /*#__PURE__*/_react.default.createElement(_linkUrl.default, {
       href: url,
       style: _objectSpread(_objectSpread({}, linkStyle), {}, {
-        fontSize: _styled.FieldTextFontSize
+        fontSize: _styled.fieldTextFontSize
       }),
       "data-testid": testId,
       target: "_blank"

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

@@ -14,9 +14,6 @@ var _model = require("@atlaskit/editor-prosemirror/model");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */
 var rootStyles = (0, _react2.css)({
-  whiteSpace: 'nowrap',
-  textOverflow: 'ellipsis',
-  overflow: 'hidden',
   position: 'relative',
   display: 'block'
 });

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

@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.TEXT_TYPE_TEST_ID = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _styled2 = require("../../styled");
-var _templateObject;
 var TEXT_TYPE_TEST_ID = exports.TEXT_TYPE_TEST_ID = 'link-datasource-render-type--text';
-var TextWrapper = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  font-size: ", ";\n"])), _styled2.FieldTextFontSize);
+var TextWrapper = _styled.default.span({
+  fontSize: _styled2.fieldTextFontSize
+});
 var TextRenderType = function TextRenderType(_ref) {
   var text = _ref.text,
     _ref$testId = _ref.testId,

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

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.USER_TYPE_TEST_ID = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _styled = _interopRequireDefault(require("@emotion/styled"));
@@ -18,14 +17,14 @@ var _primitives = require("@atlaskit/primitives");
 var _widthDetector = require("@atlaskit/width-detector");
 var _styled2 = require("../../styled");
 var _messages = require("./messages");
-var _templateObject;
-/** @jsx jsx */
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/** @jsx jsx */
+
 var userWrapperStyles = (0, _primitives.xcss)({
   display: 'flex',
   alignItems: 'center',
-  fontSize: "".concat(_styled2.FieldTextFontSize, "px")
+  fontSize: "".concat(_styled2.fieldTextFontSize, "px")
 });
 var avatarWrapperStyles = (0, _primitives.xcss)({
   marginRight: '5px'
@@ -33,7 +32,11 @@ var avatarWrapperStyles = (0, _primitives.xcss)({
 var widthObserverWrapperStyles = (0, _primitives.xcss)({
   position: 'relative'
 });
-var AvatarGroupWrapperStyles = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ul {\n    padding-left: 0px !important;\n  }\n"])));
+var AvatarGroupWrapperStyles = _styled.default.div({
+  ul: {
+    paddingLeft: '0px !important'
+  }
+});
 var getMaxUserCount = function getMaxUserCount(userCount, availableWidth) {
   if (availableWidth <= 28) {
     // If width is less than or equal to 28px, we should only display the user count