@atlaskit/link-datasource 1.19.46 → 1.20.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/link-datasource
 
+## 1.20.0
+
+### Minor Changes
+
+- [#67414](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/67414) [`e1ad52cb07b8`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e1ad52cb07b8) - [ux] Change to display multiple avatar images of users in a group component rather than on new lines
+
 ## 1.19.46
 
 ### Patch Changes

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

@@ -400,11 +400,9 @@ 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 renderedValues = values.map(function (value) {
-            return renderItem({
-              type: type,
-              value: value
-            });
+          var renderedValues = renderItem({
+            type: type,
+            values: values
           });
           var stringifiedContent = values.map(function (value) {
             return (0, _renderType.stringifyType)({
@@ -414,12 +412,11 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
           }).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;
+          }, renderedValues) : renderedValues;
           return {
             key: key,
             content: contentComponent,

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

@@ -53,54 +53,77 @@ var stringifyType = exports.stringifyType = function stringifyType(_ref, formatM
   }
 };
 var fallbackRenderType = exports.fallbackRenderType = function fallbackRenderType(item) {
-  var _item$value, _item$value2, _item$value3;
   switch (item.type) {
     case 'boolean':
-      return /*#__PURE__*/_react.default.createElement(_boolean.default, {
-        value: item.value
+      return item.values.map(function (booleanValue) {
+        return /*#__PURE__*/_react.default.createElement(_boolean.default, {
+          value: booleanValue
+        });
       });
     case 'date':
-      return /*#__PURE__*/_react.default.createElement(_dateTime.default, {
-        value: item.value,
-        display: "date"
+      return item.values.map(function (dateValue) {
+        return /*#__PURE__*/_react.default.createElement(_dateTime.default, {
+          value: dateValue,
+          display: "date"
+        });
       });
     case 'datetime':
-      return /*#__PURE__*/_react.default.createElement(_dateTime.default, {
-        value: item.value,
-        display: "datetime"
+      return item.values.map(function (datTimeValue) {
+        return /*#__PURE__*/_react.default.createElement(_dateTime.default, {
+          value: datTimeValue,
+          display: "datetime"
+        });
       });
     case 'icon':
-      return /*#__PURE__*/_react.default.createElement(_icon.default, item.value);
+      return item.values.map(function (iconValue) {
+        return /*#__PURE__*/_react.default.createElement(_icon.default, iconValue);
+      });
     case 'link':
-      return /*#__PURE__*/_react.default.createElement(_link.default, (0, _extends2.default)({
-        key: (_item$value = item.value) === null || _item$value === void 0 ? void 0 : _item$value.url
-      }, item.value));
+      return item.values.map(function (linkValue) {
+        return /*#__PURE__*/_react.default.createElement(_link.default, (0, _extends2.default)({
+          key: linkValue === null || linkValue === void 0 ? void 0 : linkValue.url
+        }, linkValue));
+      });
     case 'number':
-      return /*#__PURE__*/_react.default.createElement(_number.default, {
-        number: item.value
+      return item.values.map(function (numberValue) {
+        return /*#__PURE__*/_react.default.createElement(_number.default, {
+          number: numberValue
+        });
       });
     case 'status':
-      return /*#__PURE__*/_react.default.createElement(_status.default, item.value);
+      return item.values.map(function (statusValue) {
+        return /*#__PURE__*/_react.default.createElement(_status.default, statusValue);
+      });
     case 'string':
-      return /*#__PURE__*/_react.default.createElement(_text.default, {
-        key: item.value,
-        text: item.value
+      return item.values.map(function (stringValue) {
+        return /*#__PURE__*/_react.default.createElement(_text.default, {
+          key: stringValue,
+          text: stringValue
+        });
       });
     case 'tag':
-      return /*#__PURE__*/_react.default.createElement(_tag.default, {
-        key: ((_item$value2 = item.value) === null || _item$value2 === void 0 ? void 0 : _item$value2.id) || ((_item$value3 = item.value) === null || _item$value3 === void 0 ? void 0 : _item$value3.text),
-        tag: item.value
+      return item.values.map(function (tagValue) {
+        return /*#__PURE__*/_react.default.createElement(_tag.default, {
+          key: (tagValue === null || tagValue === void 0 ? void 0 : tagValue.id) || (tagValue === null || tagValue === void 0 ? void 0 : tagValue.text),
+          tag: tagValue
+        });
       });
     case 'time':
-      return /*#__PURE__*/_react.default.createElement(_dateTime.default, {
-        value: item.value,
-        display: "time"
+      return item.values.map(function (timeValue) {
+        return /*#__PURE__*/_react.default.createElement(_dateTime.default, {
+          value: timeValue,
+          display: "time"
+        });
       });
     case 'user':
-      return /*#__PURE__*/_react.default.createElement(_user.default, item.value);
+      return /*#__PURE__*/_react.default.createElement(_user.default, {
+        users: item.values
+      });
     case 'richtext':
-      return /*#__PURE__*/_react.default.createElement(_richtext.default, {
-        value: item.value
+      return item.values.map(function (richValue) {
+        return /*#__PURE__*/_react.default.createElement(_richtext.default, {
+          value: richValue
+        });
       });
     default:
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);

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

@@ -1,36 +1,102 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.USER_TYPE_TEST_ID = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _reactIntlNext = require("react-intl-next");
 var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
+var _avatarGroup = _interopRequireDefault(require("@atlaskit/avatar-group"));
+var _primitives = require("@atlaskit/primitives");
+var _widthDetector = require("@atlaskit/width-detector");
 var _styled2 = require("../../styled");
 var _messages = require("./messages");
-var _templateObject, _templateObject2;
-var UserWrapper = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  font-size: ", ";\n"])), _styled2.FieldTextFontSize);
-var AvatarWrapper = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: 5px;\n"])));
+var _templateObject;
+/** @jsx jsx */
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var userWrapperStyles = (0, _primitives.xcss)({
+  display: 'flex',
+  alignItems: 'center',
+  fontSize: "".concat(_styled2.FieldTextFontSize, "px")
+});
+var avatarWrapperStyles = (0, _primitives.xcss)({
+  marginRight: '5px'
+});
+var widthObserverWrapperStyles = (0, _primitives.xcss)({
+  position: 'relative'
+});
+var AvatarGroupWrapperStyles = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /*\n  The css from editor core package affects the padding of the AvatarGroup\n  The & refers to the parent selector (.<generated className>),\n  so && becomes .<generated className>.<generated className> which increases its specificity\n  */\n  && ul {\n    padding-left: 0px;\n  }\n"])));
+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
+    return 1;
+  }
+  var defaultMaxCount = 5;
+  var usersNumFitToAvailableWidth = Math.ceil((availableWidth - 28) / 20);
+  return usersNumFitToAvailableWidth > defaultMaxCount ? defaultMaxCount : usersNumFitToAvailableWidth;
+};
 var USER_TYPE_TEST_ID = exports.USER_TYPE_TEST_ID = 'link-datasource-render-type--user';
 var UserType = function UserType(_ref) {
-  var avatarSource = _ref.avatarSource,
-    _ref$avatarSize = _ref.avatarSize,
-    avatarSize = _ref$avatarSize === void 0 ? 'small' : _ref$avatarSize,
-    displayName = _ref.displayName,
-    _ref$testId = _ref.testId,
-    testId = _ref$testId === void 0 ? USER_TYPE_TEST_ID : _ref$testId,
-    children = _ref.children;
-  return /*#__PURE__*/_react.default.createElement(UserWrapper, {
-    "data-testid": testId
-  }, /*#__PURE__*/_react.default.createElement(AvatarWrapper, null, /*#__PURE__*/_react.default.createElement(_avatar.default, {
-    appearance: "circle",
-    size: avatarSize,
-    src: avatarSource,
-    testId: "".concat(testId, "--avatar")
-  })), children || displayName || /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.userTypeMessages.userDefaultdisplayNameValue));
+  var users = _ref.users;
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    width = _useState2[0],
+    setWidth = _useState2[1];
+  if (users.length <= 1) {
+    var _ref2 = users[0] || {},
+      avatarSource = _ref2.avatarSource,
+      _ref2$avatarSize = _ref2.avatarSize,
+      avatarSize = _ref2$avatarSize === void 0 ? 'small' : _ref2$avatarSize,
+      displayName = _ref2.displayName,
+      _ref2$testId = _ref2.testId,
+      testId = _ref2$testId === void 0 ? USER_TYPE_TEST_ID : _ref2$testId,
+      children = _ref2.children;
+    return (0, _react2.jsx)(_primitives.Box, {
+      xcss: userWrapperStyles,
+      testId: testId
+    }, (0, _react2.jsx)(_primitives.Box, {
+      xcss: avatarWrapperStyles
+    }, (0, _react2.jsx)(_avatar.default, {
+      appearance: "circle",
+      size: avatarSize || 'small',
+      src: avatarSource,
+      testId: "".concat(testId, "--avatar")
+    })), children || displayName || (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.userTypeMessages.userDefaultdisplayNameValue));
+  } else {
+    var maxCount = width !== null ? getMaxUserCount(users.length, width) : 5;
+    var data = users.filter(function (user) {
+      return !!user.displayName;
+    }).map(function (_ref3) {
+      var atlassianUserId = _ref3.atlassianUserId,
+        displayName = _ref3.displayName,
+        avatarSource = _ref3.avatarSource,
+        testId = _ref3.testId;
+      return {
+        key: atlassianUserId,
+        name: displayName,
+        src: avatarSource,
+        testId: "".concat(testId, "--avatar")
+      };
+    });
+    return (0, _react2.jsx)(AvatarGroupWrapperStyles, null, (0, _react2.jsx)(_primitives.Box, {
+      xcss: widthObserverWrapperStyles
+    }, (0, _react2.jsx)(_widthDetector.WidthObserver, {
+      setWidth: setWidth
+    })), (0, _react2.jsx)(_avatarGroup.default, {
+      data: data,
+      maxCount: maxCount,
+      size: "small",
+      isTooltipDisabled: true,
+      testId: USER_TYPE_TEST_ID
+    }));
+  }
 };
 var _default = exports.default = UserType;

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

@@ -444,20 +444,19 @@ 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 renderedValues = values.map(value => renderItem({
+      const renderedValues = renderItem({
         type,
-        value
-      }));
+        values
+      });
       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;
+      }, renderedValues) : renderedValues;
       return {
         key,
         content: contentComponent,

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

@@ -44,55 +44,56 @@ export const stringifyType = ({
   }
 };
 export const fallbackRenderType = item => {
-  var _item$value, _item$value2, _item$value3;
   switch (item.type) {
     case 'boolean':
-      return /*#__PURE__*/React.createElement(BooleanRenderType, {
-        value: item.value
-      });
+      return item.values.map(booleanValue => /*#__PURE__*/React.createElement(BooleanRenderType, {
+        value: booleanValue
+      }));
     case 'date':
-      return /*#__PURE__*/React.createElement(DateTimeRenderType, {
-        value: item.value,
+      return item.values.map(dateValue => /*#__PURE__*/React.createElement(DateTimeRenderType, {
+        value: dateValue,
         display: "date"
-      });
+      }));
     case 'datetime':
-      return /*#__PURE__*/React.createElement(DateTimeRenderType, {
-        value: item.value,
+      return item.values.map(datTimeValue => /*#__PURE__*/React.createElement(DateTimeRenderType, {
+        value: datTimeValue,
         display: "datetime"
-      });
+      }));
     case 'icon':
-      return /*#__PURE__*/React.createElement(IconRenderType, item.value);
+      return item.values.map(iconValue => /*#__PURE__*/React.createElement(IconRenderType, iconValue));
     case 'link':
-      return /*#__PURE__*/React.createElement(LinkRenderType, _extends({
-        key: (_item$value = item.value) === null || _item$value === void 0 ? void 0 : _item$value.url
-      }, item.value));
+      return item.values.map(linkValue => /*#__PURE__*/React.createElement(LinkRenderType, _extends({
+        key: linkValue === null || linkValue === void 0 ? void 0 : linkValue.url
+      }, linkValue)));
     case 'number':
-      return /*#__PURE__*/React.createElement(NumberRenderType, {
-        number: item.value
-      });
+      return item.values.map(numberValue => /*#__PURE__*/React.createElement(NumberRenderType, {
+        number: numberValue
+      }));
     case 'status':
-      return /*#__PURE__*/React.createElement(StatusRenderType, item.value);
+      return item.values.map(statusValue => /*#__PURE__*/React.createElement(StatusRenderType, statusValue));
     case 'string':
-      return /*#__PURE__*/React.createElement(StringRenderType, {
-        key: item.value,
-        text: item.value
-      });
+      return item.values.map(stringValue => /*#__PURE__*/React.createElement(StringRenderType, {
+        key: stringValue,
+        text: stringValue
+      }));
     case 'tag':
-      return /*#__PURE__*/React.createElement(TagRenderType, {
-        key: ((_item$value2 = item.value) === null || _item$value2 === void 0 ? void 0 : _item$value2.id) || ((_item$value3 = item.value) === null || _item$value3 === void 0 ? void 0 : _item$value3.text),
-        tag: item.value
-      });
+      return item.values.map(tagValue => /*#__PURE__*/React.createElement(TagRenderType, {
+        key: (tagValue === null || tagValue === void 0 ? void 0 : tagValue.id) || (tagValue === null || tagValue === void 0 ? void 0 : tagValue.text),
+        tag: tagValue
+      }));
     case 'time':
-      return /*#__PURE__*/React.createElement(DateTimeRenderType, {
-        value: item.value,
+      return item.values.map(timeValue => /*#__PURE__*/React.createElement(DateTimeRenderType, {
+        value: timeValue,
         display: "time"
-      });
+      }));
     case 'user':
-      return /*#__PURE__*/React.createElement(UserRenderType, item.value);
-    case 'richtext':
-      return /*#__PURE__*/React.createElement(RichTextRenderType, {
-        value: item.value
+      return /*#__PURE__*/React.createElement(UserRenderType, {
+        users: item.values
       });
+    case 'richtext':
+      return item.values.map(richValue => /*#__PURE__*/React.createElement(RichTextRenderType, {
+        value: richValue
+      }));
     default:
       return /*#__PURE__*/React.createElement(React.Fragment, null);
   }

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

@@ -1,32 +1,92 @@
-import React from 'react';
+/** @jsx jsx */
+import React, { useState } from 'react';
+import { jsx } from '@emotion/react';
 import styled from '@emotion/styled';
 import { FormattedMessage } from 'react-intl-next';
 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 { userTypeMessages } from './messages';
-const UserWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  font-size: ${FieldTextFontSize};
-`;
-const AvatarWrapper = styled.div`
-  margin-right: 5px;
+const userWrapperStyles = xcss({
+  display: 'flex',
+  alignItems: 'center',
+  fontSize: `${FieldTextFontSize}px`
+});
+const avatarWrapperStyles = xcss({
+  marginRight: '5px'
+});
+const widthObserverWrapperStyles = xcss({
+  position: 'relative'
+});
+const AvatarGroupWrapperStyles = styled.div`
+  /*
+  The css from editor core package affects the padding of the AvatarGroup
+  The & refers to the parent selector (.<generated className>),
+  so && becomes .<generated className>.<generated className> which increases its specificity
+  */
+  && ul {
+    padding-left: 0px;
+  }
 `;
+const getMaxUserCount = (userCount, availableWidth) => {
+  if (availableWidth <= 28) {
+    // If width is less than or equal to 28px, we should only display the user count
+    return 1;
+  }
+  const defaultMaxCount = 5;
+  const usersNumFitToAvailableWidth = Math.ceil((availableWidth - 28) / 20);
+  return usersNumFitToAvailableWidth > defaultMaxCount ? defaultMaxCount : usersNumFitToAvailableWidth;
+};
 export const USER_TYPE_TEST_ID = 'link-datasource-render-type--user';
 const UserType = ({
-  avatarSource,
-  avatarSize = 'small',
-  displayName,
-  testId = USER_TYPE_TEST_ID,
-  children
+  users
 }) => {
-  return /*#__PURE__*/React.createElement(UserWrapper, {
-    "data-testid": testId
-  }, /*#__PURE__*/React.createElement(AvatarWrapper, null, /*#__PURE__*/React.createElement(Avatar, {
-    appearance: "circle",
-    size: avatarSize,
-    src: avatarSource,
-    testId: `${testId}--avatar`
-  })), children || displayName || /*#__PURE__*/React.createElement(FormattedMessage, userTypeMessages.userDefaultdisplayNameValue));
+  const [width, setWidth] = useState(null);
+  if (users.length <= 1) {
+    const {
+      avatarSource,
+      avatarSize = 'small',
+      displayName,
+      testId = USER_TYPE_TEST_ID,
+      children
+    } = users[0] || {};
+    return jsx(Box, {
+      xcss: userWrapperStyles,
+      testId: testId
+    }, jsx(Box, {
+      xcss: avatarWrapperStyles
+    }, jsx(Avatar, {
+      appearance: "circle",
+      size: avatarSize || 'small',
+      src: avatarSource,
+      testId: `${testId}--avatar`
+    })), children || displayName || jsx(FormattedMessage, userTypeMessages.userDefaultdisplayNameValue));
+  } else {
+    const maxCount = width !== null ? getMaxUserCount(users.length, width) : 5;
+    const data = users.filter(user => !!user.displayName).map(({
+      atlassianUserId,
+      displayName,
+      avatarSource,
+      testId
+    }) => ({
+      key: atlassianUserId,
+      name: displayName,
+      src: avatarSource,
+      testId: `${testId}--avatar`
+    }));
+    return jsx(AvatarGroupWrapperStyles, null, jsx(Box, {
+      xcss: widthObserverWrapperStyles
+    }, jsx(WidthObserver, {
+      setWidth: setWidth
+    })), jsx(AvatarGroup, {
+      data: data,
+      maxCount: maxCount,
+      size: "small",
+      isTooltipDisabled: true,
+      testId: USER_TYPE_TEST_ID
+    }));
+  }
 };
 export default UserType;

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

@@ -393,11 +393,9 @@ 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 renderedValues = values.map(function (value) {
-            return renderItem({
-              type: type,
-              value: value
-            });
+          var renderedValues = renderItem({
+            type: type,
+            values: values
           });
           var stringifiedContent = values.map(function (value) {
             return stringifyType({
@@ -407,12 +405,11 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
           }).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;
+          }, renderedValues) : renderedValues;
           return {
             key: key,
             content: contentComponent,

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

@@ -43,54 +43,77 @@ export var stringifyType = function stringifyType(_ref, formatMessage, formatDat
   }
 };
 export var fallbackRenderType = function fallbackRenderType(item) {
-  var _item$value, _item$value2, _item$value3;
   switch (item.type) {
     case 'boolean':
-      return /*#__PURE__*/React.createElement(BooleanRenderType, {
-        value: item.value
+      return item.values.map(function (booleanValue) {
+        return /*#__PURE__*/React.createElement(BooleanRenderType, {
+          value: booleanValue
+        });
       });
     case 'date':
-      return /*#__PURE__*/React.createElement(DateTimeRenderType, {
-        value: item.value,
-        display: "date"
+      return item.values.map(function (dateValue) {
+        return /*#__PURE__*/React.createElement(DateTimeRenderType, {
+          value: dateValue,
+          display: "date"
+        });
       });
     case 'datetime':
-      return /*#__PURE__*/React.createElement(DateTimeRenderType, {
-        value: item.value,
-        display: "datetime"
+      return item.values.map(function (datTimeValue) {
+        return /*#__PURE__*/React.createElement(DateTimeRenderType, {
+          value: datTimeValue,
+          display: "datetime"
+        });
       });
     case 'icon':
-      return /*#__PURE__*/React.createElement(IconRenderType, item.value);
+      return item.values.map(function (iconValue) {
+        return /*#__PURE__*/React.createElement(IconRenderType, iconValue);
+      });
     case 'link':
-      return /*#__PURE__*/React.createElement(LinkRenderType, _extends({
-        key: (_item$value = item.value) === null || _item$value === void 0 ? void 0 : _item$value.url
-      }, item.value));
+      return item.values.map(function (linkValue) {
+        return /*#__PURE__*/React.createElement(LinkRenderType, _extends({
+          key: linkValue === null || linkValue === void 0 ? void 0 : linkValue.url
+        }, linkValue));
+      });
     case 'number':
-      return /*#__PURE__*/React.createElement(NumberRenderType, {
-        number: item.value
+      return item.values.map(function (numberValue) {
+        return /*#__PURE__*/React.createElement(NumberRenderType, {
+          number: numberValue
+        });
       });
     case 'status':
-      return /*#__PURE__*/React.createElement(StatusRenderType, item.value);
+      return item.values.map(function (statusValue) {
+        return /*#__PURE__*/React.createElement(StatusRenderType, statusValue);
+      });
     case 'string':
-      return /*#__PURE__*/React.createElement(StringRenderType, {
-        key: item.value,
-        text: item.value
+      return item.values.map(function (stringValue) {
+        return /*#__PURE__*/React.createElement(StringRenderType, {
+          key: stringValue,
+          text: stringValue
+        });
       });
     case 'tag':
-      return /*#__PURE__*/React.createElement(TagRenderType, {
-        key: ((_item$value2 = item.value) === null || _item$value2 === void 0 ? void 0 : _item$value2.id) || ((_item$value3 = item.value) === null || _item$value3 === void 0 ? void 0 : _item$value3.text),
-        tag: item.value
+      return item.values.map(function (tagValue) {
+        return /*#__PURE__*/React.createElement(TagRenderType, {
+          key: (tagValue === null || tagValue === void 0 ? void 0 : tagValue.id) || (tagValue === null || tagValue === void 0 ? void 0 : tagValue.text),
+          tag: tagValue
+        });
       });
     case 'time':
-      return /*#__PURE__*/React.createElement(DateTimeRenderType, {
-        value: item.value,
-        display: "time"
+      return item.values.map(function (timeValue) {
+        return /*#__PURE__*/React.createElement(DateTimeRenderType, {
+          value: timeValue,
+          display: "time"
+        });
       });
     case 'user':
-      return /*#__PURE__*/React.createElement(UserRenderType, item.value);
+      return /*#__PURE__*/React.createElement(UserRenderType, {
+        users: item.values
+      });
     case 'richtext':
-      return /*#__PURE__*/React.createElement(RichTextRenderType, {
-        value: item.value
+      return item.values.map(function (richValue) {
+        return /*#__PURE__*/React.createElement(RichTextRenderType, {
+          value: richValue
+        });
       });
     default:
       return /*#__PURE__*/React.createElement(React.Fragment, null);

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

@@ -1,29 +1,92 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
-import React from 'react';
+var _templateObject;
+/** @jsx jsx */
+import React, { useState } from 'react';
+import { jsx } from '@emotion/react';
 import styled from '@emotion/styled';
 import { FormattedMessage } from 'react-intl-next';
 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 { userTypeMessages } from './messages';
-var UserWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  font-size: ", ";\n"])), FieldTextFontSize);
-var AvatarWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-right: 5px;\n"])));
+var userWrapperStyles = xcss({
+  display: 'flex',
+  alignItems: 'center',
+  fontSize: "".concat(FieldTextFontSize, "px")
+});
+var avatarWrapperStyles = xcss({
+  marginRight: '5px'
+});
+var widthObserverWrapperStyles = xcss({
+  position: 'relative'
+});
+var AvatarGroupWrapperStyles = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /*\n  The css from editor core package affects the padding of the AvatarGroup\n  The & refers to the parent selector (.<generated className>),\n  so && becomes .<generated className>.<generated className> which increases its specificity\n  */\n  && ul {\n    padding-left: 0px;\n  }\n"])));
+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
+    return 1;
+  }
+  var defaultMaxCount = 5;
+  var usersNumFitToAvailableWidth = Math.ceil((availableWidth - 28) / 20);
+  return usersNumFitToAvailableWidth > defaultMaxCount ? defaultMaxCount : usersNumFitToAvailableWidth;
+};
 export var USER_TYPE_TEST_ID = 'link-datasource-render-type--user';
 var UserType = function UserType(_ref) {
-  var avatarSource = _ref.avatarSource,
-    _ref$avatarSize = _ref.avatarSize,
-    avatarSize = _ref$avatarSize === void 0 ? 'small' : _ref$avatarSize,
-    displayName = _ref.displayName,
-    _ref$testId = _ref.testId,
-    testId = _ref$testId === void 0 ? USER_TYPE_TEST_ID : _ref$testId,
-    children = _ref.children;
-  return /*#__PURE__*/React.createElement(UserWrapper, {
-    "data-testid": testId
-  }, /*#__PURE__*/React.createElement(AvatarWrapper, null, /*#__PURE__*/React.createElement(Avatar, {
-    appearance: "circle",
-    size: avatarSize,
-    src: avatarSource,
-    testId: "".concat(testId, "--avatar")
-  })), children || displayName || /*#__PURE__*/React.createElement(FormattedMessage, userTypeMessages.userDefaultdisplayNameValue));
+  var users = _ref.users;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    width = _useState2[0],
+    setWidth = _useState2[1];
+  if (users.length <= 1) {
+    var _ref2 = users[0] || {},
+      avatarSource = _ref2.avatarSource,
+      _ref2$avatarSize = _ref2.avatarSize,
+      avatarSize = _ref2$avatarSize === void 0 ? 'small' : _ref2$avatarSize,
+      displayName = _ref2.displayName,
+      _ref2$testId = _ref2.testId,
+      testId = _ref2$testId === void 0 ? USER_TYPE_TEST_ID : _ref2$testId,
+      children = _ref2.children;
+    return jsx(Box, {
+      xcss: userWrapperStyles,
+      testId: testId
+    }, jsx(Box, {
+      xcss: avatarWrapperStyles
+    }, jsx(Avatar, {
+      appearance: "circle",
+      size: avatarSize || 'small',
+      src: avatarSource,
+      testId: "".concat(testId, "--avatar")
+    })), children || displayName || jsx(FormattedMessage, userTypeMessages.userDefaultdisplayNameValue));
+  } else {
+    var maxCount = width !== null ? getMaxUserCount(users.length, width) : 5;
+    var data = users.filter(function (user) {
+      return !!user.displayName;
+    }).map(function (_ref3) {
+      var atlassianUserId = _ref3.atlassianUserId,
+        displayName = _ref3.displayName,
+        avatarSource = _ref3.avatarSource,
+        testId = _ref3.testId;
+      return {
+        key: atlassianUserId,
+        name: displayName,
+        src: avatarSource,
+        testId: "".concat(testId, "--avatar")
+      };
+    });
+    return jsx(AvatarGroupWrapperStyles, null, jsx(Box, {
+      xcss: widthObserverWrapperStyles
+    }, jsx(WidthObserver, {
+      setWidth: setWidth
+    })), jsx(AvatarGroup, {
+      data: data,
+      maxCount: maxCount,
+      size: "small",
+      isTooltipDisabled: true,
+      testId: USER_TYPE_TEST_ID
+    }));
+  }
 };
 export default UserType;

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

@@ -1,11 +1,15 @@
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { SizeType } from '@atlaskit/avatar';
 import { User } from '@atlaskit/linking-types';
-interface UserProps extends User {
+export interface UserProps extends User {
     children?: React.ReactElement;
     testId?: string;
     avatarSize?: SizeType;
 }
 export declare const USER_TYPE_TEST_ID = "link-datasource-render-type--user";
-declare const UserType: ({ avatarSource, avatarSize, displayName, testId, children, }: UserProps) => JSX.Element;
+declare const UserType: ({ users }: {
+    users: UserProps[];
+}) => jsx.JSX.Element;
 export default UserType;

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

@@ -1,7 +1,15 @@
 /// <reference types="react" />
 import { DatasourceDataResponseItem, DatasourceResponseSchemaProperty, DatasourceTableStatusType, DatasourceType } from '@atlaskit/linking-types';
 import { NextPageType } from '../../hooks/useDatasourceTableState';
-export type TableViewPropsRenderType = (item: DatasourceType) => React.ReactNode;
+export type DatasourceTypeWithOnlyValues = {
+    [K in DatasourceType['type']]: {
+        type: K;
+        values: Extract<DatasourceType, {
+            type: K;
+        }>['value'][];
+    };
+}[DatasourceType['type']];
+export type TableViewPropsRenderType = (item: DatasourceTypeWithOnlyValues) => React.ReactNode;
 export interface ColumnSizesMap {
     [key: string]: number;
 }

package/dist/types/ui/jira-issues-modal/types.d.ts

@@ -56,8 +56,11 @@ export interface JiraIssuesConfigModalProps {
     /** Callback function to be invoked when the insert issues button is clicked */
     onInsert: (adf: InlineCardAdf | JiraIssuesDatasourceAdf, analyticsEvent?: UIAnalyticsEvent) => void;
     /** The view mode that the modal will show on open:
-     * - issues = list of links table
-     * - count = smart link showing query results count */
+     * - Table = Displays a list of links in table format
+     * - Inline link = Presents a smart link that shows the count of query results. However, if there's only one result, it converts to an inline smart link of that issue.
+  
+     * The view modes in 'JiraIssueViewModes' have not been changed from 'count' to 'inline link' and 'issue' to 'table'
+     * because it will introduce breaking changes to the public API requiring a major version bump*/
     viewMode?: JiraIssueViewModes;
 }
 export {};

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

@@ -1,11 +1,15 @@
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { SizeType } from '@atlaskit/avatar';
 import { User } from '@atlaskit/linking-types';
-interface UserProps extends User {
+export interface UserProps extends User {
     children?: React.ReactElement;
     testId?: string;
     avatarSize?: SizeType;
 }
 export declare const USER_TYPE_TEST_ID = "link-datasource-render-type--user";
-declare const UserType: ({ avatarSource, avatarSize, displayName, testId, children, }: UserProps) => JSX.Element;
+declare const UserType: ({ users }: {
+    users: UserProps[];
+}) => jsx.JSX.Element;
 export default UserType;

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

@@ -1,7 +1,15 @@
 /// <reference types="react" />
 import { DatasourceDataResponseItem, DatasourceResponseSchemaProperty, DatasourceTableStatusType, DatasourceType } from '@atlaskit/linking-types';
 import { NextPageType } from '../../hooks/useDatasourceTableState';
-export type TableViewPropsRenderType = (item: DatasourceType) => React.ReactNode;
+export type DatasourceTypeWithOnlyValues = {
+    [K in DatasourceType['type']]: {
+        type: K;
+        values: Extract<DatasourceType, {
+            type: K;
+        }>['value'][];
+    };
+}[DatasourceType['type']];
+export type TableViewPropsRenderType = (item: DatasourceTypeWithOnlyValues) => React.ReactNode;
 export interface ColumnSizesMap {
     [key: string]: number;
 }

package/dist/types-ts4.5/ui/jira-issues-modal/types.d.ts

@@ -56,8 +56,11 @@ export interface JiraIssuesConfigModalProps {
     /** Callback function to be invoked when the insert issues button is clicked */
     onInsert: (adf: InlineCardAdf | JiraIssuesDatasourceAdf, analyticsEvent?: UIAnalyticsEvent) => void;
     /** The view mode that the modal will show on open:
-     * - issues = list of links table
-     * - count = smart link showing query results count */
+     * - Table = Displays a list of links in table format
+     * - Inline link = Presents a smart link that shows the count of query results. However, if there's only one result, it converts to an inline smart link of that issue.
+  
+     * The view modes in 'JiraIssueViewModes' have not been changed from 'count' to 'inline link' and 'issue' to 'table'
+     * because it will introduce breaking changes to the public API requiring a major version bump*/
     viewMode?: JiraIssueViewModes;
 }
 export {};

package/examples-helpers/buildJiraIssuesTable.tsx

@@ -28,7 +28,9 @@ export const ExampleJiraIssuesTableView = () => {
 
   const [columnCustomSizes, setColumnCustomSizes] = useState<
     ColumnSizesMap | undefined
-  >();
+  >({
+    people: 100,
+  });
 
   const onColumnResize = useCallback(
     (key: string, width: number) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-datasource",
-  "version": "1.19.46",
+  "version": "1.20.0",
   "description": "UI Components to support linking platform dataset feature",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -33,6 +33,7 @@
     "@atlaskit/adf-schema": "^35.3.0",
     "@atlaskit/analytics-next": "^9.1.3",
     "@atlaskit/avatar": "^21.4.0",
+    "@atlaskit/avatar-group": "^9.5.0",
     "@atlaskit/badge": "^15.2.0",
     "@atlaskit/button": "^17.2.0",
     "@atlaskit/dropdown-menu": "^12.2.0",
@@ -67,6 +68,7 @@
     "@atlaskit/tokens": "^1.35.0",
     "@atlaskit/tooltip": "^18.1.0",
     "@atlaskit/ufo": "^0.2.4",
+    "@atlaskit/width-detector": "^4.1.7",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.0.0",