@atlaskit/link-datasource 2.9.2 → 2.9.4

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/link-datasource
 
+## 2.9.4
+
+### Patch Changes
+
+- [#126601](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/126601)
+  [`d9862e969b400`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d9862e969b400) -
+  [ux] Adds new InlineEditableCell and InlineEditableTableCell for IssueLikeTable behind feature
+  gate platform-datasources-enable-two-way-sync
+
+## 2.9.3
+
+### Patch Changes
+
+- [#121590](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/121590)
+  [`4dbf48b5397de`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4dbf48b5397de) -
+  Track datasource table word-wrap action
+- Updated dependencies
+
 ## 2.9.2
 
 ### Patch Changes

package/dist/cjs/analytics/generated/use-analytics-events.js

@@ -14,7 +14,7 @@ var _createEventPayload = _interopRequireDefault(require("./create-event-payload
  *
  * Generates Typescript types for analytics events from analytics.spec.yaml
  *
- * @codegen <<SignedSource::415836762b378b7d79f3aff4ba051c14>>
+ * @codegen <<SignedSource::21ae373abad7c370a8682ddcd3a7ed21>>
  * @codegenCommand yarn workspace @atlassian/analytics-tooling run analytics:codegen link-datasource
  */
 

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

@@ -28,6 +28,7 @@ var _disableNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/eleme
 var _pointerOutsideOfPreview = require("@atlaskit/pragmatic-drag-and-drop/element/pointer-outside-of-preview");
 var _setCustomNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview");
 var _preventUnhandled = require("@atlaskit/pragmatic-drag-and-drop/prevent-unhandled");
+var _analytics = require("../../analytics");
 var _customIcons = require("./custom-icons");
 var _messages = require("./messages");
 var _styled2 = require("./styled");
@@ -119,6 +120,8 @@ var DraggableTableHeading = exports.DraggableTableHeading = function DraggableTa
     onWidthChange = _ref.onWidthChange,
     isWrapped = _ref.isWrapped,
     onIsWrappedChange = _ref.onIsWrappedChange;
+  var _useDatasourceAnalyti = (0, _analytics.useDatasourceAnalyticsEvents)(),
+    fireEvent = _useDatasourceAnalyti.fireEvent;
   var mainHeaderCellRef = (0, _react.useRef)(null);
   var columnResizeHandleRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(idleState),
@@ -341,8 +344,17 @@ var DraggableTableHeading = exports.DraggableTableHeading = function DraggableTa
     return setIsDropdownOpen(isOpen);
   }, []);
   var toggleWrap = (0, _react.useCallback)(function () {
-    return onIsWrappedChange && onIsWrappedChange(!(isWrapped || false));
-  }, [isWrapped, onIsWrappedChange]);
+    if (!onIsWrappedChange) {
+      return;
+    }
+    var nextIsWrap = !(isWrapped || false);
+    if (nextIsWrap) {
+      fireEvent('ui.button.clicked.wrap', {});
+    } else {
+      fireEvent('ui.button.clicked.unwrap', {});
+    }
+    onIsWrappedChange(nextIsWrap);
+  }, [fireEvent, isWrapped, onIsWrappedChange]);
   return (0, _react2.jsx)(_styled2.TableHeading, {
     ref: mainHeaderCellRef,
     "data-testid": "".concat(id, "-column-heading"),

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

@@ -460,69 +460,72 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
     }));
   }, [visibleColumnKeys, onVisibleColumnKeysChange, tableId, hasData]);
   var tableRows = (0, _react.useMemo)(function () {
-    return (0, _platformFeatureFlags.fg)('enable_datasource_react_sweet_state') ? itemIds.map(function (id, rowIndex) {
-      return {
-        key: id,
-        cells: visibleSortedColumns.map(function (_ref12, cellIndex) {
-          var key = _ref12.key,
-            type = _ref12.type;
-          return {
-            key: key,
-            columnKey: key,
-            content: (0, _react2.jsx)(_tableCellContent.TableCellContent, {
-              id: id,
+    return (
+      // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+      (0, _platformFeatureFlags.fg)('enable_datasource_react_sweet_state') ? itemIds.map(function (id, rowIndex) {
+        return {
+          key: id,
+          cells: visibleSortedColumns.map(function (_ref12, cellIndex) {
+            var key = _ref12.key,
+              type = _ref12.type;
+            return {
+              key: key,
               columnKey: key,
-              columnType: type,
-              wrappedColumnKeys: wrappedColumnKeys,
-              renderItem: renderItem
-            }),
-            width: getColumnWidth(key, type, cellIndex === visibleSortedColumns.length - 1)
-          };
-        }),
-        ref: rowIndex === items.length - 1 ? function (el) {
-          return setLastRowElement(el);
-        } : undefined
-      };
-    }) : items.map(function (newRowData, rowIndex) {
-      return {
-        key: "".concat(identityColumnKey && newRowData[identityColumnKey] && newRowData[identityColumnKey].data || rowIndex),
-        cells: visibleSortedColumns.map(function (_ref13, cellIndex) {
-          var _newRowData$key;
-          var key = _ref13.key,
-            type = _ref13.type;
-          // Need to make sure we keep falsy values like 0 and '', as well as the boolean false.
-          var value = (_newRowData$key = newRowData[key]) === null || _newRowData$key === void 0 ? void 0 : _newRowData$key.data;
-          var values = Array.isArray(value) ? value : [value];
-          var renderedValues = renderItem({
-            type: type,
-            values: values
-          });
-          var stringifiedContent = values.map(function (value) {
-            return (0, _renderType.stringifyType)({
+              content: (0, _react2.jsx)(_tableCellContent.TableCellContent, {
+                id: id,
+                columnKey: key,
+                columnType: type,
+                wrappedColumnKeys: wrappedColumnKeys,
+                renderItem: renderItem
+              }),
+              width: getColumnWidth(key, type, cellIndex === visibleSortedColumns.length - 1)
+            };
+          }),
+          ref: rowIndex === items.length - 1 ? function (el) {
+            return setLastRowElement(el);
+          } : undefined
+        };
+      }) : items.map(function (newRowData, rowIndex) {
+        return {
+          key: "".concat(identityColumnKey && newRowData[identityColumnKey] && newRowData[identityColumnKey].data || rowIndex),
+          cells: visibleSortedColumns.map(function (_ref13, cellIndex) {
+            var _newRowData$key;
+            var key = _ref13.key,
+              type = _ref13.type;
+            // Need to make sure we keep falsy values like 0 and '', as well as the boolean false.
+            var value = (_newRowData$key = newRowData[key]) === null || _newRowData$key === void 0 ? void 0 : _newRowData$key.data;
+            var values = Array.isArray(value) ? value : [value];
+            var renderedValues = renderItem({
               type: type,
-              value: value
-            }, intl.formatMessage, intl.formatDate);
-          }).filter(function (value) {
-            return value !== '';
-          }).join(', ');
-          var contentComponent = stringifiedContent && !(wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(key)) ? (0, _react2.jsx)(_tooltip.default
-          // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
-          , {
-            tag: _truncateTextTag.TruncateTextTag,
-            content: stringifiedContent,
-            testId: "issues-table-cell-tooltip"
-          }, renderedValues) : renderedValues;
-          return {
-            key: key,
-            content: contentComponent,
-            width: getColumnWidth(key, type, cellIndex === visibleSortedColumns.length - 1)
-          };
-        }),
-        ref: rowIndex === items.length - 1 ? function (el) {
-          return setLastRowElement(el);
-        } : undefined
-      };
-    });
+              values: values
+            });
+            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 contentComponent = stringifiedContent && !(wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(key)) ? (0, _react2.jsx)(_tooltip.default
+            // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
+            , {
+              tag: _truncateTextTag.TruncateTextTag,
+              content: stringifiedContent,
+              testId: "issues-table-cell-tooltip"
+            }, renderedValues) : renderedValues;
+            return {
+              key: key,
+              content: contentComponent,
+              width: getColumnWidth(key, type, cellIndex === visibleSortedColumns.length - 1)
+            };
+          }),
+          ref: rowIndex === items.length - 1 ? function (el) {
+            return setLastRowElement(el);
+          } : undefined
+        };
+      })
+    );
   }, [items, itemIds, renderItem, wrappedColumnKeys, visibleSortedColumns, getColumnWidth, intl.formatMessage, intl.formatDate]);
   var rows = (0, _react.useMemo)(function () {
     if (status !== 'loading') {
@@ -703,15 +706,29 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
           paddingBlock: "var(--ds-space-100, 8px)"
         });
       }
-      return (0, _react2.jsx)(_styled2.TableCell, {
-        key: cellKey,
-        "data-testid": testId && "".concat(testId, "--cell-").concat(cellIndex),
-        colSpan: isEditable && isLastCell ? 2 : undefined
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-        ,
-        style: loadingRowStyle,
-        css: [wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(cellKey) ? null : truncateStyles]
-      }, content);
+
+      // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+      if ((0, _platformFeatureFlags.fg)('platform-datasources-enable-two-way-sync')) {
+        return (0, _react2.jsx)(_styled2.InlineEditableTableCell, {
+          key: cellKey,
+          "data-testid": testId && "".concat(testId, "--cell-").concat(cellIndex),
+          colSpan: isEditable && isLastCell ? 2 : undefined
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+          ,
+          style: loadingRowStyle,
+          css: [wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(cellKey) ? null : truncateStyles]
+        }, content);
+      } else {
+        return (0, _react2.jsx)(_styled2.TableCell, {
+          key: cellKey,
+          "data-testid": testId && "".concat(testId, "--cell-").concat(cellIndex),
+          colSpan: isEditable && isLastCell ? 2 : undefined
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+          ,
+          style: loadingRowStyle,
+          css: [wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(cellKey) ? null : truncateStyles]
+        }, content);
+      }
     }));
   }))));
 };

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

@@ -4,12 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withTablePluginPrefix = exports.withTablePluginHeaderPrefix = exports.withTablePluginBodyPrefix = exports.fieldTextFontSize = exports.TableHeading = exports.TableCell = exports.Table = exports.ScrollableContainerHeight = void 0;
+exports.withTablePluginPrefix = exports.withTablePluginHeaderPrefix = exports.withTablePluginBodyPrefix = exports.fieldTextFontSize = exports.TableHeading = exports.TableCell = exports.Table = exports.ScrollableContainerHeight = exports.InlineEditableTableCell = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _colors = require("@atlaskit/theme/colors");
 var _typography = require("@atlaskit/theme/typography");
-var _styled$th, _styled$td; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var _styled$th, _styled$td, _styled$td2; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var ScrollableContainerHeight = exports.ScrollableContainerHeight = 590;
 var fieldTextFontSize = exports.fieldTextFontSize = "var(--ds-font-body, ".concat(_typography.fontFallback.body.medium, ")");
 
@@ -93,4 +93,23 @@ var TableCell = exports.TableCell = _styled.default.td((_styled$td = {}, (0, _de
   paddingRight: "var(--ds-space-100, 8px)"
 }), (0, _defineProperty2.default)(_styled$td, "& [data-testid='inline-card-icon-and-title'], " + "& [data-testid='button-connect-account'] > span", {
   whiteSpace: 'unset'
-}), _styled$td));
+}), _styled$td));
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- To migrate as part of go/ui-styling-standard
+var InlineEditableTableCell = exports.InlineEditableTableCell = _styled.default.td((_styled$td2 = {}, (0, _defineProperty2.default)(_styled$td2, "".concat(withTablePluginBodyPrefix()), {
+  /* First section here is to override things editor table plugin css defines */
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  font: fieldTextFontSize,
+  padding: "var(--ds-space-0, 0)".concat(" ", "var(--ds-space-0, 0)"),
+  border: 0,
+  minWidth: 'auto',
+  verticalAlign: 'inherit',
+  boxSizing: 'border-box',
+  borderRight: "0.5px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")")),
+  borderBottom: "0.5px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")")),
+  overflow: 'hidden'
+}), (0, _defineProperty2.default)(_styled$td2, "".concat(withTablePluginBodyPrefix('&:last-child')), {
+  borderRight: 0
+}), (0, _defineProperty2.default)(_styled$td2, "& [data-testid='inline-card-icon-and-title'], " + "& [data-testid='button-connect-account'] > span", {
+  whiteSpace: 'unset'
+}), _styled$td2));

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

@@ -7,35 +7,28 @@ Object.defineProperty(exports, "__esModule", {
 exports.TableCellContent = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _primitives = require("@atlaskit/primitives");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _state = require("../../../state");
 var _renderType = require("../render-type");
 var _truncateTextTag = require("../truncate-text-tag");
-var TableCellContent = exports.TableCellContent = function TableCellContent(_ref) {
-  var _rowData$columnKey;
+var truncateTextStyles = (0, _primitives.xcss)({
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+  width: '100%'
+});
+var TooltipWrapper = function TooltipWrapper(_ref) {
   var columnKey = _ref.columnKey,
-    columnType = _ref.columnType,
-    id = _ref.id,
-    renderItem = _ref.renderItem,
-    wrappedColumnKeys = _ref.wrappedColumnKeys;
+    _ref$datasourceTypeWi = _ref.datasourceTypeWithValues,
+    type = _ref$datasourceTypeWi.type,
+    values = _ref$datasourceTypeWi.values,
+    wrappedColumnKeys = _ref.wrappedColumnKeys,
+    children = _ref.children;
   var intl = (0, _reactIntlNext.useIntl)();
-  var rowData = (0, _state.useDatasourceItem)({
-    id: id
-  });
-  if (!rowData || !columnKey || !rowData[columnKey]) {
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
-  }
-
-  // Need to make sure we keep falsy values like 0 and '', as well as the boolean false.
-  var value = (_rowData$columnKey = rowData[columnKey]) === null || _rowData$columnKey === void 0 ? void 0 : _rowData$columnKey.data;
-  var values = Array.isArray(value) ? value : [value];
-  var renderedValues = renderItem({
-    type: columnType,
-    values: values
-  });
   var stringifiedContent = values.map(function (value) {
     return (0, _renderType.stringifyType)({
-      type: columnType,
+      type: type,
       value: value
     }, intl.formatMessage, intl.formatDate);
   }).filter(function (value) {
@@ -48,7 +41,89 @@ var TableCellContent = exports.TableCellContent = function TableCellContent(_ref
       tag: _truncateTextTag.TruncateTextTag,
       content: stringifiedContent,
       testId: "issues-table-cell-tooltip"
-    }, renderedValues);
+    }, children);
+  }
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
+};
+var ReadOnlyCell = function ReadOnlyCell(_ref2) {
+  var _rowData$columnKey;
+  var id = _ref2.id,
+    columnType = _ref2.columnType,
+    _ref2$wrappedColumnKe = _ref2.wrappedColumnKeys,
+    wrappedColumnKeys = _ref2$wrappedColumnKe === void 0 ? [] : _ref2$wrappedColumnKe,
+    renderItem = _ref2.renderItem,
+    columnKey = _ref2.columnKey;
+  var rowData = (0, _state.useDatasourceItem)({
+    id: id
+  });
+  if (!rowData || !columnKey || !rowData[columnKey]) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+  }
+
+  // Need to make sure we keep falsy values like 0 and '', as well as the boolean false.
+  var value = (_rowData$columnKey = rowData[columnKey]) === null || _rowData$columnKey === void 0 ? void 0 : _rowData$columnKey.data;
+  var values = Array.isArray(value) ? value : [value];
+  var datasourceTypeWithValues = {
+    type: columnType,
+    values: values
+  };
+  return /*#__PURE__*/_react.default.createElement(TooltipWrapper, {
+    columnKey: columnKey,
+    datasourceTypeWithValues: datasourceTypeWithValues,
+    wrappedColumnKeys: wrappedColumnKeys
+  }, renderItem(datasourceTypeWithValues));
+};
+var InlineEditableCell = function InlineEditableCell(_ref3) {
+  var _rowData$columnKey2;
+  var id = _ref3.id,
+    columnKey = _ref3.columnKey,
+    columnType = _ref3.columnType,
+    renderItem = _ref3.renderItem,
+    wrappedColumnKeys = _ref3.wrappedColumnKeys;
+  var rowData = (0, _state.useDatasourceItem)({
+    id: id
+  });
+  if (!rowData || !columnKey || !rowData[columnKey]) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
   }
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderedValues);
+
+  // 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(TooltipWrapper, {
+    columnKey: columnKey,
+    datasourceTypeWithValues: datasourceTypeWithValues,
+    wrappedColumnKeys: wrappedColumnKeys
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    testId: 'inline-edit-read-view',
+    paddingInline: 'space.100',
+    paddingBlock: 'space.050',
+    xcss: truncateTextStyles
+  }, renderItem(datasourceTypeWithValues)));
+};
+var TableCellContent = exports.TableCellContent = function TableCellContent(_ref4) {
+  var columnKey = _ref4.columnKey,
+    columnType = _ref4.columnType,
+    id = _ref4.id,
+    renderItem = _ref4.renderItem,
+    wrappedColumnKeys = _ref4.wrappedColumnKeys;
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+  var renderedContent = (0, _platformFeatureFlags.fg)('platform-datasources-enable-two-way-sync') ? /*#__PURE__*/_react.default.createElement(InlineEditableCell, {
+    id: id,
+    columnKey: columnKey,
+    columnType: columnType,
+    renderItem: renderItem,
+    wrappedColumnKeys: wrappedColumnKeys
+  }) : /*#__PURE__*/_react.default.createElement(ReadOnlyCell, {
+    id: id,
+    columnKey: columnKey,
+    columnType: columnType,
+    wrappedColumnKeys: wrappedColumnKeys,
+    renderItem: renderItem
+  });
+  return renderedContent;
 };

package/dist/es2019/analytics/generated/use-analytics-events.js

@@ -3,7 +3,7 @@
  *
  * Generates Typescript types for analytics events from analytics.spec.yaml
  *
- * @codegen <<SignedSource::415836762b378b7d79f3aff4ba051c14>>
+ * @codegen <<SignedSource::21ae373abad7c370a8682ddcd3a7ed21>>
  * @codegenCommand yarn workspace @atlassian/analytics-tooling run analytics:codegen link-datasource
  */
 import { useCallback } from 'react';

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

@@ -24,6 +24,7 @@ import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/elem
 import { pointerOutsideOfPreview } from '@atlaskit/pragmatic-drag-and-drop/element/pointer-outside-of-preview';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
 import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
+import { useDatasourceAnalyticsEvents } from '../../analytics';
 import { GlyphPlaceholder, UnwrapTextIcon, WrapTextIcon } from './custom-icons';
 import { issueLikeTableMessages } from './messages';
 import { TableHeading } from './styled';
@@ -105,6 +106,9 @@ export const DraggableTableHeading = ({
   isWrapped,
   onIsWrappedChange
 }) => {
+  const {
+    fireEvent
+  } = useDatasourceAnalyticsEvents();
   const mainHeaderCellRef = useRef(null);
   const columnResizeHandleRef = useRef(null);
   const [state, setState] = useState(idleState);
@@ -311,7 +315,18 @@ export const DraggableTableHeading = ({
   const onDropdownOpenChange = useCallback(({
     isOpen
   }) => setIsDropdownOpen(isOpen), []);
-  const toggleWrap = useCallback(() => onIsWrappedChange && onIsWrappedChange(!(isWrapped || false)), [isWrapped, onIsWrappedChange]);
+  const toggleWrap = useCallback(() => {
+    if (!onIsWrappedChange) {
+      return;
+    }
+    const nextIsWrap = !(isWrapped || false);
+    if (nextIsWrap) {
+      fireEvent('ui.button.clicked.wrap', {});
+    } else {
+      fireEvent('ui.button.clicked.unwrap', {});
+    }
+    onIsWrappedChange(nextIsWrap);
+  }, [fireEvent, isWrapped, onIsWrappedChange]);
   return jsx(TableHeading, {
     ref: mainHeaderCellRef,
     "data-testid": `${id}-column-heading`,

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

@@ -30,7 +30,7 @@ import { DragColumnPreview } from './drag-column-preview';
 import { DraggableTableHeading } from './draggable-table-heading';
 import TableEmptyState from './empty-state';
 import { renderType, stringifyType } from './render-type';
-import { Table, TableCell, TableHeading, withTablePluginHeaderPrefix } from './styled';
+import { InlineEditableTableCell, Table, TableCell, TableHeading, withTablePluginHeaderPrefix } from './styled';
 import { TableCellContent } from './table-cell-content';
 import { TruncateTextTag } from './truncate-text-tag';
 import { useIsOnScreen } from './useIsOnScreen';
@@ -457,7 +457,9 @@ export const IssueLikeDataTableView = ({
       }
     }));
   }, [visibleColumnKeys, onVisibleColumnKeysChange, tableId, hasData]);
-  const tableRows = useMemo(() => fg('enable_datasource_react_sweet_state') ? itemIds.map((id, rowIndex) => {
+  const tableRows = useMemo(() =>
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+  fg('enable_datasource_react_sweet_state') ? itemIds.map((id, rowIndex) => {
     return {
       key: id,
       cells: visibleSortedColumns.map(({
@@ -678,15 +680,29 @@ export const IssueLikeDataTableView = ({
         paddingBlock: "var(--ds-space-100, 8px)"
       };
     }
-    return jsx(TableCell, {
-      key: cellKey,
-      "data-testid": testId && `${testId}--cell-${cellIndex}`,
-      colSpan: isEditable && isLastCell ? 2 : undefined
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-      ,
-      style: loadingRowStyle,
-      css: [wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(cellKey) ? null : truncateStyles]
-    }, content);
+
+    // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+    if (fg('platform-datasources-enable-two-way-sync')) {
+      return jsx(InlineEditableTableCell, {
+        key: cellKey,
+        "data-testid": testId && `${testId}--cell-${cellIndex}`,
+        colSpan: isEditable && isLastCell ? 2 : undefined
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        ,
+        style: loadingRowStyle,
+        css: [wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(cellKey) ? null : truncateStyles]
+      }, content);
+    } else {
+      return jsx(TableCell, {
+        key: cellKey,
+        "data-testid": testId && `${testId}--cell-${cellIndex}`,
+        colSpan: isEditable && isLastCell ? 2 : undefined
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        ,
+        style: loadingRowStyle,
+        css: [wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(cellKey) ? null : truncateStyles]
+      }, content);
+    }
   }))))));
 };
 export const EmptyState = TableEmptyState;

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

@@ -108,4 +108,32 @@ export const TableCell = styled.td({
   ["& [data-testid='inline-card-icon-and-title'], " + "& [data-testid='button-connect-account'] > span"]: {
     whiteSpace: 'unset'
   }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- To migrate as part of go/ui-styling-standard
+export const InlineEditableTableCell = styled.td({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+  [`${withTablePluginBodyPrefix()}`]: {
+    /* First section here is to override things editor table plugin css defines */
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    font: fieldTextFontSize,
+    padding: `${"var(--ds-space-0, 0)"} ${"var(--ds-space-0, 0)"}`,
+    border: 0,
+    minWidth: 'auto',
+    verticalAlign: 'inherit',
+    boxSizing: 'border-box',
+    borderRight: `0.5px solid ${`var(--ds-border, ${N40})`}`,
+    borderBottom: `0.5px solid ${`var(--ds-border, ${N40})`}`,
+    overflow: 'hidden'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+  [`${withTablePluginBodyPrefix('&:last-child')}`]: {
+    borderRight: 0
+  },
+  // Inline smart links are pretty opinionated about word-wrapping.
+  // We want it to be controlled by user, so we make it overflow and truncate by default.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  ["& [data-testid='inline-card-icon-and-title'], " + "& [data-testid='button-connect-account'] > span"]: {
+    whiteSpace: 'unset'
+  }
 });