@atlaskit/link-datasource 1.22.8 → 1.23.0

package/dist/es2019/ui/issue-like-table/styled.js

@@ -1,10 +1,10 @@
 import styled from '@emotion/styled';
 import { N40 } from '@atlaskit/theme/colors';
 export const ScrollableContainerHeight = 590;
-export const FieldTextFontSize = '14px';
-export const Table = styled.table`
-  width: 100%;
-`;
+export const fieldTextFontSize = "var(--ds-font-size-100, 14px)";
+export const Table = styled.table({
+  width: '100%'
+});
 const lineHeight = "var(--ds-font-lineHeight-300, 24px)";
 const verticalPadding = "var(--ds-space-025, 2px)";
 
@@ -21,56 +21,36 @@ export const withTablePluginPrefix = (tableSection, mainRule = '&') => `
 `;
 export const withTablePluginHeaderPrefix = withTablePluginPrefix.bind(null, 'thead');
 export const withTablePluginBodyPrefix = withTablePluginPrefix.bind(null, 'tbody');
-export const TableHeading = styled.th`
-  ${withTablePluginHeaderPrefix()} {
-    border: 0;
-    position: relative;
-
-    /* This makes resizing work with out jumping due to padding + changes overall width for same default values. */
-    box-sizing: border-box;
-
-    line-height: ${lineHeight};
-    padding: ${verticalPadding} ${"var(--ds-space-050, 4px)"};
-    border-right: 0.5px solid ${`var(--ds-border, ${N40})`};
-    border-bottom: 2px solid ${`var(--ds-border, ${N40})`};
-
-    /*
-      lineHeight * 2 -> Max height of two lined header
-      verticalPadding * 2 -> padding for this component itself
-      verticalPadding * 2 -> padding inside span (--container)
-      2px -> Bottom border
-      Last two terms are needed because of border-box box sizing.
-    */
-    height: calc(${lineHeight} * 2 + ${verticalPadding} * 4 + 2px);
-    vertical-align: bottom;
-    background-color: ${"var(--ds-elevation-surface-current, #FFF)"};
-  }
-
-  ${withTablePluginPrefix('', 'thead.has-column-picker &:nth-last-of-type(2)')} {
-    border-right: 0;
-  }
-
-  ${withTablePluginHeaderPrefix('&:first-child')} {
-    padding-left: ${"var(--ds-space-050, 4px)"};
-  }
-
-  ${withTablePluginHeaderPrefix('&:last-child')} {
-    border-right: 0;
-  }
-
-  & [data-testid='datasource-header-content--container'] {
-    width: 100%;
-    padding: ${verticalPadding} ${"var(--ds-space-050, 4px)"};
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    white-space: normal;
-    overflow: hidden;
-    word-wrap: break-word;
-
-    &:hover {
-      background: ${"var(--ds-background-input-hovered, #F7F8F9)"};
-      border-radius: 3px;
-    }
+export const TableHeading = styled.th({
+  [`${withTablePluginHeaderPrefix()}`]: {
+    border: 0,
+    position: 'relative',
+    boxSizing: 'border-box',
+    lineHeight: lineHeight,
+    padding: `${verticalPadding} ${"var(--ds-space-050, 4px)"}`,
+    borderRight: `0.5px solid ${`var(--ds-border, ${N40})`}`,
+    borderBottom: `2px solid ${`var(--ds-border, ${N40})`}`,
+    height: `calc(${lineHeight} * 2 + ${verticalPadding} * 4 + 2px)`,
+    verticalAlign: 'bottom',
+    backgroundColor: "var(--ds-elevation-surface-current, #FFF)"
+  },
+  [`${withTablePluginPrefix('', 'thead.has-column-picker &:nth-last-of-type(2)')}`]: {
+    borderRight: 0
+  },
+  [`${withTablePluginHeaderPrefix('&:first-child')}`]: {
+    paddingLeft: "var(--ds-space-050, 4px)"
+  },
+  [`${withTablePluginHeaderPrefix('&:last-child')}`]: {
+    borderRight: 0
+  },
+  "& [data-testid='datasource-header-content--container']": {
+    width: '100%',
+    padding: `${verticalPadding} ${"var(--ds-space-050, 4px)"}`,
+    display: '-webkit-box',
+    WebkitLineClamp: 2,
+    WebkitBoxOrient: 'vertical',
+    whiteSpace: 'normal',
+    overflow: 'hidden',
+    wordWrap: 'break-word'
   }
-`;
+});

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

@@ -30,7 +30,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 = useDatasourceTableState({
       datasourceId: datasourceId,
       parameters: parameters,
@@ -158,6 +160,8 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
     onVisibleColumnKeysChange: onVisibleColumnKeysChange,
     columnCustomSizes: columnCustomSizes,
     onColumnResize: onColumnResize,
+    wrappedColumnKeys: wrappedColumnKeys,
+    onWrappedColumnChange: onWrappedColumnChange,
     scrollableContainerHeight: ScrollableContainerHeight,
     parentContainerRenderInstanceId: tableRenderInstanceId,
     extensionKey: extensionKey

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

@@ -0,0 +1,48 @@
+import React from 'react';
+export var GlyphPlaceholder = function GlyphPlaceholder(props) {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    "data-testid": props['data-testid'],
+    "aria-label": props['aria-label'],
+    className: props.className
+  });
+};
+export var WrapTextIcon = function WrapTextIcon() {
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.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'
+  }));
+};
+export var UnwrapTextIcon = function UnwrapTextIcon() {
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.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.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.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.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/esm/ui/issue-like-table/drag-column-preview.js

@@ -1,19 +1,33 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import styled from '@emotion/styled';
+import { N40 } from '@atlaskit/theme/colors';
 import { TableHeading } from './styled';
 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 = styled(TableHeading)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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.td(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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 = styled(TableHeading)({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  background: "var(--ds-background-disabled, #091E4224)",
+  maxWidth: maxWidth
+}, firstLastChildOverride);
+var TablePreviewCell = styled.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(N40, ")")),
+  height: '30px'
+}, firstLastChildOverride);
 var tableStyles = 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
 });
 export var DragColumnPreview = function DragColumnPreview(_ref) {

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

@@ -1,12 +1,23 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _excluded = ["triggerRef"];
+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) { _defineProperty(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 */
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
+import styled from '@emotion/styled';
 import ReactDOM from 'react-dom';
+import { FormattedMessage } from 'react-intl-next';
 import invariant from 'tiny-invariant';
+import Button from '@atlaskit/button/new';
+import DropdownMenu, { DropdownItem } from '@atlaskit/dropdown-menu';
+import ChevronDown from '@atlaskit/icon/glyph/chevron-down';
+import ChevronUp from '@atlaskit/icon/glyph/chevron-up';
 import { attachClosestEdge, extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box-without-terminal';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
@@ -15,13 +26,11 @@ import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/elem
 import { pointerOutsideOfPreview } from '@atlaskit/pragmatic-drag-and-drop/element/pointer-outside-of-preview';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
 import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
+import { GlyphPlaceholder, UnwrapTextIcon, WrapTextIcon } from './custom-icons';
+import { issueLikeTableMessages } from './messages';
 import { TableHeading } from './styled';
 import { COLUMN_MIN_WIDTH, getWidthCss } from './utils';
-var verticallyAlignedStyles = css({
-  display: 'flex',
-  alignItems: 'center',
-  whiteSpace: 'nowrap'
-});
+var DropdownParent = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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 = css({
   position: 'absolute',
   top: 0,
@@ -79,7 +88,9 @@ export var DraggableTableHeading = function DraggableTableHeading(_ref) {
     dndPreviewHeight = _ref.dndPreviewHeight,
     dragPreview = _ref.dragPreview,
     width = _ref.width,
-    onWidthChange = _ref.onWidthChange;
+    onWidthChange = _ref.onWidthChange,
+    isWrapped = _ref.isWrapped,
+    onIsWrappedChange = _ref.onIsWrappedChange;
   var mainHeaderCellRef = useRef(null);
   var columnResizeHandleRef = useRef(null);
   var _useState = useState(idleState),
@@ -259,6 +270,44 @@ export var DraggableTableHeading = function DraggableTableHeading(_ref) {
       }
     });
   }, [id, index, onWidthChange, state, tableId, width]);
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    buttonHovered = _useState8[0],
+    setButtonHovered = _useState8[1];
+  var _useState9 = useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    isDropdownOpen = _useState10[0],
+    setIsDropdownOpen = _useState10[1];
+  var isWideEnoughToHaveChevron = width > 76;
+  var shouldShowTriggerIcon = (buttonHovered || isDropdownOpen) && isWideEnoughToHaveChevron;
+  var triggerIcon = useMemo(function () {
+    return shouldShowTriggerIcon ? isDropdownOpen ? ChevronUp : ChevronDown : isWideEnoughToHaveChevron ? GlyphPlaceholder : undefined;
+  }, [shouldShowTriggerIcon, isDropdownOpen, isWideEnoughToHaveChevron]);
+  var getTriggerButton = useCallback(function (_ref8) {
+    var triggerRef = _ref8.triggerRef,
+      props = _objectWithoutProperties(_ref8, _excluded);
+    return jsx(Button, _extends({}, 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 = useCallback(function (_ref9) {
+    var isOpen = _ref9.isOpen;
+    return setIsDropdownOpen(isOpen);
+  }, []);
+  var toggleWrap = useCallback(function () {
+    return onIsWrappedChange && onIsWrappedChange(!(isWrapped || false));
+  }, [isWrapped, onIsWrappedChange]);
   return jsx(TableHeading, {
     ref: mainHeaderCellRef,
     "data-testid": "".concat(id, "-column-heading"),
@@ -275,7 +324,15 @@ export var DraggableTableHeading = function DraggableTableHeading(_ref) {
       height: "".concat(dndPreviewHeight, "px")
     },
     "data-testid": "column-resize-handle"
-  }) : null, jsx("div", {
+  }) : null, onIsWrappedChange ? jsx(DropdownParent, null, jsx(DropdownMenu, {
+    trigger: getTriggerButton,
+    onOpenChange: onDropdownOpenChange,
+    placement: 'bottom'
+  }, jsx(DropdownItem, {
+    elemBefore: isWrapped ? jsx(UnwrapTextIcon, null) : jsx(WrapTextIcon, null),
+    testId: "".concat(id, "-column-dropdown-item-toggle-wrapping"),
+    onClick: toggleWrap
+  }, isWrapped ? jsx(FormattedMessage, issueLikeTableMessages.unwrapText) : jsx(FormattedMessage, issueLikeTableMessages.wrapText)))) : children, jsx("div", {
     ref: dropTargetRef,
     css: [dropTargetStyles, isDraggingAnyColumn ? null : noPointerEventsStyles],
     style: {
@@ -284,7 +341,5 @@ export var DraggableTableHeading = function DraggableTableHeading(_ref) {
     "data-testid": 'column-drop-target'
   }, closestEdge && jsx(DropIndicator, {
     edge: closestEdge
-  })), jsx("div", {
-    css: verticallyAlignedStyles
-  }, children), state.type === 'preview' ? /*#__PURE__*/ReactDOM.createPortal(dragPreview, state.container) : null);
+  })), state.type === 'preview' ? /*#__PURE__*/ReactDOM.createPortal(dragPreview, state.container) : null);
 };

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

@@ -1,10 +1,9 @@
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _styled$th, _styled$td;
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 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) { _defineProperty(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; }
@@ -14,14 +13,12 @@ import { css, jsx } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useIntl } from 'react-intl-next';
 import invariant from 'tiny-invariant';
-import Heading from '@atlaskit/heading';
 import { Skeleton } from '@atlaskit/linking-common';
 import { extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 import { reorderWithEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge';
 import { autoScroller } from '@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { Flex } from '@atlaskit/primitives';
 import { N40 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
 import { startUfoExperience, succeedUfoExperience } from '../../analytics/ufoExperiences';
@@ -31,7 +28,7 @@ import { DragColumnPreview } from './drag-column-preview';
 import { DraggableTableHeading } from './draggable-table-heading';
 import TableEmptyState from './empty-state';
 import { fallbackRenderType, stringifyType } from './render-type';
-import { Table, TableHeading, withTablePluginBodyPrefix, withTablePluginHeaderPrefix } from './styled';
+import { fieldTextFontSize, Table, TableHeading, withTablePluginBodyPrefix, withTablePluginHeaderPrefix } from './styled';
 import { useIsOnScreen } from './useIsOnScreen';
 import { COLUMN_BASE_WIDTH, getWidthCss } from './utils';
 var tableSidePadding = "var(--ds-space-200, 16px)";
@@ -46,8 +43,42 @@ var truncateTextStyles = css({
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
-var ColumnPickerHeader = styled.th(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), withTablePluginHeaderPrefix(), tableSidePadding, "var(--ds-elevation-surface-current, #FFF)", "var(--ds-border, ".concat(N40, ")"), "var(--ds-space-100, 4px)", "var(--ds-elevation-surface-current, #FFF)", withTablePluginHeaderPrefix('&:last-of-type'), tableSidePadding);
-var TableCell = styled.td(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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"])), withTablePluginBodyPrefix(), "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", "var(--ds-border, ".concat(N40, ")"), "var(--ds-border, ".concat(N40, ")"), withTablePluginBodyPrefix('&:first-child'), "var(--ds-space-100, 8px)", withTablePluginBodyPrefix('&:last-child'), "var(--ds-space-100, 8px)");
+var ColumnPickerHeader = styled.th((_styled$th = {}, _defineProperty(_styled$th, "".concat(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(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'
+}), _defineProperty(_styled$th, "".concat(withTablePluginHeaderPrefix('&:last-of-type')), {
+  paddingRight: tableSidePadding
+}), _styled$th));
+var truncateStyles = css({
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+var TableCell = styled.td((_styled$td = {}, _defineProperty(_styled$td, "".concat(withTablePluginBodyPrefix()), {
+  fontSize: 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(N40, ")")),
+  borderBottom: "0.5px solid ".concat("var(--ds-border, ".concat(N40, ")")),
+  overflow: 'hidden'
+}), _defineProperty(_styled$td, "".concat(withTablePluginBodyPrefix('&:first-child')), {
+  paddingLeft: "var(--ds-space-100, 8px)"
+}), _defineProperty(_styled$td, "".concat(withTablePluginBodyPrefix('&:last-child')), {
+  borderRight: 0,
+  paddingRight: "var(--ds-space-100, 8px)"
+}), _styled$td));
 var tableContainerStyles = css({
   borderRadius: 'inherit',
   borderBottomLeftRadius: 0,
@@ -156,6 +187,19 @@ var tableStyles = css({
 var noDefaultBorderStyles = css({
   borderBottom: 0
 });
+var headerStyles = css({
+  fontSize: "var(--ds-font-size-075, 12px)",
+  fontWeight: "var(--ds-font-weight-medium, 500)"
+});
+var headingHoverEffectStyles = 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;
   invariant(typeof index === 'number');
@@ -219,6 +263,8 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
     onVisibleColumnKeysChange = _ref5.onVisibleColumnKeysChange,
     columnCustomSizes = _ref5.columnCustomSizes,
     onColumnResize = _ref5.onColumnResize,
+    wrappedColumnKeys = _ref5.wrappedColumnKeys,
+    onWrappedColumnChange = _ref5.onWrappedColumnChange,
     status = _ref5.status,
     hasNextPage = _ref5.hasNextPage,
     scrollableContainerHeight = _ref5.scrollableContainerHeight,
@@ -405,7 +451,7 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
           }).filter(function (value) {
             return value !== '';
           }).join(', ');
-          var contentComponent = stringifiedContent ? jsx(Tooltip, {
+          var contentComponent = stringifiedContent && !(wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(key)) ? jsx(Tooltip, {
             tag: TruncateTextTag,
             content: stringifiedContent,
             testId: "issues-table-cell-tooltip"
@@ -421,7 +467,7 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
         } : undefined
       };
     });
-  }, [items, visibleSortedColumns, getColumnWidth, renderItem, intl]);
+  }, [items, visibleSortedColumns, renderItem, wrappedColumnKeys, getColumnWidth, intl.formatMessage, intl.formatDate]);
   var rows = useMemo(function () {
     if (status !== 'loading') {
       return tableRows;
@@ -511,11 +557,17 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
     var heading = jsx(Tooltip, {
       content: content,
       tag: "span",
+      position: "bottom-start",
       testId: 'datasource-header-content'
-    }, jsx(Heading, {
-      level: "h200",
-      as: 'span'
+    }, jsx("span", {
+      css: headerStyles
     }, content));
+    var isHeadingOutsideButton = !isEditable || !onWrappedColumnChange;
+    if (isHeadingOutsideButton) {
+      heading = jsx("div", {
+        css: headingHoverEffectStyles
+      }, heading);
+    }
     if (isEditable) {
       var _containerRef$current3;
       var previewRows = tableRows.map(function (_ref14) {
@@ -540,7 +592,9 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
         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 jsx(TableHeading, {
@@ -550,7 +604,7 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
           shouldUseWidth: shouldUseWidth,
           width: width
         })
-      }, jsx(Flex, null, heading));
+      }, heading);
     }
   }), onVisibleColumnKeysChange && jsx(ColumnPickerHeader, null, jsx(ColumnPicker, {
     columns: hasFullSchema ? orderedColumns : [],
@@ -588,7 +642,8 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
         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/esm/ui/issue-like-table/messages.js

@@ -0,0 +1,13 @@
+import { defineMessages } from 'react-intl-next';
+export var issueLikeTableMessages = 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/esm/ui/issue-like-table/render-type/date-time/index.js

@@ -1,12 +1,10 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-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) { _defineProperty(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; }
 import React from 'react';
 import styled from '@emotion/styled';
 import { useIntl } from 'react-intl-next';
-import { FieldTextFontSize } from '../../styled';
+import { fieldTextFontSize } from '../../styled';
 export var DATETIME_TYPE_TEST_ID = 'link-datasource-render-type--datetime';
 var dateOptions = {
   month: 'short',
@@ -18,7 +16,9 @@ var timeOptions = {
   hour: '2-digit',
   minute: '2-digit'
 };
-var DateTimeWrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-size: ", ";\n"])), FieldTextFontSize);
+var DateTimeWrapper = styled.span({
+  fontSize: fieldTextFontSize
+});
 export function getFormattedDate(value) {
   var display = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'datetime';
   var formatDate = arguments.length > 2 ? arguments[2] : undefined;

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

@@ -7,7 +7,7 @@ import { HoverCard } from '@atlaskit/smart-card/hover-card';
 import LinkUrl from '@atlaskit/smart-card/link-url';
 import { N300 } from '@atlaskit/theme/colors';
 import { h300 } from '@atlaskit/theme/typography';
-import { FieldTextFontSize } from '../../styled';
+import { fieldTextFontSize } from '../../styled';
 var linkStyles = {
   key: _objectSpread(_objectSpread({}, h300()), {}, {
     color: "var(--ds-text-subtlest, ".concat(N300, ")"),
@@ -32,7 +32,7 @@ var LinkRenderType = function LinkRenderType(_ref) {
     }, /*#__PURE__*/React.createElement(LinkUrl, {
       href: url,
       style: _objectSpread(_objectSpread({}, linkStyle), {}, {
-        fontSize: FieldTextFontSize
+        fontSize: fieldTextFontSize
       }),
       "data-testid": testId,
       target: "_blank"

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

@@ -8,9 +8,6 @@ import { css, jsx } from '@emotion/react';
 import { defaultSchema } from '@atlaskit/adf-schema/schema-default';
 import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 var rootStyles = css({
-  whiteSpace: 'nowrap',
-  textOverflow: 'ellipsis',
-  overflow: 'hidden',
   position: 'relative',
   display: 'block'
 });

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

@@ -1,10 +1,10 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 import React from 'react';
 import styled from '@emotion/styled';
-import { FieldTextFontSize } from '../../styled';
+import { fieldTextFontSize } from '../../styled';
 export var TEXT_TYPE_TEST_ID = 'link-datasource-render-type--text';
-var TextWrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-size: ", ";\n"])), FieldTextFontSize);
+var TextWrapper = styled.span({
+  fontSize: fieldTextFontSize
+});
 var TextRenderType = function TextRenderType(_ref) {
   var text = _ref.text,
     _ref$testId = _ref.testId,

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

@@ -1,6 +1,4 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 /** @jsx jsx */
 import React, { useState } from 'react';
 import { jsx } from '@emotion/react';
@@ -10,12 +8,12 @@ import Avatar from '@atlaskit/avatar';
 import AvatarGroup from '@atlaskit/avatar-group';
 import { Box, xcss } from '@atlaskit/primitives';
 import { WidthObserver } from '@atlaskit/width-detector';
-import { FieldTextFontSize } from '../../styled';
+import { fieldTextFontSize } from '../../styled';
 import { userTypeMessages } from './messages';
 var userWrapperStyles = xcss({
   display: 'flex',
   alignItems: 'center',
-  fontSize: "".concat(FieldTextFontSize, "px")
+  fontSize: "".concat(fieldTextFontSize, "px")
 });
 var avatarWrapperStyles = xcss({
   marginRight: '5px'
@@ -23,7 +21,11 @@ var avatarWrapperStyles = xcss({
 var widthObserverWrapperStyles = xcss({
   position: 'relative'
 });
-var AvatarGroupWrapperStyles = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ul {\n    padding-left: 0px !important;\n  }\n"])));
+var AvatarGroupWrapperStyles = styled.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