@atlaskit/link-datasource 1.22.8 → 1.23.0

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

@@ -4,14 +4,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withTablePluginPrefix = exports.withTablePluginHeaderPrefix = exports.withTablePluginBodyPrefix = exports.TableHeading = exports.Table = exports.ScrollableContainerHeight = exports.FieldTextFontSize = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+exports.withTablePluginPrefix = exports.withTablePluginHeaderPrefix = exports.withTablePluginBodyPrefix = exports.fieldTextFontSize = exports.TableHeading = exports.Table = exports.ScrollableContainerHeight = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _colors = require("@atlaskit/theme/colors");
-var _templateObject, _templateObject2;
+var _styled$th;
 var ScrollableContainerHeight = exports.ScrollableContainerHeight = 590;
-var FieldTextFontSize = exports.FieldTextFontSize = '14px';
-var Table = exports.Table = _styled.default.table(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n"])));
+var fieldTextFontSize = exports.fieldTextFontSize = "var(--ds-font-size-100, 14px)";
+var Table = exports.Table = _styled.default.table({
+  width: '100%'
+});
 var lineHeight = "var(--ds-font-lineHeight-300, 24px)";
 var verticalPadding = "var(--ds-space-025, 2px)";
 
@@ -27,4 +29,30 @@ var withTablePluginPrefix = exports.withTablePluginPrefix = function withTablePl
 };
 var withTablePluginHeaderPrefix = exports.withTablePluginHeaderPrefix = withTablePluginPrefix.bind(null, 'thead');
 var withTablePluginBodyPrefix = exports.withTablePluginBodyPrefix = withTablePluginPrefix.bind(null, 'tbody');
-var TableHeading = exports.TableHeading = _styled.default.th(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", " {\n    border: 0;\n    position: relative;\n\n    /* This makes resizing work with out jumping due to padding + changes overall width for same default values. */\n    box-sizing: border-box;\n\n    line-height: ", ";\n    padding: ", " ", ";\n    border-right: 0.5px solid ", ";\n    border-bottom: 2px solid ", ";\n\n    /*\n      lineHeight * 2 -> Max height of two lined header\n      verticalPadding * 2 -> padding for this component itself\n      verticalPadding * 2 -> padding inside span (--container)\n      2px -> Bottom border\n      Last two terms are needed because of border-box box sizing.\n    */\n    height: calc(", " * 2 + ", " * 4 + 2px);\n    vertical-align: bottom;\n    background-color: ", ";\n  }\n\n  ", " {\n    border-right: 0;\n  }\n\n  ", " {\n    padding-left: ", ";\n  }\n\n  ", " {\n    border-right: 0;\n  }\n\n  & [data-testid='datasource-header-content--container'] {\n    width: 100%;\n    padding: ", " ", ";\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    white-space: normal;\n    overflow: hidden;\n    word-wrap: break-word;\n\n    &:hover {\n      background: ", ";\n      border-radius: 3px;\n    }\n  }\n"])), withTablePluginHeaderPrefix(), lineHeight, verticalPadding, "var(--ds-space-050, 4px)", "var(--ds-border, ".concat(_colors.N40, ")"), "var(--ds-border, ".concat(_colors.N40, ")"), lineHeight, verticalPadding, "var(--ds-elevation-surface-current, #FFF)", withTablePluginPrefix('', 'thead.has-column-picker &:nth-last-of-type(2)'), withTablePluginHeaderPrefix('&:first-child'), "var(--ds-space-050, 4px)", withTablePluginHeaderPrefix('&:last-child'), verticalPadding, "var(--ds-space-050, 4px)", "var(--ds-background-input-hovered, #F7F8F9)");
+var TableHeading = exports.TableHeading = _styled.default.th((_styled$th = {}, (0, _defineProperty2.default)(_styled$th, "".concat(withTablePluginHeaderPrefix()), {
+  border: 0,
+  position: 'relative',
+  boxSizing: 'border-box',
+  lineHeight: lineHeight,
+  padding: "".concat(verticalPadding, " ", "var(--ds-space-050, 4px)"),
+  borderRight: "0.5px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")")),
+  borderBottom: "2px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")")),
+  height: "calc(".concat(lineHeight, " * 2 + ").concat(verticalPadding, " * 4 + 2px)"),
+  verticalAlign: 'bottom',
+  backgroundColor: "var(--ds-elevation-surface-current, #FFF)"
+}), (0, _defineProperty2.default)(_styled$th, "".concat(withTablePluginPrefix('', 'thead.has-column-picker &:nth-last-of-type(2)')), {
+  borderRight: 0
+}), (0, _defineProperty2.default)(_styled$th, "".concat(withTablePluginHeaderPrefix('&:first-child')), {
+  paddingLeft: "var(--ds-space-050, 4px)"
+}), (0, _defineProperty2.default)(_styled$th, "".concat(withTablePluginHeaderPrefix('&:last-child')), {
+  borderRight: 0
+}), (0, _defineProperty2.default)(_styled$th, "& [data-testid='datasource-header-content--container']", {
+  width: '100%',
+  padding: "".concat(verticalPadding, " ", "var(--ds-space-050, 4px)"),
+  display: '-webkit-box',
+  WebkitLineClamp: 2,
+  WebkitBoxOrient: 'vertical',
+  whiteSpace: 'normal',
+  overflow: 'hidden',
+  wordWrap: 'break-word'
+}), _styled$th));

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

@@ -30,7 +30,9 @@ const DatasourceTableViewWithoutAnalytics = ({
   onVisibleColumnKeysChange,
   url,
   columnCustomSizes,
-  onColumnResize
+  onColumnResize,
+  wrappedColumnKeys,
+  onWrappedColumnChange
 }) => {
   const {
     reset,
@@ -161,6 +163,8 @@ const DatasourceTableViewWithoutAnalytics = ({
     onVisibleColumnKeysChange: onVisibleColumnKeysChange,
     columnCustomSizes: columnCustomSizes,
     onColumnResize: onColumnResize,
+    wrappedColumnKeys: wrappedColumnKeys,
+    onWrappedColumnChange: onWrappedColumnChange,
     scrollableContainerHeight: ScrollableContainerHeight,
     parentContainerRenderInstanceId: tableRenderInstanceId,
     extensionKey: extensionKey

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

@@ -0,0 +1,42 @@
+import React from 'react';
+export const GlyphPlaceholder = props => /*#__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 const WrapTextIcon = () => /*#__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 const UnwrapTextIcon = () => /*#__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/es2019/ui/issue-like-table/drag-column-preview.js

@@ -2,6 +2,7 @@
 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';
 const maxWidth = '200px';
 const firstLastChildOverride = `
@@ -10,28 +11,28 @@ const firstLastChildOverride = `
     padding-right: ${"var(--ds-space-100, 8px)"};
   }
 `;
-const TablePreviewHeading = styled(TableHeading)`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  background: ${"var(--ds-background-disabled, #091E4224)"};
-  color: ${"var(--ds-text-disabled, #091E424F)"};
-  max-width: ${maxWidth};
-  ${firstLastChildOverride}
-`;
-const TablePreviewCell = styled.td`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: ${maxWidth};
-  padding: ${"var(--ds-space-050, 4px)"} ${"var(--ds-space-100, 8px)"};
-  ${firstLastChildOverride}
-`;
+const TablePreviewHeading = styled(TableHeading)({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  background: "var(--ds-background-disabled, #091E4224)",
+  maxWidth: maxWidth
+}, firstLastChildOverride);
+const TablePreviewCell = styled.td({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  maxWidth: maxWidth,
+  padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-100, 8px)"}`,
+  boxSizing: 'border-box',
+  borderBottom: `0.5px solid ${`var(--ds-border, ${N40})`}`,
+  height: '30px'
+}, firstLastChildOverride);
 const 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
 });
 export const DragColumnPreview = ({

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

@@ -1,8 +1,15 @@
+import _extends from "@babel/runtime/helpers/extends";
 /** @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';
@@ -11,13 +18,21 @@ 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';
-const verticallyAlignedStyles = css({
-  display: 'flex',
-  alignItems: 'center',
-  whiteSpace: 'nowrap'
-});
+const DropdownParent = styled.div`
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  & button {
+    text-align: left; /* By default button center in the middle without props to control it */
+    height: auto; /* By default button is not happy with tall (up to lines in our case) content */
+    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.  */
+    padding-right: 0px;
+  }
+`;
 const dropTargetStyles = css({
   position: 'absolute',
   top: 0,
@@ -75,7 +90,9 @@ export const DraggableTableHeading = ({
   dndPreviewHeight,
   dragPreview,
   width,
-  onWidthChange
+  onWidthChange,
+  isWrapped,
+  onIsWrappedChange
 }) => {
   const mainHeaderCellRef = useRef(null);
   const columnResizeHandleRef = useRef(null);
@@ -253,6 +270,30 @@ export const DraggableTableHeading = ({
       }
     });
   }, [id, index, onWidthChange, state, tableId, width]);
+  const [buttonHovered, setButtonHovered] = useState(false);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const isWideEnoughToHaveChevron = width > 76;
+  const shouldShowTriggerIcon = (buttonHovered || isDropdownOpen) && isWideEnoughToHaveChevron;
+  const triggerIcon = useMemo(() => shouldShowTriggerIcon ? isDropdownOpen ? ChevronUp : ChevronDown : isWideEnoughToHaveChevron ? GlyphPlaceholder : undefined, [shouldShowTriggerIcon, isDropdownOpen, isWideEnoughToHaveChevron]);
+  const getTriggerButton = useCallback(({
+    triggerRef,
+    ...props
+  }) => {
+    return jsx(Button, _extends({}, props, {
+      testId: `${id}-column-dropdown`,
+      shouldFitContainer: true,
+      iconAfter: triggerIcon,
+      ref: triggerRef,
+      appearance: "subtle",
+      spacing: "compact",
+      onMouseEnter: () => setButtonHovered(true),
+      onMouseLeave: () => setButtonHovered(false)
+    }), children);
+  }, [children, id, triggerIcon]);
+  const onDropdownOpenChange = useCallback(({
+    isOpen
+  }) => setIsDropdownOpen(isOpen), []);
+  const toggleWrap = useCallback(() => onIsWrappedChange && onIsWrappedChange(!(isWrapped || false)), [isWrapped, onIsWrappedChange]);
   return jsx(TableHeading, {
     ref: mainHeaderCellRef,
     "data-testid": `${id}-column-heading`,
@@ -270,7 +311,15 @@ export const DraggableTableHeading = ({
       height: `${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: `${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: {
@@ -279,7 +328,5 @@ export const DraggableTableHeading = ({
     "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/es2019/ui/issue-like-table/index.js

@@ -5,14 +5,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';
@@ -22,7 +20,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';
 const tableSidePadding = "var(--ds-space-200, 16px)";
@@ -37,58 +35,49 @@ const truncateTextStyles = css({
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
-const ColumnPickerHeader = styled.th`
-  ${withTablePluginHeaderPrefix()} {
-    box-sizing: content-box;
-    border: 0;
-
-    width: 56px;
-    z-index: 10;
-    position: sticky;
-    right: calc(-1 * ${tableSidePadding});
-    background-color: ${"var(--ds-elevation-surface-current, #FFF)"};
-    border-bottom: 2px solid ${`var(--ds-border, ${N40})`}; /* It is required to have solid (not half-transparent) color because of this gradient business below */
-
-    padding-right: ${"var(--ds-space-100, 4px)"};
-
-    background: linear-gradient(
-      90deg,
-      rgba(255, 255, 255, 0) 0%,
-      ${"var(--ds-elevation-surface-current, #FFF)"} 10%
-    );
-    vertical-align: middle; /* Keeps dropdown button in the middle */
-    text-align: right; /* In case when TH itself is bigger we want to keep picker at the right side */
+const ColumnPickerHeader = styled.th({
+  [`${withTablePluginHeaderPrefix()}`]: {
+    boxSizing: 'content-box',
+    border: 0,
+    width: '56px',
+    zIndex: 10,
+    position: 'sticky',
+    right: `calc(-1 * ${tableSidePadding})`,
+    backgroundColor: "var(--ds-elevation-surface-current, #FFF)",
+    borderBottom: `2px solid ${`var(--ds-border, ${N40})`}`,
+    paddingRight: "var(--ds-space-100, 4px)",
+    background: `linear-gradient( 90deg, rgba(255, 255, 255, 0) 0%, ${"var(--ds-elevation-surface-current, #FFF)"} 10% )`,
+    verticalAlign: 'middle',
+    textAlign: 'right'
+  },
+  [`${withTablePluginHeaderPrefix('&:last-of-type')}`]: {
+    paddingRight: tableSidePadding
   }
-
-  ${withTablePluginHeaderPrefix('&:last-of-type')} {
-    padding-right: ${tableSidePadding};
-  }
-`;
-const TableCell = styled.td`
-  ${withTablePluginBodyPrefix()} {
-    /* First section here is to override things editor table plugin css defines */
-    padding: ${"var(--ds-space-050, 4px)"} ${"var(--ds-space-100, 8px)"};
-    border: 0;
-    min-width: auto;
-    vertical-align: inherit;
-    box-sizing: border-box;
-
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    border-right: 0.5px solid ${`var(--ds-border, ${N40})`};
-    border-bottom: 0.5px solid ${`var(--ds-border, ${N40})`};
-  }
-
-  ${withTablePluginBodyPrefix('&:first-child')} {
-    padding-left: ${"var(--ds-space-100, 8px)"};
-  }
-
-  ${withTablePluginBodyPrefix('&:last-child')} {
-    border-right: 0;
-    padding-right: ${"var(--ds-space-100, 8px)"};
+});
+const truncateStyles = css({
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+const TableCell = styled.td({
+  [`${withTablePluginBodyPrefix()}`]: {
+    fontSize: fieldTextFontSize,
+    padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-100, 8px)"}`,
+    border: 0,
+    minWidth: 'auto',
+    verticalAlign: 'inherit',
+    boxSizing: 'border-box',
+    borderRight: `0.5px solid ${`var(--ds-border, ${N40})`}`,
+    borderBottom: `0.5px solid ${`var(--ds-border, ${N40})`}`,
+    overflow: 'hidden'
+  },
+  [`${withTablePluginBodyPrefix('&:first-child')}`]: {
+    paddingLeft: "var(--ds-space-100, 8px)"
+  },
+  [`${withTablePluginBodyPrefix('&:last-child')}`]: {
+    borderRight: 0,
+    paddingRight: "var(--ds-space-100, 8px)"
   }
-`;
+});
 const tableContainerStyles = css({
   borderRadius: 'inherit',
   borderBottomLeftRadius: 0,
@@ -233,6 +222,19 @@ const tableStyles = css({
 const noDefaultBorderStyles = css({
   borderBottom: 0
 });
+const headerStyles = css({
+  fontSize: "var(--ds-font-size-075, 12px)",
+  fontWeight: "var(--ds-font-weight-medium, 500)"
+});
+const 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) {
   const {
     index
@@ -293,6 +295,8 @@ export const IssueLikeDataTableView = ({
   onVisibleColumnKeysChange,
   columnCustomSizes,
   onColumnResize,
+  wrappedColumnKeys,
+  onWrappedColumnChange,
   status,
   hasNextPage,
   scrollableContainerHeight,
@@ -452,7 +456,7 @@ export const IssueLikeDataTableView = ({
         type,
         value
       }, intl.formatMessage, intl.formatDate)).filter(value => value !== '').join(', ');
-      const contentComponent = stringifiedContent ? jsx(Tooltip, {
+      const contentComponent = stringifiedContent && !(wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(key)) ? jsx(Tooltip, {
         tag: TruncateTextTag,
         content: stringifiedContent,
         testId: "issues-table-cell-tooltip"
@@ -464,7 +468,7 @@ export const IssueLikeDataTableView = ({
       };
     }),
     ref: rowIndex === items.length - 1 ? el => setLastRowElement(el) : undefined
-  })), [items, visibleSortedColumns, getColumnWidth, renderItem, intl]);
+  })), [items, visibleSortedColumns, renderItem, wrappedColumnKeys, getColumnWidth, intl.formatMessage, intl.formatDate]);
   const rows = useMemo(() => {
     if (status !== 'loading') {
       return tableRows;
@@ -536,14 +540,20 @@ export const IssueLikeDataTableView = ({
     content,
     width
   }, cellIndex) => {
-    const heading = jsx(Tooltip, {
+    let 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));
+    const isHeadingOutsideButton = !isEditable || !onWrappedColumnChange;
+    if (isHeadingOutsideButton) {
+      heading = jsx("div", {
+        css: headingHoverEffectStyles
+      }, heading);
+    }
     if (isEditable) {
       var _containerRef$current3;
       const previewRows = tableRows.map(({
@@ -568,7 +578,9 @@ export const IssueLikeDataTableView = ({
         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, {
@@ -578,7 +590,7 @@ export const IssueLikeDataTableView = ({
           shouldUseWidth,
           width
         })
-      }, jsx(Flex, null, heading));
+      }, heading);
     }
   }), onVisibleColumnKeysChange && jsx(ColumnPickerHeader, null, jsx(ColumnPicker, {
     columns: hasFullSchema ? orderedColumns : [],
@@ -618,7 +630,8 @@ export const IssueLikeDataTableView = ({
       key: cellKey,
       "data-testid": testId && `${testId}--cell-${cellIndex}`,
       colSpan: isEditable && isLastCell ? 2 : undefined,
-      style: loadingRowStyle
+      style: loadingRowStyle,
+      css: [wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(cellKey) ? null : truncateStyles]
     }, content);
   }))))));
 };

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

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import { useIntl } from 'react-intl-next';
-import { FieldTextFontSize } from '../../styled';
+import { fieldTextFontSize } from '../../styled';
 export const DATETIME_TYPE_TEST_ID = 'link-datasource-render-type--datetime';
 const dateOptions = {
   month: 'short',
@@ -13,9 +13,9 @@ const timeOptions = {
   hour: '2-digit',
   minute: '2-digit'
 };
-const DateTimeWrapper = styled.span`
-  font-size: ${FieldTextFontSize};
-`;
+const DateTimeWrapper = styled.span({
+  fontSize: fieldTextFontSize
+});
 export function getFormattedDate(value, display = 'datetime', formatDate) {
   /* In some cases we get a value of `2023-12-20` which when parsed by JS assumes meantime timezone, causing the date
     to be one day off in some timezones. We want it to display the date without converting timezones and a solution

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

@@ -4,7 +4,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';
 const linkStyles = {
   key: {
     ...h300(),
@@ -30,7 +30,7 @@ const LinkRenderType = ({
     href: url,
     style: {
       ...linkStyle,
-      fontSize: FieldTextFontSize
+      fontSize: fieldTextFontSize
     },
     "data-testid": testId,
     target: "_blank"

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

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

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

@@ -1,10 +1,10 @@
 import React from 'react';
 import styled from '@emotion/styled';
-import { FieldTextFontSize } from '../../styled';
+import { fieldTextFontSize } from '../../styled';
 export const TEXT_TYPE_TEST_ID = 'link-datasource-render-type--text';
-const TextWrapper = styled.span`
-  font-size: ${FieldTextFontSize};
-`;
+const TextWrapper = styled.span({
+  fontSize: fieldTextFontSize
+});
 const TextRenderType = ({
   text,
   testId = TEXT_TYPE_TEST_ID

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

@@ -7,12 +7,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';
 const userWrapperStyles = xcss({
   display: 'flex',
   alignItems: 'center',
-  fontSize: `${FieldTextFontSize}px`
+  fontSize: `${fieldTextFontSize}px`
 });
 const avatarWrapperStyles = xcss({
   marginRight: '5px'
@@ -20,11 +20,11 @@ const avatarWrapperStyles = xcss({
 const widthObserverWrapperStyles = xcss({
   position: 'relative'
 });
-const AvatarGroupWrapperStyles = styled.div`
-  ul {
-    padding-left: 0px !important;
+const AvatarGroupWrapperStyles = styled.div({
+  ul: {
+    paddingLeft: '0px !important'
   }
-`;
+});
 const getMaxUserCount = (userCount, availableWidth) => {
   if (availableWidth <= 28) {
     // If width is less than or equal to 28px, we should only display the user count