@atlaskit/link-datasource 3.13.14 → 3.13.16

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/link-datasource
 
+## 3.13.16
+
+### Patch Changes
+
+- Updated dependencies
+
+## 3.13.15
+
+### Patch Changes
+
+- [#172253](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/172253)
+  [`2578ad0189e51`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2578ad0189e51) -
+  [ux] Internal refactor behind ff - Allow inline edit on `user` column when previously unassigned.
+  Adds fallback Avatar unassigned user.
+
 ## 3.13.14
 
 ### Patch Changes

package/dist/cjs/ui/common/modal/mode-switcher/index.js

@@ -28,7 +28,6 @@ var modeSwitcherStyles = (0, _react2.css)({
   boxSizing: 'border-box',
   display: 'inline-flex',
   gap: "var(--ds-space-050, 4px)",
-  lineHeight: "var(--ds-space-200, 16px)",
   padding: "var(--ds-space-050, 4px)",
   '&:disabled': {
     opacity: '0.5'
@@ -44,8 +43,8 @@ var modeInputStyles = (0, _react2.css)({
 });
 var modeSwitcherLabelStyles = (0, _react2.css)({
   color: "var(--ds-text-subtlest, ".concat(_colors.N700, ")"),
-  fontSize: "var(--ds-space-150, 12px)",
-  fontWeight: '600',
+  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  fontWeight: "var(--ds-font-weight-semibold, 600)",
   textTransform: 'uppercase',
   padding: "var(--ds-space-050, 4px)",
   borderRadius: "var(--ds-space-050, 4px)",

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

@@ -13,6 +13,7 @@ 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 _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _widthDetector = require("@atlaskit/width-detector");
 var _styled2 = require("../../styled");
@@ -70,7 +71,13 @@ var UserType = function UserType(_ref) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     width = _useState2[0],
     setWidth = _useState2[1];
-  if (users.length <= 1) {
+  var multipleUsers = false;
+  if ((0, _platformFeatureFlags.fg)('platform-datasources-enable-two-way-sync-assignee')) {
+    multipleUsers = users.length === 1;
+  } else {
+    multipleUsers = users.length <= 1;
+  }
+  if (multipleUsers) {
     var _ref2 = users[0] || {},
       avatarSource = _ref2.avatarSource,
       _ref2$avatarSize = _ref2.avatarSize,

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

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EmptyAvatar = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
+var _primitives = require("@atlaskit/primitives");
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _user = require("../../render-type/user");
+var _messages = require("../../render-type/user/messages");
+var userWrapperStyles = (0, _primitives.xcss)({
+  display: 'flex',
+  alignItems: 'center',
+  fontSize: 'font.body'
+});
+var avatarWrapperStyles = (0, _primitives.xcss)({
+  marginRight: 'space.100'
+});
+var emptyAvatarWrapperStyles = (0, _primitives.xcss)({
+  paddingBlock: 'space.050',
+  paddingInline: 'space.100',
+  opacity: 0,
+  ':hover': {
+    opacity: 1
+  }
+});
+var EmptyAvatar = exports.EmptyAvatar = function EmptyAvatar() {
+  var intl = (0, _reactIntlNext.useIntl)();
+  return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    content: intl.formatMessage(_messages.userTypeMessages.userDefaultdisplayNameValue)
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: [userWrapperStyles, emptyAvatarWrapperStyles],
+    testId: _user.USER_TYPE_TEST_ID
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: avatarWrapperStyles
+  }, /*#__PURE__*/_react.default.createElement(_avatar.default, {
+    appearance: "circle",
+    size: 'small',
+    testId: "".concat(_user.USER_TYPE_TEST_ID, "--avatar")
+  })), /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.userTypeMessages.userDefaultdisplayNameValue)));
+};

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

@@ -124,12 +124,25 @@ var InlineEditableCell = function InlineEditableCell(_ref3) {
     datasourceTypeWithValues: values
   });
 };
-var TableCellContent = exports.TableCellContent = function TableCellContent(_ref4) {
-  var id = _ref4.id,
+var toDatasourceTypeWithValues = function toDatasourceTypeWithValues(_ref4) {
+  var _rowData$columnKey2;
+  var rowData = _ref4.rowData,
     columnKey = _ref4.columnKey,
-    columnType = _ref4.columnType,
-    renderItem = _ref4.renderItem,
-    wrappedColumnKeys = _ref4.wrappedColumnKeys;
+    columnType = _ref4.columnType;
+  // Need to make sure we keep falsy values like 0 and '', as well as the boolean false.
+  var value = (_rowData$columnKey2 = rowData[columnKey]) === null || _rowData$columnKey2 === void 0 ? void 0 : _rowData$columnKey2.data;
+  var values = !value ? [] : Array.isArray(value) ? value : [value];
+  return {
+    type: columnType,
+    values: values
+  };
+};
+var TableCellContent = exports.TableCellContent = function TableCellContent(_ref5) {
+  var id = _ref5.id,
+    columnKey = _ref5.columnKey,
+    columnType = _ref5.columnType,
+    renderItem = _ref5.renderItem,
+    wrappedColumnKeys = _ref5.wrappedColumnKeys;
   var item = (0, _state.useDatasourceItem)({
     id: id
   });
@@ -137,22 +150,18 @@ var TableCellContent = exports.TableCellContent = function TableCellContent(_ref
     var integrationKey = item.integrationKey,
       ari = item.ari,
       rowData = item.data;
-    var isEditType = !!ari && !!integrationKey && rowData[columnKey] && (0, _editType.isEditTypeSupported)(columnType);
+    var isEditType = !!ari && !!integrationKey && (0, _editType.isEditTypeSupported)(columnType);
     if (isEditType) {
-      var _rowData$columnKey2;
-      // Need to make sure we keep falsy values like 0 and '', as well as the boolean false.
-      var value = (_rowData$columnKey2 = rowData[columnKey]) === null || _rowData$columnKey2 === void 0 ? void 0 : _rowData$columnKey2.data;
-      var values = Array.isArray(value) ? value : [value];
-      var datasourceTypeWithValues = {
-        type: columnType,
-        values: values
-      };
       return /*#__PURE__*/_react.default.createElement(InlineEditableCell, {
         ari: ari,
         columnKey: columnKey,
         renderItem: renderItem,
         integrationKey: integrationKey,
-        values: datasourceTypeWithValues,
+        values: toDatasourceTypeWithValues({
+          rowData: rowData,
+          columnKey: columnKey,
+          columnType: columnType
+        }),
         wrappedColumnKeys: wrappedColumnKeys
       });
     }

package/dist/cjs/ui/issue-like-table/table-cell-content/inline-edit.js

@@ -20,6 +20,7 @@ var _datasourceExperienceId = require("../../../contexts/datasource-experience-i
 var _useDatasourceTableFlag = require("../../../hooks/useDatasourceTableFlag");
 var _state = require("../../../state");
 var _editType = require("../edit-type");
+var _avatar = require("../shared-components/avatar");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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; }
@@ -59,7 +60,8 @@ var mapUpdatedItem = function mapUpdatedItem(existingItem, columnKey, newValue)
   return null;
 };
 var isNewValue = function isNewValue(columnKey, newItem, existingData) {
-  return newItem[columnKey].data && newItem[columnKey].data !== existingData[columnKey].data;
+  var _newItem$columnKey, _existingData$columnK;
+  return ((_newItem$columnKey = newItem[columnKey]) === null || _newItem$columnKey === void 0 ? void 0 : _newItem$columnKey.data) && (!((_existingData$columnK = existingData[columnKey]) !== null && _existingData$columnK !== void 0 && _existingData$columnK.data) || newItem[columnKey].data !== existingData[columnKey].data);
 };
 var useRefreshDatasourceItem = function useRefreshDatasourceItem(item) {
   var _item$data;
@@ -79,7 +81,7 @@ var InlineEdit = exports.InlineEdit = function InlineEdit(_ref) {
   var ari = _ref.ari,
     execute = _ref.execute,
     executeFetch = _ref.executeFetch,
-    _readView = _ref.readView,
+    readView = _ref.readView,
     columnKey = _ref.columnKey,
     datasourceTypeWithValues = _ref.datasourceTypeWithValues;
   var _useState = (0, _react.useState)(false),
@@ -160,9 +162,10 @@ var InlineEdit = exports.InlineEdit = function InlineEdit(_ref) {
     executeFetch: executeFetch
   }), {
     hideActionButtons: true,
-    readView: function readView() {
-      return _readView;
-    },
+    readView: editableRenderType({
+      defaultValue: datasourceTypeWithValues,
+      readView: readView
+    }),
     readViewFitContainerWidth: true,
     isEditing: isEditing,
     onEdit: onEdit,
@@ -171,4 +174,25 @@ var InlineEdit = exports.InlineEdit = function InlineEdit(_ref) {
       return onCommitUpdate(editValues);
     }
   })));
+};
+
+/**
+ *
+ * This function allows us to manipulate the readView on editable cells.
+ * This way, for example, we can show a fallback Avatar on empty user cells.
+ *
+ */
+var editableRenderType = function editableRenderType(_ref3) {
+  var defaultValue = _ref3.defaultValue,
+    readView = _ref3.readView;
+  return function () {
+    var _defaultValue$values;
+    switch (defaultValue.type) {
+      case 'user':
+        if (!((_defaultValue$values = defaultValue.values) !== null && _defaultValue$values !== void 0 && _defaultValue$values[0])) {
+          return /*#__PURE__*/_react.default.createElement(_avatar.EmptyAvatar, null);
+        }
+    }
+    return readView;
+  };
 };

package/dist/es2019/ui/common/modal/mode-switcher/index.js

@@ -20,7 +20,6 @@ const modeSwitcherStyles = css({
   boxSizing: 'border-box',
   display: 'inline-flex',
   gap: "var(--ds-space-050, 4px)",
-  lineHeight: "var(--ds-space-200, 16px)",
   padding: "var(--ds-space-050, 4px)",
   '&:disabled': {
     opacity: '0.5'
@@ -36,8 +35,8 @@ const modeInputStyles = css({
 });
 const modeSwitcherLabelStyles = css({
   color: `var(--ds-text-subtlest, ${N700})`,
-  fontSize: "var(--ds-space-150, 12px)",
-  fontWeight: '600',
+  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  fontWeight: "var(--ds-font-weight-semibold, 600)",
   textTransform: 'uppercase',
   padding: `${"var(--ds-space-050, 4px)"}`,
   borderRadius: "var(--ds-space-050, 4px)",

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

@@ -11,6 +11,7 @@ import styled from '@emotion/styled';
 import { FormattedMessage } from 'react-intl-next';
 import Avatar from '@atlaskit/avatar';
 import AvatarGroup from '@atlaskit/avatar-group';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
 import { WidthObserver } from '@atlaskit/width-detector';
 import { fieldTextFontSize } from '../../styled';
@@ -55,7 +56,13 @@ const UserType = ({
   users
 }) => {
   const [width, setWidth] = useState(null);
-  if (users.length <= 1) {
+  let multipleUsers = false;
+  if (fg('platform-datasources-enable-two-way-sync-assignee')) {
+    multipleUsers = users.length === 1;
+  } else {
+    multipleUsers = users.length <= 1;
+  }
+  if (multipleUsers) {
     const {
       avatarSource,
       avatarSize = 'small',

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import { FormattedMessage, useIntl } from 'react-intl-next';
+import Avatar from '@atlaskit/avatar';
+import { Box, xcss } from '@atlaskit/primitives';
+import Tooltip from '@atlaskit/tooltip';
+import { USER_TYPE_TEST_ID } from '../../render-type/user';
+import { userTypeMessages } from '../../render-type/user/messages';
+const userWrapperStyles = xcss({
+  display: 'flex',
+  alignItems: 'center',
+  fontSize: 'font.body'
+});
+const avatarWrapperStyles = xcss({
+  marginRight: 'space.100'
+});
+const emptyAvatarWrapperStyles = xcss({
+  paddingBlock: 'space.050',
+  paddingInline: 'space.100',
+  opacity: 0,
+  ':hover': {
+    opacity: 1
+  }
+});
+export const EmptyAvatar = () => {
+  const intl = useIntl();
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    content: intl.formatMessage(userTypeMessages.userDefaultdisplayNameValue)
+  }, /*#__PURE__*/React.createElement(Box, {
+    xcss: [userWrapperStyles, emptyAvatarWrapperStyles],
+    testId: USER_TYPE_TEST_ID
+  }, /*#__PURE__*/React.createElement(Box, {
+    xcss: avatarWrapperStyles
+  }, /*#__PURE__*/React.createElement(Avatar, {
+    appearance: "circle",
+    size: 'small',
+    testId: `${USER_TYPE_TEST_ID}--avatar`
+  })), /*#__PURE__*/React.createElement(FormattedMessage, userTypeMessages.userDefaultdisplayNameValue)));
+};

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

@@ -117,6 +117,20 @@ const InlineEditableCell = ({
     datasourceTypeWithValues: values
   });
 };
+const toDatasourceTypeWithValues = ({
+  rowData,
+  columnKey,
+  columnType
+}) => {
+  var _rowData$columnKey2;
+  // Need to make sure we keep falsy values like 0 and '', as well as the boolean false.
+  const value = (_rowData$columnKey2 = rowData[columnKey]) === null || _rowData$columnKey2 === void 0 ? void 0 : _rowData$columnKey2.data;
+  const values = !value ? [] : Array.isArray(value) ? value : [value];
+  return {
+    type: columnType,
+    values
+  };
+};
 export const TableCellContent = ({
   id,
   columnKey,
@@ -133,22 +147,18 @@ export const TableCellContent = ({
       ari,
       data: rowData
     } = item;
-    const isEditType = !!ari && !!integrationKey && rowData[columnKey] && isEditTypeSupported(columnType);
+    const isEditType = !!ari && !!integrationKey && isEditTypeSupported(columnType);
     if (isEditType) {
-      var _rowData$columnKey2;
-      // Need to make sure we keep falsy values like 0 and '', as well as the boolean false.
-      const value = (_rowData$columnKey2 = rowData[columnKey]) === null || _rowData$columnKey2 === void 0 ? void 0 : _rowData$columnKey2.data;
-      const values = Array.isArray(value) ? value : [value];
-      const datasourceTypeWithValues = {
-        type: columnType,
-        values
-      };
       return /*#__PURE__*/React.createElement(InlineEditableCell, {
         ari: ari,
         columnKey: columnKey,
         renderItem: renderItem,
         integrationKey: integrationKey,
-        values: datasourceTypeWithValues,
+        values: toDatasourceTypeWithValues({
+          rowData,
+          columnKey,
+          columnType
+        }),
         wrappedColumnKeys: wrappedColumnKeys
       });
     }

package/dist/es2019/ui/issue-like-table/table-cell-content/inline-edit.js

@@ -9,6 +9,7 @@ import { useDatasourceExperienceId } from '../../../contexts/datasource-experien
 import { useDatasourceTableFlag } from '../../../hooks/useDatasourceTableFlag';
 import { useDatasourceActions, useDatasourceItem } from '../../../state';
 import { editType } from '../edit-type';
+import { EmptyAvatar } from '../shared-components/avatar';
 export const InlineEditUFOExperience = 'inline-edit-rendered';
 const editContainerStyles = xcss({
   marginBlockStart: 'space.negative.100'
@@ -50,7 +51,8 @@ const mapUpdatedItem = (existingItem, columnKey, newValue) => {
   return null;
 };
 const isNewValue = (columnKey, newItem, existingData) => {
-  return newItem[columnKey].data && newItem[columnKey].data !== existingData[columnKey].data;
+  var _newItem$columnKey, _existingData$columnK;
+  return ((_newItem$columnKey = newItem[columnKey]) === null || _newItem$columnKey === void 0 ? void 0 : _newItem$columnKey.data) && (!((_existingData$columnK = existingData[columnKey]) !== null && _existingData$columnK !== void 0 && _existingData$columnK.data) || newItem[columnKey].data !== existingData[columnKey].data);
 };
 const useRefreshDatasourceItem = item => {
   var _item$data, _item$data$key, _item$data$key$data;
@@ -150,11 +152,36 @@ export const InlineEdit = ({
     executeFetch
   }), {
     hideActionButtons: true,
-    readView: () => readView,
+    readView: editableRenderType({
+      defaultValue: datasourceTypeWithValues,
+      readView
+    }),
     readViewFitContainerWidth: true,
     isEditing: isEditing,
     onEdit: onEdit,
     onCancel: onCancelEdit,
     onConfirm: () => onCommitUpdate(editValues)
   })));
+};
+
+/**
+ *
+ * This function allows us to manipulate the readView on editable cells.
+ * This way, for example, we can show a fallback Avatar on empty user cells.
+ *
+ */
+const editableRenderType = ({
+  defaultValue,
+  readView
+}) => {
+  return () => {
+    var _defaultValue$values;
+    switch (defaultValue.type) {
+      case 'user':
+        if (!((_defaultValue$values = defaultValue.values) !== null && _defaultValue$values !== void 0 && _defaultValue$values[0])) {
+          return /*#__PURE__*/React.createElement(EmptyAvatar, null);
+        }
+    }
+    return readView;
+  };
 };

package/dist/esm/ui/common/modal/mode-switcher/index.js

@@ -20,7 +20,6 @@ var modeSwitcherStyles = css({
   boxSizing: 'border-box',
   display: 'inline-flex',
   gap: "var(--ds-space-050, 4px)",
-  lineHeight: "var(--ds-space-200, 16px)",
   padding: "var(--ds-space-050, 4px)",
   '&:disabled': {
     opacity: '0.5'
@@ -36,8 +35,8 @@ var modeInputStyles = css({
 });
 var modeSwitcherLabelStyles = css({
   color: "var(--ds-text-subtlest, ".concat(N700, ")"),
-  fontSize: "var(--ds-space-150, 12px)",
-  fontWeight: '600',
+  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  fontWeight: "var(--ds-font-weight-semibold, 600)",
   textTransform: 'uppercase',
   padding: "var(--ds-space-050, 4px)",
   borderRadius: "var(--ds-space-050, 4px)",

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

@@ -12,6 +12,7 @@ import styled from '@emotion/styled';
 import { FormattedMessage } from 'react-intl-next';
 import Avatar from '@atlaskit/avatar';
 import AvatarGroup from '@atlaskit/avatar-group';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
 import { WidthObserver } from '@atlaskit/width-detector';
 import { fieldTextFontSize } from '../../styled';
@@ -58,7 +59,13 @@ var UserType = function UserType(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     width = _useState2[0],
     setWidth = _useState2[1];
-  if (users.length <= 1) {
+  var multipleUsers = false;
+  if (fg('platform-datasources-enable-two-way-sync-assignee')) {
+    multipleUsers = users.length === 1;
+  } else {
+    multipleUsers = users.length <= 1;
+  }
+  if (multipleUsers) {
     var _ref2 = users[0] || {},
       avatarSource = _ref2.avatarSource,
       _ref2$avatarSize = _ref2.avatarSize,

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import { FormattedMessage, useIntl } from 'react-intl-next';
+import Avatar from '@atlaskit/avatar';
+import { Box, xcss } from '@atlaskit/primitives';
+import Tooltip from '@atlaskit/tooltip';
+import { USER_TYPE_TEST_ID } from '../../render-type/user';
+import { userTypeMessages } from '../../render-type/user/messages';
+var userWrapperStyles = xcss({
+  display: 'flex',
+  alignItems: 'center',
+  fontSize: 'font.body'
+});
+var avatarWrapperStyles = xcss({
+  marginRight: 'space.100'
+});
+var emptyAvatarWrapperStyles = xcss({
+  paddingBlock: 'space.050',
+  paddingInline: 'space.100',
+  opacity: 0,
+  ':hover': {
+    opacity: 1
+  }
+});
+export var EmptyAvatar = function EmptyAvatar() {
+  var intl = useIntl();
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    content: intl.formatMessage(userTypeMessages.userDefaultdisplayNameValue)
+  }, /*#__PURE__*/React.createElement(Box, {
+    xcss: [userWrapperStyles, emptyAvatarWrapperStyles],
+    testId: USER_TYPE_TEST_ID
+  }, /*#__PURE__*/React.createElement(Box, {
+    xcss: avatarWrapperStyles
+  }, /*#__PURE__*/React.createElement(Avatar, {
+    appearance: "circle",
+    size: 'small',
+    testId: "".concat(USER_TYPE_TEST_ID, "--avatar")
+  })), /*#__PURE__*/React.createElement(FormattedMessage, userTypeMessages.userDefaultdisplayNameValue)));
+};

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

@@ -117,12 +117,25 @@ var InlineEditableCell = function InlineEditableCell(_ref3) {
     datasourceTypeWithValues: values
   });
 };
-export var TableCellContent = function TableCellContent(_ref4) {
-  var id = _ref4.id,
+var toDatasourceTypeWithValues = function toDatasourceTypeWithValues(_ref4) {
+  var _rowData$columnKey2;
+  var rowData = _ref4.rowData,
     columnKey = _ref4.columnKey,
-    columnType = _ref4.columnType,
-    renderItem = _ref4.renderItem,
-    wrappedColumnKeys = _ref4.wrappedColumnKeys;
+    columnType = _ref4.columnType;
+  // Need to make sure we keep falsy values like 0 and '', as well as the boolean false.
+  var value = (_rowData$columnKey2 = rowData[columnKey]) === null || _rowData$columnKey2 === void 0 ? void 0 : _rowData$columnKey2.data;
+  var values = !value ? [] : Array.isArray(value) ? value : [value];
+  return {
+    type: columnType,
+    values: values
+  };
+};
+export var TableCellContent = function TableCellContent(_ref5) {
+  var id = _ref5.id,
+    columnKey = _ref5.columnKey,
+    columnType = _ref5.columnType,
+    renderItem = _ref5.renderItem,
+    wrappedColumnKeys = _ref5.wrappedColumnKeys;
   var item = useDatasourceItem({
     id: id
   });
@@ -130,22 +143,18 @@ export var TableCellContent = function TableCellContent(_ref4) {
     var integrationKey = item.integrationKey,
       ari = item.ari,
       rowData = item.data;
-    var isEditType = !!ari && !!integrationKey && rowData[columnKey] && isEditTypeSupported(columnType);
+    var isEditType = !!ari && !!integrationKey && isEditTypeSupported(columnType);
     if (isEditType) {
-      var _rowData$columnKey2;
-      // Need to make sure we keep falsy values like 0 and '', as well as the boolean false.
-      var value = (_rowData$columnKey2 = rowData[columnKey]) === null || _rowData$columnKey2 === void 0 ? void 0 : _rowData$columnKey2.data;
-      var values = Array.isArray(value) ? value : [value];
-      var datasourceTypeWithValues = {
-        type: columnType,
-        values: values
-      };
       return /*#__PURE__*/React.createElement(InlineEditableCell, {
         ari: ari,
         columnKey: columnKey,
         renderItem: renderItem,
         integrationKey: integrationKey,
-        values: datasourceTypeWithValues,
+        values: toDatasourceTypeWithValues({
+          rowData: rowData,
+          columnKey: columnKey,
+          columnType: columnType
+        }),
         wrappedColumnKeys: wrappedColumnKeys
       });
     }

package/dist/esm/ui/issue-like-table/table-cell-content/inline-edit.js

@@ -14,6 +14,7 @@ import { useDatasourceExperienceId } from '../../../contexts/datasource-experien
 import { useDatasourceTableFlag } from '../../../hooks/useDatasourceTableFlag';
 import { useDatasourceActions, useDatasourceItem } from '../../../state';
 import { editType } from '../edit-type';
+import { EmptyAvatar } from '../shared-components/avatar';
 export var InlineEditUFOExperience = 'inline-edit-rendered';
 var editContainerStyles = xcss({
   marginBlockStart: 'space.negative.100'
@@ -49,7 +50,8 @@ var mapUpdatedItem = function mapUpdatedItem(existingItem, columnKey, newValue)
   return null;
 };
 var isNewValue = function isNewValue(columnKey, newItem, existingData) {
-  return newItem[columnKey].data && newItem[columnKey].data !== existingData[columnKey].data;
+  var _newItem$columnKey, _existingData$columnK;
+  return ((_newItem$columnKey = newItem[columnKey]) === null || _newItem$columnKey === void 0 ? void 0 : _newItem$columnKey.data) && (!((_existingData$columnK = existingData[columnKey]) !== null && _existingData$columnK !== void 0 && _existingData$columnK.data) || newItem[columnKey].data !== existingData[columnKey].data);
 };
 var useRefreshDatasourceItem = function useRefreshDatasourceItem(item) {
   var _item$data;
@@ -69,7 +71,7 @@ export var InlineEdit = function InlineEdit(_ref) {
   var ari = _ref.ari,
     execute = _ref.execute,
     executeFetch = _ref.executeFetch,
-    _readView = _ref.readView,
+    readView = _ref.readView,
     columnKey = _ref.columnKey,
     datasourceTypeWithValues = _ref.datasourceTypeWithValues;
   var _useState = useState(false),
@@ -150,9 +152,10 @@ export var InlineEdit = function InlineEdit(_ref) {
     executeFetch: executeFetch
   }), {
     hideActionButtons: true,
-    readView: function readView() {
-      return _readView;
-    },
+    readView: editableRenderType({
+      defaultValue: datasourceTypeWithValues,
+      readView: readView
+    }),
     readViewFitContainerWidth: true,
     isEditing: isEditing,
     onEdit: onEdit,
@@ -161,4 +164,25 @@ export var InlineEdit = function InlineEdit(_ref) {
       return onCommitUpdate(editValues);
     }
   })));
+};
+
+/**
+ *
+ * This function allows us to manipulate the readView on editable cells.
+ * This way, for example, we can show a fallback Avatar on empty user cells.
+ *
+ */
+var editableRenderType = function editableRenderType(_ref3) {
+  var defaultValue = _ref3.defaultValue,
+    readView = _ref3.readView;
+  return function () {
+    var _defaultValue$values;
+    switch (defaultValue.type) {
+      case 'user':
+        if (!((_defaultValue$values = defaultValue.values) !== null && _defaultValue$values !== void 0 && _defaultValue$values[0])) {
+          return /*#__PURE__*/React.createElement(EmptyAvatar, null);
+        }
+    }
+    return readView;
+  };
 };

package/dist/types/ui/issue-like-table/shared-components/avatar/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const EmptyAvatar: () => JSX.Element;

package/dist/types-ts4.5/ui/issue-like-table/shared-components/avatar/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const EmptyAvatar: () => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/link-datasource",
-	"version": "3.13.14",
+	"version": "3.13.16",
 	"description": "UI Components to support linking platform dataset feature",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -71,13 +71,13 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll": "^1.2.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.0",
 		"@atlaskit/primitives": "^13.3.0",
-		"@atlaskit/react-select": "^1.4.0",
-		"@atlaskit/select": "^18.7.0",
+		"@atlaskit/react-select": "^1.5.0",
+		"@atlaskit/select": "^18.8.0",
 		"@atlaskit/smart-card": "^32.5.0",
 		"@atlaskit/smart-user-picker": "6.11.2",
 		"@atlaskit/spinner": "^16.3.0",
 		"@atlaskit/tag": "^12.6.0",
-		"@atlaskit/textfield": "6.6.0",
+		"@atlaskit/textfield": "6.7.0",
 		"@atlaskit/theme": "^14.0.0",
 		"@atlaskit/tokens": "^2.4.0",
 		"@atlaskit/tooltip": "^18.9.0",