@atlaskit/link-datasource 1.19.37 → 1.19.38

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/link-datasource
 
+## 1.19.38
+
+### Patch Changes
+
+- [#63865](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/63865) [`3626f73af8aa`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3626f73af8aa) - added tooltips to datasource table items
+- Updated dependencies
+
 ## 1.19.37
 
 ### Patch Changes

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

@@ -9,11 +9,13 @@ 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 _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");
@@ -44,6 +46,11 @@ var tableHeadStyles = (0, _react2.css)({
   top: 0,
   zIndex: _zindex.stickyTableHeadersIndex
 });
+var truncateTextStyles = (0, _react2.css)({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
 var ColumnPickerHeader = _styled.default.th(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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  &:last-of-type {\n    padding-right: ", ";\n  }\n  text-align: right; /* In case when TH itself is bigger we want to keep picker at the right side */\n"])), tableSidePadding, "var(--ds-elevation-surface-current, #FFF)", "var(--ds-border, ".concat(_colors.N40, ")"), "var(--ds-space-100, 4px)", "var(--ds-elevation-surface-current, #FFF)", tableSidePadding);
 var truncatedCellStyles = (0, _react2.css)({
   overflow: 'hidden',
@@ -213,6 +220,13 @@ function getDefaultColumnWidth(key, type) {
       return DEFAULT_WIDTH;
   }
 }
+var TruncateTextTag = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  return (0, _react2.jsx)("span", (0, _extends2.default)({
+    css: truncateTextStyles
+  }, props, {
+    ref: ref
+  }), props.children);
+});
 var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
   var testId = _ref5.testId,
     onNextPage = _ref5.onNextPage,
@@ -233,6 +247,7 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
   var tableId = (0, _react.useMemo)(function () {
     return Symbol('unique-id');
   }, []);
+  var intl = (0, _reactIntlNext.useIntl)();
   var tableHeaderRowRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -398,15 +413,29 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
             type = _ref11.type;
           var value = ((_newRowData$key = newRowData[key]) === null || _newRowData$key === void 0 ? void 0 : _newRowData$key.data) || newRowData[key];
           var values = Array.isArray(value) ? value : [value];
-          var content = values.map(function (value) {
+          var renderedValues = values.map(function (value) {
             return renderItem({
               type: type,
               value: value
             });
           });
+          var stringifiedContent = values.map(function (value) {
+            return (0, _renderType.stringifyType)({
+              type: type,
+              value: value
+            }, intl.formatMessage, intl.formatDate);
+          }).filter(function (value) {
+            return value !== '';
+          }).join(', ');
+          var content = renderedValues.length === 1 ? renderedValues[0] : renderedValues;
+          var contentComponent = stringifiedContent ? (0, _react2.jsx)(_tooltip.default, {
+            tag: TruncateTextTag,
+            content: stringifiedContent,
+            testId: "issues-table-cell-tooltip"
+          }, content) : content;
           return {
             key: key,
-            content: content.length === 1 ? content[0] : content,
+            content: contentComponent,
             width: getColumnWidth(key, type)
           };
         }),
@@ -415,7 +444,7 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
         } : undefined
       };
     });
-  }, [items, visibleSortedColumns, getColumnWidth, renderItem]);
+  }, [items, visibleSortedColumns, getColumnWidth, renderItem, intl]);
   var rows = (0, _react.useMemo)(function () {
     if (status !== 'loading') {
       return tableRows;

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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"));
@@ -26,13 +27,9 @@ var timeOptions = {
   minute: '2-digit'
 };
 var DateTimeWrapper = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  font-size: ", ";\n"])), _styled2.FieldTextFontSize);
-var DateTimeRenderType = function DateTimeRenderType(_ref) {
-  var value = _ref.value,
-    _ref$testId = _ref.testId,
-    testId = _ref$testId === void 0 ? DATETIME_TYPE_TEST_ID : _ref$testId,
-    _ref$display = _ref.display,
-    display = _ref$display === void 0 ? 'datetime' : _ref$display;
-  var intl = (0, _reactIntlNext.useIntl)();
+function getFormattedDate(value) {
+  var display = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'datetime';
+  var formatDate = arguments.length > 2 ? arguments[2] : undefined;
   /* 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
    is to replace the hyphens with slashes. So it should be 20th Dec regardless of the timezone in this case.
@@ -41,14 +38,26 @@ var DateTimeRenderType = function DateTimeRenderType(_ref) {
   var dateValue = /^\d{4}-\d{2}-\d{2}$/.exec(value) ? value.replace(/-/g, '/') : value;
   var date = new Date(dateValue);
   if (!value || isNaN(date.getTime())) {
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+    return '';
   }
   var options = {
     date: dateOptions,
     time: timeOptions,
     datetime: _objectSpread(_objectSpread({}, dateOptions), timeOptions)
   };
-  var formattedString = intl.formatDate(date, options[display] || options['date']);
+  return formatDate(date, options[display] || options['date']);
+}
+var DateTimeRenderType = function DateTimeRenderType(_ref) {
+  var value = _ref.value,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? DATETIME_TYPE_TEST_ID : _ref$testId,
+    _ref$display = _ref.display,
+    display = _ref$display === void 0 ? 'datetime' : _ref$display;
+  var intl = (0, _reactIntlNext.useIntl)();
+  var formattedString = getFormattedDate(value, display, intl.formatDate);
+  if (formattedString === '') {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+  }
   return /*#__PURE__*/_react.default.createElement(DateTimeWrapper, {
     "data-testid": testId
   }, formattedString);

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

@@ -1,22 +1,57 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.fallbackRenderType = void 0;
+exports.stringifyType = exports.fallbackRenderType = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _boolean = _interopRequireDefault(require("./boolean"));
-var _dateTime = _interopRequireDefault(require("./date-time"));
+var _dateTime = _interopRequireWildcard(require("./date-time"));
 var _icon = _interopRequireDefault(require("./icon"));
 var _link = _interopRequireDefault(require("./link"));
 var _number = _interopRequireDefault(require("./number"));
-var _richtext = _interopRequireDefault(require("./richtext"));
+var _richtext = _interopRequireWildcard(require("./richtext"));
 var _status = _interopRequireDefault(require("./status"));
 var _tag = _interopRequireDefault(require("./tag"));
 var _text = _interopRequireDefault(require("./text"));
 var _user = _interopRequireDefault(require("./user"));
+var _messages = require("./user/messages");
+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; }
+var stringifyType = exports.stringifyType = function stringifyType(_ref, formatMessage, formatDate) {
+  var type = _ref.type,
+    value = _ref.value;
+  switch (type) {
+    case 'boolean':
+    case 'number':
+      return (value === null || value === void 0 ? void 0 : value.toString()) || '';
+    case 'date':
+      return (0, _dateTime.getFormattedDate)(value, 'date', formatDate);
+    case 'datetime':
+      return (0, _dateTime.getFormattedDate)(value, 'datetime', formatDate);
+    case 'time':
+      return (0, _dateTime.getFormattedDate)(value, 'time', formatDate);
+    case 'icon':
+      return (value === null || value === void 0 ? void 0 : value.label) || '';
+    case 'status':
+      return (value === null || value === void 0 ? void 0 : value.text.toString()) || '';
+    case 'string':
+      return value;
+    case 'tag':
+      return (value === null || value === void 0 ? void 0 : value.text) || '';
+    case 'user':
+      return (value === null || value === void 0 ? void 0 : value.displayName) || formatMessage(_messages.userTypeMessages.userDefaultdisplayNameValue);
+    case 'richtext':
+      var adfPlainText = (0, _richtext.parseRichText)(value);
+      return adfPlainText || '';
+    case 'link':
+    default:
+      return '';
+  }
+};
 var fallbackRenderType = exports.fallbackRenderType = function fallbackRenderType(item) {
   var _item$value, _item$value2, _item$value3;
   switch (item.type) {

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.parseRichText = exports.default = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
@@ -20,22 +20,25 @@ var rootStyles = (0, _react2.css)({
   position: 'relative',
   display: 'block'
 });
+var parseRichText = exports.parseRichText = function parseRichText(value) {
+  try {
+    if (value.type === 'adf') {
+      var adf = JSON.parse(value.text);
+      return _model.Node.fromJSON(_schemaDefault.defaultSchema, _objectSpread(_objectSpread({}, adf), {}, {
+        content: (0, _toConsumableArray2.default)(adf.content.slice(0, 2))
+      })).textContent;
+    }
+    return null;
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error('error parsing adf', e);
+    return null;
+  }
+};
 var RichTextType = function RichTextType(_ref) {
   var value = _ref.value;
   var adfPlainText = (0, _react.useMemo)(function () {
-    try {
-      if (value.type === 'adf') {
-        var adf = JSON.parse(value.text);
-        return _model.Node.fromJSON(_schemaDefault.defaultSchema, _objectSpread(_objectSpread({}, adf), {}, {
-          content: (0, _toConsumableArray2.default)(adf.content.slice(0, 2))
-        })).textContent;
-      }
-      return null;
-    } catch (e) {
-      // eslint-disable-next-line no-console
-      console.error('error parsing adf', e);
-      return null;
-    }
+    return parseRichText(value);
   }, [value]);
   if (adfPlainText) {
     return (0, _react2.jsx)("div", {

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

@@ -1,7 +1,9 @@
+import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 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';
@@ -18,7 +20,7 @@ import { ColumnPicker } from './column-picker';
 import { DragColumnPreview } from './drag-column-preview';
 import { DraggableTableHeading } from './draggable-table-heading';
 import TableEmptyState from './empty-state';
-import { fallbackRenderType } from './render-type';
+import { fallbackRenderType, stringifyType } from './render-type';
 import { Table, TableHeading } from './styled';
 import { useIsOnScreen } from './useIsOnScreen';
 const tableSidePadding = "var(--ds-space-200, 16px)";
@@ -28,6 +30,11 @@ const tableHeadStyles = css({
   top: 0,
   zIndex: stickyTableHeadersIndex
 });
+const truncateTextStyles = css({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
 const ColumnPickerHeader = styled.th`
   width: 56px;
   z-index: 10;
@@ -251,6 +258,13 @@ function getDefaultColumnWidth(key, type) {
       return DEFAULT_WIDTH;
   }
 }
+const TruncateTextTag = /*#__PURE__*/forwardRef((props, ref) => {
+  return jsx("span", _extends({
+    css: truncateTextStyles
+  }, props, {
+    ref: ref
+  }), props.children);
+});
 export const IssueLikeDataTableView = ({
   testId,
   onNextPage,
@@ -269,6 +283,7 @@ export const IssueLikeDataTableView = ({
   extensionKey
 }) => {
   const tableId = useMemo(() => Symbol('unique-id'), []);
+  const intl = useIntl();
   const tableHeaderRowRef = useRef(null);
   const [lastRowElement, setLastRowElement] = useState(null);
   const [hasFullSchema, setHasFullSchema] = useState(false);
@@ -412,18 +427,28 @@ export const IssueLikeDataTableView = ({
       var _newRowData$key;
       const value = ((_newRowData$key = newRowData[key]) === null || _newRowData$key === void 0 ? void 0 : _newRowData$key.data) || newRowData[key];
       const values = Array.isArray(value) ? value : [value];
-      const content = values.map(value => renderItem({
+      const renderedValues = values.map(value => renderItem({
         type,
         value
       }));
+      const stringifiedContent = values.map(value => stringifyType({
+        type,
+        value
+      }, intl.formatMessage, intl.formatDate)).filter(value => value !== '').join(', ');
+      const content = renderedValues.length === 1 ? renderedValues[0] : renderedValues;
+      const contentComponent = stringifiedContent ? jsx(Tooltip, {
+        tag: TruncateTextTag,
+        content: stringifiedContent,
+        testId: "issues-table-cell-tooltip"
+      }, content) : content;
       return {
         key,
-        content: content.length === 1 ? content[0] : content,
+        content: contentComponent,
         width: getColumnWidth(key, type)
       };
     }),
     ref: rowIndex === items.length - 1 ? el => setLastRowElement(el) : undefined
-  })), [items, visibleSortedColumns, getColumnWidth, renderItem]);
+  })), [items, visibleSortedColumns, getColumnWidth, renderItem, intl]);
   const rows = useMemo(() => {
     if (status !== 'loading') {
       return tableRows;

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

@@ -16,12 +16,7 @@ const timeOptions = {
 const DateTimeWrapper = styled.span`
   font-size: ${FieldTextFontSize};
 `;
-const DateTimeRenderType = ({
-  value,
-  testId = DATETIME_TYPE_TEST_ID,
-  display = 'datetime'
-}) => {
-  const intl = useIntl();
+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
    is to replace the hyphens with slashes. So it should be 20th Dec regardless of the timezone in this case.
@@ -30,7 +25,7 @@ const DateTimeRenderType = ({
   const dateValue = /^\d{4}-\d{2}-\d{2}$/.exec(value) ? value.replace(/-/g, '/') : value;
   const date = new Date(dateValue);
   if (!value || isNaN(date.getTime())) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null);
+    return '';
   }
   const options = {
     date: dateOptions,
@@ -40,7 +35,18 @@ const DateTimeRenderType = ({
       ...timeOptions
     }
   };
-  const formattedString = intl.formatDate(date, options[display] || options['date']);
+  return formatDate(date, options[display] || options['date']);
+}
+const DateTimeRenderType = ({
+  value,
+  testId = DATETIME_TYPE_TEST_ID,
+  display = 'datetime'
+}) => {
+  const intl = useIntl();
+  const formattedString = getFormattedDate(value, display, intl.formatDate);
+  if (formattedString === '') {
+    return /*#__PURE__*/React.createElement(React.Fragment, null);
+  }
   return /*#__PURE__*/React.createElement(DateTimeWrapper, {
     "data-testid": testId
   }, formattedString);

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

@@ -1,15 +1,48 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import BooleanRenderType from './boolean';
-import DateTimeRenderType from './date-time';
+import DateTimeRenderType, { getFormattedDate } from './date-time';
 import IconRenderType from './icon';
 import LinkRenderType from './link';
 import NumberRenderType from './number';
-import RichTextRenderType from './richtext';
+import RichTextRenderType, { parseRichText } from './richtext';
 import StatusRenderType from './status';
 import TagRenderType from './tag';
 import StringRenderType from './text';
 import UserRenderType from './user';
+import { userTypeMessages } from './user/messages';
+export const stringifyType = ({
+  type,
+  value
+}, formatMessage, formatDate) => {
+  switch (type) {
+    case 'boolean':
+    case 'number':
+      return (value === null || value === void 0 ? void 0 : value.toString()) || '';
+    case 'date':
+      return getFormattedDate(value, 'date', formatDate);
+    case 'datetime':
+      return getFormattedDate(value, 'datetime', formatDate);
+    case 'time':
+      return getFormattedDate(value, 'time', formatDate);
+    case 'icon':
+      return (value === null || value === void 0 ? void 0 : value.label) || '';
+    case 'status':
+      return (value === null || value === void 0 ? void 0 : value.text.toString()) || '';
+    case 'string':
+      return value;
+    case 'tag':
+      return (value === null || value === void 0 ? void 0 : value.text) || '';
+    case 'user':
+      return (value === null || value === void 0 ? void 0 : value.displayName) || formatMessage(userTypeMessages.userDefaultdisplayNameValue);
+    case 'richtext':
+      const adfPlainText = parseRichText(value);
+      return adfPlainText || '';
+    case 'link':
+    default:
+      return '';
+  }
+};
 export const fallbackRenderType = item => {
   var _item$value, _item$value2, _item$value3;
   switch (item.type) {

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

@@ -10,24 +10,27 @@ const rootStyles = css({
   position: 'relative',
   display: 'block'
 });
+export const parseRichText = value => {
+  try {
+    if (value.type === 'adf') {
+      const adf = JSON.parse(value.text);
+      return PMNode.fromJSON(defaultSchema, {
+        ...adf,
+        content: [...adf.content.slice(0, 2)]
+      }).textContent;
+    }
+    return null;
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error('error parsing adf', e);
+    return null;
+  }
+};
 const RichTextType = ({
   value
 }) => {
   const adfPlainText = useMemo(() => {
-    try {
-      if (value.type === 'adf') {
-        const adf = JSON.parse(value.text);
-        return PMNode.fromJSON(defaultSchema, {
-          ...adf,
-          content: [...adf.content.slice(0, 2)]
-        }).textContent;
-      }
-      return null;
-    } catch (e) {
-      // eslint-disable-next-line no-console
-      console.error('error parsing adf', e);
-      return null;
-    }
+    return parseRichText(value);
   }, [value]);
   if (adfPlainText) {
     return jsx("div", {

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

@@ -1,6 +1,7 @@
 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;
@@ -8,9 +9,10 @@ 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; }
 /** @jsx jsx */
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 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';
@@ -27,7 +29,7 @@ import { ColumnPicker } from './column-picker';
 import { DragColumnPreview } from './drag-column-preview';
 import { DraggableTableHeading } from './draggable-table-heading';
 import TableEmptyState from './empty-state';
-import { fallbackRenderType } from './render-type';
+import { fallbackRenderType, stringifyType } from './render-type';
 import { Table, TableHeading } from './styled';
 import { useIsOnScreen } from './useIsOnScreen';
 var tableSidePadding = "var(--ds-space-200, 16px)";
@@ -37,6 +39,11 @@ var tableHeadStyles = css({
   top: 0,
   zIndex: stickyTableHeadersIndex
 });
+var truncateTextStyles = css({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
 var ColumnPickerHeader = styled.th(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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  &:last-of-type {\n    padding-right: ", ";\n  }\n  text-align: right; /* In case when TH itself is bigger we want to keep picker at the right side */\n"])), tableSidePadding, "var(--ds-elevation-surface-current, #FFF)", "var(--ds-border, ".concat(N40, ")"), "var(--ds-space-100, 4px)", "var(--ds-elevation-surface-current, #FFF)", tableSidePadding);
 var truncatedCellStyles = css({
   overflow: 'hidden',
@@ -206,6 +213,13 @@ function getDefaultColumnWidth(key, type) {
       return DEFAULT_WIDTH;
   }
 }
+var TruncateTextTag = /*#__PURE__*/forwardRef(function (props, ref) {
+  return jsx("span", _extends({
+    css: truncateTextStyles
+  }, props, {
+    ref: ref
+  }), props.children);
+});
 export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
   var testId = _ref5.testId,
     onNextPage = _ref5.onNextPage,
@@ -226,6 +240,7 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
   var tableId = useMemo(function () {
     return Symbol('unique-id');
   }, []);
+  var intl = useIntl();
   var tableHeaderRowRef = useRef(null);
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
@@ -391,15 +406,29 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
             type = _ref11.type;
           var value = ((_newRowData$key = newRowData[key]) === null || _newRowData$key === void 0 ? void 0 : _newRowData$key.data) || newRowData[key];
           var values = Array.isArray(value) ? value : [value];
-          var content = values.map(function (value) {
+          var renderedValues = values.map(function (value) {
             return renderItem({
               type: type,
               value: value
             });
           });
+          var stringifiedContent = values.map(function (value) {
+            return stringifyType({
+              type: type,
+              value: value
+            }, intl.formatMessage, intl.formatDate);
+          }).filter(function (value) {
+            return value !== '';
+          }).join(', ');
+          var content = renderedValues.length === 1 ? renderedValues[0] : renderedValues;
+          var contentComponent = stringifiedContent ? jsx(Tooltip, {
+            tag: TruncateTextTag,
+            content: stringifiedContent,
+            testId: "issues-table-cell-tooltip"
+          }, content) : content;
           return {
             key: key,
-            content: content.length === 1 ? content[0] : content,
+            content: contentComponent,
             width: getColumnWidth(key, type)
           };
         }),
@@ -408,7 +437,7 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
         } : undefined
       };
     });
-  }, [items, visibleSortedColumns, getColumnWidth, renderItem]);
+  }, [items, visibleSortedColumns, getColumnWidth, renderItem, intl]);
   var rows = useMemo(function () {
     if (status !== 'loading') {
       return tableRows;

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

@@ -19,13 +19,9 @@ var timeOptions = {
   minute: '2-digit'
 };
 var DateTimeWrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-size: ", ";\n"])), FieldTextFontSize);
-var DateTimeRenderType = function DateTimeRenderType(_ref) {
-  var value = _ref.value,
-    _ref$testId = _ref.testId,
-    testId = _ref$testId === void 0 ? DATETIME_TYPE_TEST_ID : _ref$testId,
-    _ref$display = _ref.display,
-    display = _ref$display === void 0 ? 'datetime' : _ref$display;
-  var intl = useIntl();
+export function getFormattedDate(value) {
+  var display = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'datetime';
+  var formatDate = arguments.length > 2 ? arguments[2] : undefined;
   /* 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
    is to replace the hyphens with slashes. So it should be 20th Dec regardless of the timezone in this case.
@@ -34,14 +30,26 @@ var DateTimeRenderType = function DateTimeRenderType(_ref) {
   var dateValue = /^\d{4}-\d{2}-\d{2}$/.exec(value) ? value.replace(/-/g, '/') : value;
   var date = new Date(dateValue);
   if (!value || isNaN(date.getTime())) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null);
+    return '';
   }
   var options = {
     date: dateOptions,
     time: timeOptions,
     datetime: _objectSpread(_objectSpread({}, dateOptions), timeOptions)
   };
-  var formattedString = intl.formatDate(date, options[display] || options['date']);
+  return formatDate(date, options[display] || options['date']);
+}
+var DateTimeRenderType = function DateTimeRenderType(_ref) {
+  var value = _ref.value,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? DATETIME_TYPE_TEST_ID : _ref$testId,
+    _ref$display = _ref.display,
+    display = _ref$display === void 0 ? 'datetime' : _ref$display;
+  var intl = useIntl();
+  var formattedString = getFormattedDate(value, display, intl.formatDate);
+  if (formattedString === '') {
+    return /*#__PURE__*/React.createElement(React.Fragment, null);
+  }
   return /*#__PURE__*/React.createElement(DateTimeWrapper, {
     "data-testid": testId
   }, formattedString);

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

@@ -1,15 +1,47 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import BooleanRenderType from './boolean';
-import DateTimeRenderType from './date-time';
+import DateTimeRenderType, { getFormattedDate } from './date-time';
 import IconRenderType from './icon';
 import LinkRenderType from './link';
 import NumberRenderType from './number';
-import RichTextRenderType from './richtext';
+import RichTextRenderType, { parseRichText } from './richtext';
 import StatusRenderType from './status';
 import TagRenderType from './tag';
 import StringRenderType from './text';
 import UserRenderType from './user';
+import { userTypeMessages } from './user/messages';
+export var stringifyType = function stringifyType(_ref, formatMessage, formatDate) {
+  var type = _ref.type,
+    value = _ref.value;
+  switch (type) {
+    case 'boolean':
+    case 'number':
+      return (value === null || value === void 0 ? void 0 : value.toString()) || '';
+    case 'date':
+      return getFormattedDate(value, 'date', formatDate);
+    case 'datetime':
+      return getFormattedDate(value, 'datetime', formatDate);
+    case 'time':
+      return getFormattedDate(value, 'time', formatDate);
+    case 'icon':
+      return (value === null || value === void 0 ? void 0 : value.label) || '';
+    case 'status':
+      return (value === null || value === void 0 ? void 0 : value.text.toString()) || '';
+    case 'string':
+      return value;
+    case 'tag':
+      return (value === null || value === void 0 ? void 0 : value.text) || '';
+    case 'user':
+      return (value === null || value === void 0 ? void 0 : value.displayName) || formatMessage(userTypeMessages.userDefaultdisplayNameValue);
+    case 'richtext':
+      var adfPlainText = parseRichText(value);
+      return adfPlainText || '';
+    case 'link':
+    default:
+      return '';
+  }
+};
 export var fallbackRenderType = function fallbackRenderType(item) {
   var _item$value, _item$value2, _item$value3;
   switch (item.type) {

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

@@ -14,22 +14,25 @@ var rootStyles = css({
   position: 'relative',
   display: 'block'
 });
+export var parseRichText = function parseRichText(value) {
+  try {
+    if (value.type === 'adf') {
+      var adf = JSON.parse(value.text);
+      return PMNode.fromJSON(defaultSchema, _objectSpread(_objectSpread({}, adf), {}, {
+        content: _toConsumableArray(adf.content.slice(0, 2))
+      })).textContent;
+    }
+    return null;
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error('error parsing adf', e);
+    return null;
+  }
+};
 var RichTextType = function RichTextType(_ref) {
   var value = _ref.value;
   var adfPlainText = useMemo(function () {
-    try {
-      if (value.type === 'adf') {
-        var adf = JSON.parse(value.text);
-        return PMNode.fromJSON(defaultSchema, _objectSpread(_objectSpread({}, adf), {}, {
-          content: _toConsumableArray(adf.content.slice(0, 2))
-        })).textContent;
-      }
-      return null;
-    } catch (e) {
-      // eslint-disable-next-line no-console
-      console.error('error parsing adf', e);
-      return null;
-    }
+    return parseRichText(value);
   }, [value]);
   if (adfPlainText) {
     return jsx("div", {

package/dist/types/ui/issue-like-table/render-type/date-time/index.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { IntlShape } from 'react-intl-next';
 import { DateTimeType, DateType, TimeType } from '@atlaskit/linking-types';
 export interface DateProps {
     testId?: string;
@@ -6,5 +7,6 @@ export interface DateProps {
     display: (DateType | TimeType | DateTimeType)['type'];
 }
 export declare const DATETIME_TYPE_TEST_ID = "link-datasource-render-type--datetime";
+export declare function getFormattedDate(value: string, display: string | undefined, formatDate: IntlShape['formatDate']): string;
 declare const DateTimeRenderType: ({ value, testId, display, }: DateProps) => JSX.Element;
 export default DateTimeRenderType;

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

@@ -1,2 +1,5 @@
+import { IntlShape } from 'react-intl-next';
+import { DatasourceType } from '@atlaskit/linking-types';
 import { TableViewPropsRenderType } from '../types';
+export declare const stringifyType: ({ type, value }: DatasourceType, formatMessage: IntlShape['formatMessage'], formatDate: IntlShape['formatDate']) => string;
 export declare const fallbackRenderType: TableViewPropsRenderType;

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

@@ -1,5 +1,6 @@
 import { jsx } from '@emotion/react';
 import { RichText } from '@atlaskit/linking-types';
+export declare const parseRichText: (value: RichText) => string | null;
 declare const RichTextType: ({ value }: {
     value: RichText;
 }) => jsx.JSX.Element;

package/dist/types-ts4.5/ui/issue-like-table/render-type/date-time/index.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { IntlShape } from 'react-intl-next';
 import { DateTimeType, DateType, TimeType } from '@atlaskit/linking-types';
 export interface DateProps {
     testId?: string;
@@ -6,5 +7,6 @@ export interface DateProps {
     display: (DateType | TimeType | DateTimeType)['type'];
 }
 export declare const DATETIME_TYPE_TEST_ID = "link-datasource-render-type--datetime";
+export declare function getFormattedDate(value: string, display: string | undefined, formatDate: IntlShape['formatDate']): string;
 declare const DateTimeRenderType: ({ value, testId, display, }: DateProps) => JSX.Element;
 export default DateTimeRenderType;

package/dist/types-ts4.5/ui/issue-like-table/render-type/index.d.ts

@@ -1,2 +1,5 @@
+import { IntlShape } from 'react-intl-next';
+import { DatasourceType } from '@atlaskit/linking-types';
 import { TableViewPropsRenderType } from '../types';
+export declare const stringifyType: ({ type, value }: DatasourceType, formatMessage: IntlShape['formatMessage'], formatDate: IntlShape['formatDate']) => string;
 export declare const fallbackRenderType: TableViewPropsRenderType;

package/dist/types-ts4.5/ui/issue-like-table/render-type/richtext/index.d.ts

@@ -1,5 +1,6 @@
 import { jsx } from '@emotion/react';
 import { RichText } from '@atlaskit/linking-types';
+export declare const parseRichText: (value: RichText) => string | null;
 declare const RichTextType: ({ value }: {
     value: RichText;
 }) => jsx.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-datasource",
-  "version": "1.19.37",
+  "version": "1.19.38",
   "description": "UI Components to support linking platform dataset feature",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -55,14 +55,14 @@
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^0.12.0",
     "@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll": "^0.6.0",
     "@atlaskit/pragmatic-drag-and-drop-react-indicator": "^0.18.0",
-    "@atlaskit/primitives": "^1.15.0",
+    "@atlaskit/primitives": "^1.16.0",
     "@atlaskit/select": "^17.0.3",
     "@atlaskit/smart-card": "^26.43.0",
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/tag": "^12.0.0",
     "@atlaskit/textfield": "6.0.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.32.0",
+    "@atlaskit/tokens": "^1.33.0",
     "@atlaskit/tooltip": "^18.1.0",
     "@atlaskit/ufo": "^0.2.4",
     "@atlassianlabs/jql-editor": "^2.0.1",