@atlaskit/link-datasource 1.19.40 → 1.19.41

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/link-datasource
 
+## 1.19.41
+
+### Patch Changes
+
+- [#65779](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/65779) [`a68623048896`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a68623048896) - Improve handling of column resizing and remove standard table css styles bleeding to datasource table when it is inside table
+
 ## 1.19.40
 
 ### Patch Changes

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

@@ -20,7 +20,7 @@ var _disableNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/util/
 var _offsetFromPointer = require("@atlaskit/pragmatic-drag-and-drop/util/offset-from-pointer");
 var _setCustomNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview");
 var _styled = require("./styled");
-var _index = require("./index");
+var _utils = require("./utils");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */
 var verticallyAlignedStyles = (0, _react2.css)({
@@ -248,9 +248,6 @@ var DraggableTableHeading = exports.DraggableTableHeading = function DraggableTa
 
         // Set the width of our header being resized
         var proposedWidth = initialWidth + relativeDistanceX;
-        if (initialWidth >= _index.COLUMN_MIN_WIDTH && proposedWidth < _index.COLUMN_MIN_WIDTH) {
-          proposedWidth = _index.COLUMN_MIN_WIDTH;
-        }
 
         // We update width css directly live
         mainHeaderCell.style.setProperty('width', "".concat(proposedWidth, "px"));
@@ -259,24 +256,24 @@ var DraggableTableHeading = exports.DraggableTableHeading = function DraggableTa
         _cancelUnhandled.cancelUnhandled.stop();
         setState(idleState);
         if (onWidthChange) {
-          // We use element's css value as a source of truth (compare to another Ref)
-          var currentWidthPx = mainHeaderCell.style.getPropertyValue('width');
-          onWidthChange(+currentWidthPx.slice(0, -2));
+          var cssWidth = +mainHeaderCell.style.getPropertyValue('width').slice(0, -2);
+          if (cssWidth < _utils.COLUMN_MIN_WIDTH) {
+            cssWidth = _utils.COLUMN_MIN_WIDTH;
+          }
+          onWidthChange(cssWidth);
         }
       }
     });
   }, [id, index, onWidthChange, state, tableId, width]);
   return (0, _react2.jsx)(_styled.TableHeading, {
     ref: mainHeaderCellRef,
-    className: "has-column-picker",
     "data-testid": "".concat(id, "-column-heading"),
     style: _objectSpread({
       cursor: 'grab'
-    }, onWidthChange ? {
+    }, (0, _utils.getWidthCss)({
+      shouldUseWidth: !!onWidthChange,
       width: width
-    } : {
-      maxWidth: width
-    })
+    }))
   }, onWidthChange ? (0, _react2.jsx)("div", {
     ref: columnResizeHandleRef,
     css: [resizerStyles, state.type === 'resizing' && resizingStyles],

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.scrollableContainerShadowsCssComponents = exports.getOrderedColumns = exports.IssueLikeDataTableView = exports.EmptyState = exports.COLUMN_MIN_WIDTH = void 0;
+exports.scrollableContainerShadowsCssComponents = exports.getOrderedColumns = exports.IssueLikeDataTableView = exports.EmptyState = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -24,6 +24,7 @@ var _reorderWithEdge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/util/re
 var _pragmaticDragAndDropReactBeautifulDndAutoscroll = require("@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll");
 var _element = require("@atlaskit/pragmatic-drag-and-drop/adapter/element");
 var _combine = require("@atlaskit/pragmatic-drag-and-drop/util/combine");
+var _primitives = require("@atlaskit/primitives");
 var _colors = require("@atlaskit/theme/colors");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _ufoExperiences = require("../../analytics/ufoExperiences");
@@ -35,7 +36,8 @@ var _emptyState = _interopRequireDefault(require("./empty-state"));
 var _renderType = require("./render-type");
 var _styled2 = require("./styled");
 var _useIsOnScreen = require("./useIsOnScreen");
-var _templateObject;
+var _utils = require("./utils");
+var _templateObject, _templateObject2;
 /** @jsx jsx */
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -51,21 +53,8 @@ var truncateTextStyles = (0, _react2.css)({
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
-var ColumnPickerHeader = _styled.default.th(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 56px;\n  z-index: 10;\n  position: sticky;\n  right: calc(-1 * ", ");\n  background-color: ", ";\n  border-bottom: 2px solid ", "; /* It is required to have solid (not half-transparent) color because of this gradient business below */\n\n  padding-right: ", ";\n\n  background: linear-gradient(\n    90deg,\n    rgba(255, 255, 255, 0) 0%,\n    ", " 10%\n  );\n  vertical-align: middle; /* Keeps dropdown button in the middle */\n  &:last-of-type {\n    padding-right: ", ";\n  }\n  text-align: right; /* In case when TH itself is bigger we want to keep picker at the right side */\n"])), tableSidePadding, "var(--ds-elevation-surface-current, #FFF)", "var(--ds-border, ".concat(_colors.N40, ")"), "var(--ds-space-100, 4px)", "var(--ds-elevation-surface-current, #FFF)", tableSidePadding);
-var truncatedCellStyles = (0, _react2.css)({
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  borderRight: "0.5px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")")),
-  borderBottom: "0.5px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")")),
-  '&:first-child': {
-    paddingLeft: "var(--ds-space-100, 8px)"
-  },
-  '&:last-child': {
-    borderRight: 0,
-    paddingRight: "var(--ds-space-100, 8px)"
-  }
-});
+var ColumnPickerHeader = _styled.default.th(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", " {\n    box-sizing: content-box;\n    border: 0;\n\n    width: 56px;\n    z-index: 10;\n    position: sticky;\n    right: calc(-1 * ", ");\n    background-color: ", ";\n    border-bottom: 2px solid ", "; /* It is required to have solid (not half-transparent) color because of this gradient business below */\n\n    padding-right: ", ";\n\n    background: linear-gradient(\n      90deg,\n      rgba(255, 255, 255, 0) 0%,\n      ", " 10%\n    );\n    vertical-align: middle; /* Keeps dropdown button in the middle */\n    text-align: right; /* In case when TH itself is bigger we want to keep picker at the right side */\n  }\n\n  ", " {\n    padding-right: ", ";\n  }\n"])), (0, _styled2.withTablePluginHeaderPrefix)(), tableSidePadding, "var(--ds-elevation-surface-current, #FFF)", "var(--ds-border, ".concat(_colors.N40, ")"), "var(--ds-space-100, 4px)", "var(--ds-elevation-surface-current, #FFF)", (0, _styled2.withTablePluginHeaderPrefix)('&:last-of-type'), tableSidePadding);
+var TableCell = _styled.default.td(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", " {\n    /* First section here is to override things editor table plugin css defines */\n    padding: ", " ", ";\n    border: 0;\n    min-width: auto;\n    vertical-align: inherit;\n    box-sizing: border-box;\n\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    border-right: 0.5px solid ", ";\n    border-bottom: 0.5px solid ", ";\n  }\n\n  ", " {\n    padding-left: ", ";\n  }\n\n  ", " {\n    border-right: 0;\n    padding-right: ", ";\n  }\n"])), (0, _styled2.withTablePluginBodyPrefix)(), "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", "var(--ds-border, ".concat(_colors.N40, ")"), "var(--ds-border, ".concat(_colors.N40, ")"), (0, _styled2.withTablePluginBodyPrefix)('&:first-child'), "var(--ds-space-100, 8px)", (0, _styled2.withTablePluginBodyPrefix)('&:last-child'), "var(--ds-space-100, 8px)");
 var tableContainerStyles = (0, _react2.css)({
   borderRadius: 'inherit',
   borderBottomLeftRadius: 0,
@@ -195,16 +184,14 @@ var getOrderedColumns = exports.getOrderedColumns = function getOrderedColumns(c
   }).sort(sortColumns);
   return [].concat((0, _toConsumableArray2.default)(visibleColumns), (0, _toConsumableArray2.default)(alphabeticallySortedInvisibleColumns));
 };
-var BASE_WIDTH = 8;
-var DEFAULT_WIDTH = BASE_WIDTH * 22;
-var COLUMN_MIN_WIDTH = exports.COLUMN_MIN_WIDTH = BASE_WIDTH * 3;
+var DEFAULT_WIDTH = _utils.COLUMN_BASE_WIDTH * 22;
 var keyBasedWidthMap = {
-  priority: BASE_WIDTH * 5,
-  status: BASE_WIDTH * 18,
-  summary: BASE_WIDTH * 45,
-  description: BASE_WIDTH * 31.25,
-  type: BASE_WIDTH * 5,
-  key: BASE_WIDTH * 13
+  priority: _utils.COLUMN_BASE_WIDTH * 5,
+  status: _utils.COLUMN_BASE_WIDTH * 18,
+  summary: _utils.COLUMN_BASE_WIDTH * 45,
+  description: _utils.COLUMN_BASE_WIDTH * 31,
+  type: _utils.COLUMN_BASE_WIDTH * 6,
+  key: _utils.COLUMN_BASE_WIDTH * 15
 };
 function getDefaultColumnWidth(key, type) {
   var keyBasedWidth = keyBasedWidthMap[key];
@@ -213,9 +200,9 @@ function getDefaultColumnWidth(key, type) {
   }
   switch (type) {
     case 'date':
-      return BASE_WIDTH * 14;
+      return _utils.COLUMN_BASE_WIDTH * 16;
     case 'icon':
-      return BASE_WIDTH * 5;
+      return _utils.COLUMN_BASE_WIDTH * 7;
     default:
       return DEFAULT_WIDTH;
   }
@@ -502,7 +489,8 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
       }
     }, _callee, null, [[3, 9]]);
   })), [parentContainerRenderInstanceId, extensionKey, hasFullSchema, onLoadDatasourceDetails]);
-  var shouldUseWidth = onColumnResize || columnCustomSizes;
+  var shouldUseWidth = !!(onColumnResize || columnCustomSizes);
+  var isEditable = onVisibleColumnKeysChange && hasData;
   return (0, _react2.jsx)("div", {
     /* There is required contentEditable={true} in editor-card-plugin
      * But this brakes how DND works. We set contentEditable={false} to allow DND to work
@@ -522,7 +510,8 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
     } : {}
   }, (0, _react2.jsx)("thead", {
     "data-testid": testId && "".concat(testId, "--head"),
-    css: [noDefaultBorderStyles, tableHeadStyles]
+    css: [noDefaultBorderStyles, tableHeadStyles],
+    className: !!onVisibleColumnKeysChange ? 'has-column-picker' : ''
   }, (0, _react2.jsx)("tr", {
     ref: tableHeaderRowRef
   }, headerColumns.map(function (_ref13, cellIndex) {
@@ -537,7 +526,7 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
       level: "h200",
       as: 'span'
     }, content));
-    if (onVisibleColumnKeysChange && hasData) {
+    if (isEditable) {
       var _containerRef$current3;
       var previewRows = tableRows.map(function (_ref14) {
         var cells = _ref14.cells;
@@ -566,14 +555,12 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
     } else {
       return (0, _react2.jsx)(_styled2.TableHeading, {
         key: key,
-        className: !!onVisibleColumnKeysChange ? 'has-column-picker' : '',
         "data-testid": "".concat(key, "-column-heading"),
-        style: shouldUseWidth ? {
+        style: (0, _utils.getWidthCss)({
+          shouldUseWidth: shouldUseWidth,
           width: width
-        } : {
-          maxWidth: width
-        }
-      }, heading);
+        })
+      }, (0, _react2.jsx)(_primitives.Flex, null, heading));
     }
   }), onVisibleColumnKeysChange && (0, _react2.jsx)(ColumnPickerHeader, null, (0, _react2.jsx)(_columnPicker.ColumnPicker, {
     columns: hasFullSchema ? orderedColumns : [],
@@ -596,22 +583,21 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
       var cellKey = _ref17.key,
         content = _ref17.content,
         width = _ref17.width;
-      var loadingRowStyle = shouldUseWidth ? {
+      var isLastCell = cellIndex === cells.length - 1;
+      var loadingRowStyle = (0, _utils.getWidthCss)({
+        shouldUseWidth: shouldUseWidth,
         width: width
-      } : {
-        maxWidth: width
-      };
+      });
       // extra padding is required around skeleton loader to avoid vertical jumps when data loads
       if (key !== null && key !== void 0 && key.includes('loading')) {
         loadingRowStyle = _objectSpread(_objectSpread({}, loadingRowStyle), {}, {
           paddingBlock: "var(--ds-space-100, 8px)"
         });
       }
-      return (0, _react2.jsx)("td", {
+      return (0, _react2.jsx)(TableCell, {
         key: cellKey,
         "data-testid": testId && "".concat(testId, "--cell-").concat(cellIndex),
-        colSpan: cellIndex + 1 === cells.length ? 2 : undefined,
-        css: truncatedCellStyles,
+        colSpan: isEditable && isLastCell ? 2 : undefined,
         style: loadingRowStyle
       }, content);
     }));

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TableHeading = exports.Table = exports.ScrollableContainerHeight = exports.FieldTextFontSize = void 0;
+exports.withTablePluginPrefix = exports.withTablePluginHeaderPrefix = exports.withTablePluginBodyPrefix = exports.TableHeading = exports.Table = exports.ScrollableContainerHeight = exports.FieldTextFontSize = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _colors = require("@atlaskit/theme/colors");
@@ -14,4 +14,17 @@ var FieldTextFontSize = exports.FieldTextFontSize = '14px';
 var Table = exports.Table = _styled.default.table(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n"])));
 var lineHeight = "var(--ds-font-lineHeight-300, 24px)";
 var verticalPadding = "var(--ds-space-025, 2px)";
-var TableHeading = exports.TableHeading = _styled.default.th(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  line-height: ", ";\n  padding: ", " ", ";\n  border-right: 0.5px solid ", ";\n  border-bottom: 2px solid ", ";\n  height: calc(", " * 2 + ", " * 2);\n  vertical-align: bottom;\n\n  &.has-column-picker:nth-last-of-type(2) {\n    border-right: 0;\n  }\n\n  &:first-child {\n    padding-left: ", ";\n  }\n\n  &:last-child {\n    border-right: 0;\n  }\n\n  & [data-testid='datasource-header-content--container'] {\n    width: 100%;\n    padding: ", " ", ";\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    white-space: normal;\n    overflow: hidden;\n    word-wrap: break-word;\n\n    &:hover {\n      background: ", ";\n      border-radius: 3px;\n    }\n  }\n"])), lineHeight, verticalPadding, "var(--ds-space-050, 4px)", "var(--ds-border, ".concat(_colors.N40, ")"), "var(--ds-border, ".concat(_colors.N40, ")"), lineHeight, verticalPadding, "var(--ds-space-050, 4px)", verticalPadding, "var(--ds-space-050, 4px)", "var(--ds-background-input-hovered, #F7F8F9)");
+
+/**
+ * This is a hack used to override styles that are leaking to our table html element
+ * from editor table plugin.
+ * This css prefix can be used in front of our main css rule to make its weight bigger
+ * and force make browser use it first and editor plugin css second.
+ */
+var withTablePluginPrefix = exports.withTablePluginPrefix = function withTablePluginPrefix(tableSection) {
+  var mainRule = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '&';
+  return "\n  .pm-table-wrapper > table ".concat(tableSection, " ").concat(mainRule, ",\n  .ProseMirror .pm-table-wrapper > table ").concat(tableSection, " ").concat(mainRule, ",\n  ").concat(mainRule, "\n");
+};
+var withTablePluginHeaderPrefix = exports.withTablePluginHeaderPrefix = withTablePluginPrefix.bind(null, 'thead');
+var withTablePluginBodyPrefix = exports.withTablePluginBodyPrefix = withTablePluginPrefix.bind(null, 'tbody');
+var TableHeading = exports.TableHeading = _styled.default.th(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", " {\n    border: 0;\n    position: relative;\n\n    /* This makes resizing work with out jumping due to padding + changes overall width for same default values. */\n    box-sizing: border-box;\n\n    line-height: ", ";\n    padding: ", " ", ";\n    border-right: 0.5px solid ", ";\n    border-bottom: 2px solid ", ";\n\n    /*\n      lineHeight * 2 -> Max height of two lined header\n      verticalPadding * 2 -> padding for this component itself\n      verticalPadding * 2 -> padding inside span (--container)\n      2px -> Bottom border\n      Last two terms are needed because of border-box box sizing.\n    */\n    height: calc(", " * 2 + ", " * 4 + 2px);\n    vertical-align: bottom;\n    background-color: ", ";\n  }\n\n  ", " {\n    border-right: 0;\n  }\n\n  ", " {\n    padding-left: ", ";\n  }\n\n  ", " {\n    border-right: 0;\n  }\n\n  & [data-testid='datasource-header-content--container'] {\n    width: 100%;\n    padding: ", " ", ";\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    white-space: normal;\n    overflow: hidden;\n    word-wrap: break-word;\n\n    &:hover {\n      background: ", ";\n      border-radius: 3px;\n    }\n  }\n"])), withTablePluginHeaderPrefix(), lineHeight, verticalPadding, "var(--ds-space-050, 4px)", "var(--ds-border, ".concat(_colors.N40, ")"), "var(--ds-border, ".concat(_colors.N40, ")"), lineHeight, verticalPadding, "var(--ds-elevation-surface-current, #FFF)", withTablePluginPrefix('', 'thead.has-column-picker &:nth-last-of-type(2)'), withTablePluginHeaderPrefix('&:first-child'), "var(--ds-space-050, 4px)", withTablePluginHeaderPrefix('&:last-child'), verticalPadding, "var(--ds-space-050, 4px)", "var(--ds-background-input-hovered, #F7F8F9)");

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

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getWidthCss = exports.COLUMN_MIN_WIDTH = exports.COLUMN_BASE_WIDTH = void 0;
+var COLUMN_BASE_WIDTH = exports.COLUMN_BASE_WIDTH = 8;
+var COLUMN_MIN_WIDTH = exports.COLUMN_MIN_WIDTH = COLUMN_BASE_WIDTH * 3;
+/**
+ * Generate width related portion of css for table cell.
+ *
+ * @param shouldUseWidth boolean argument defines if a given width is user defined / baked in value
+ * or rather default width that should be treated as a maximum width. When table inserted initially
+ * and no user custom width defined we set this value to `false`. As soon as user changes any of the
+ * column widths we treat all width as custom hardcoded widths.
+ * @param width
+ */
+var getWidthCss = exports.getWidthCss = function getWidthCss(_ref) {
+  var shouldUseWidth = _ref.shouldUseWidth,
+    width = _ref.width;
+  return shouldUseWidth ? {
+    width: width
+  } : {
+    maxWidth: width
+  };
+};

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

@@ -12,7 +12,7 @@ import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util
 import { offsetFromPointer } from '@atlaskit/pragmatic-drag-and-drop/util/offset-from-pointer';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview';
 import { TableHeading } from './styled';
-import { COLUMN_MIN_WIDTH } from './index';
+import { COLUMN_MIN_WIDTH, getWidthCss } from './utils';
 const verticallyAlignedStyles = css({
   display: 'flex',
   alignItems: 'center',
@@ -236,9 +236,6 @@ export const DraggableTableHeading = ({
 
         // Set the width of our header being resized
         let proposedWidth = initialWidth + relativeDistanceX;
-        if (initialWidth >= COLUMN_MIN_WIDTH && proposedWidth < COLUMN_MIN_WIDTH) {
-          proposedWidth = COLUMN_MIN_WIDTH;
-        }
 
         // We update width css directly live
         mainHeaderCell.style.setProperty('width', `${proposedWidth}px`);
@@ -247,23 +244,23 @@ export const DraggableTableHeading = ({
         cancelUnhandled.stop();
         setState(idleState);
         if (onWidthChange) {
-          // We use element's css value as a source of truth (compare to another Ref)
-          const currentWidthPx = mainHeaderCell.style.getPropertyValue('width');
-          onWidthChange(+currentWidthPx.slice(0, -2));
+          let cssWidth = +mainHeaderCell.style.getPropertyValue('width').slice(0, -2);
+          if (cssWidth < COLUMN_MIN_WIDTH) {
+            cssWidth = COLUMN_MIN_WIDTH;
+          }
+          onWidthChange(cssWidth);
         }
       }
     });
   }, [id, index, onWidthChange, state, tableId, width]);
   return jsx(TableHeading, {
     ref: mainHeaderCellRef,
-    className: "has-column-picker",
     "data-testid": `${id}-column-heading`,
     style: {
       cursor: 'grab',
-      ...(onWidthChange ? {
+      ...getWidthCss({
+        shouldUseWidth: !!onWidthChange,
         width
-      } : {
-        maxWidth: width
       })
     }
   }, onWidthChange ? jsx("div", {

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

@@ -12,6 +12,7 @@ import { reorderWithEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/util/r
 import { autoScroller } from '@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/util/combine';
+import { Flex } from '@atlaskit/primitives';
 import { N40 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
 import { startUfoExperience, succeedUfoExperience } from '../../analytics/ufoExperiences';
@@ -21,8 +22,9 @@ import { DragColumnPreview } from './drag-column-preview';
 import { DraggableTableHeading } from './draggable-table-heading';
 import TableEmptyState from './empty-state';
 import { fallbackRenderType, stringifyType } from './render-type';
-import { Table, TableHeading } from './styled';
+import { Table, TableHeading, withTablePluginBodyPrefix, withTablePluginHeaderPrefix } from './styled';
 import { useIsOnScreen } from './useIsOnScreen';
+import { COLUMN_BASE_WIDTH, getWidthCss } from './utils';
 const tableSidePadding = "var(--ds-space-200, 16px)";
 const tableHeadStyles = css({
   background: "var(--ds-elevation-surface-current, #FFF)",
@@ -36,40 +38,57 @@ const truncateTextStyles = css({
   whiteSpace: 'nowrap'
 });
 const ColumnPickerHeader = styled.th`
-  width: 56px;
-  z-index: 10;
-  position: sticky;
-  right: calc(-1 * ${tableSidePadding});
-  background-color: ${"var(--ds-elevation-surface-current, #FFF)"};
-  border-bottom: 2px solid ${`var(--ds-border, ${N40})`}; /* It is required to have solid (not half-transparent) color because of this gradient business below */
+  ${withTablePluginHeaderPrefix()} {
+    box-sizing: content-box;
+    border: 0;
 
-  padding-right: ${"var(--ds-space-100, 4px)"};
+    width: 56px;
+    z-index: 10;
+    position: sticky;
+    right: calc(-1 * ${tableSidePadding});
+    background-color: ${"var(--ds-elevation-surface-current, #FFF)"};
+    border-bottom: 2px solid ${`var(--ds-border, ${N40})`}; /* It is required to have solid (not half-transparent) color because of this gradient business below */
 
-  background: linear-gradient(
-    90deg,
-    rgba(255, 255, 255, 0) 0%,
-    ${"var(--ds-elevation-surface-current, #FFF)"} 10%
-  );
-  vertical-align: middle; /* Keeps dropdown button in the middle */
-  &:last-of-type {
+    padding-right: ${"var(--ds-space-100, 4px)"};
+
+    background: linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0) 0%,
+      ${"var(--ds-elevation-surface-current, #FFF)"} 10%
+    );
+    vertical-align: middle; /* Keeps dropdown button in the middle */
+    text-align: right; /* In case when TH itself is bigger we want to keep picker at the right side */
+  }
+
+  ${withTablePluginHeaderPrefix('&:last-of-type')} {
     padding-right: ${tableSidePadding};
   }
-  text-align: right; /* In case when TH itself is bigger we want to keep picker at the right side */
 `;
-const truncatedCellStyles = css({
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  borderRight: `0.5px solid ${`var(--ds-border, ${N40})`}`,
-  borderBottom: `0.5px solid ${`var(--ds-border, ${N40})`}`,
-  '&:first-child': {
-    paddingLeft: `${"var(--ds-space-100, 8px)"}`
-  },
-  '&:last-child': {
-    borderRight: 0,
-    paddingRight: `${"var(--ds-space-100, 8px)"}`
+const TableCell = styled.td`
+  ${withTablePluginBodyPrefix()} {
+    /* First section here is to override things editor table plugin css defines */
+    padding: ${"var(--ds-space-050, 4px)"} ${"var(--ds-space-100, 8px)"};
+    border: 0;
+    min-width: auto;
+    vertical-align: inherit;
+    box-sizing: border-box;
+
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    border-right: 0.5px solid ${`var(--ds-border, ${N40})`};
+    border-bottom: 0.5px solid ${`var(--ds-border, ${N40})`};
   }
-});
+
+  ${withTablePluginBodyPrefix('&:first-child')} {
+    padding-left: ${"var(--ds-space-100, 8px)"};
+  }
+
+  ${withTablePluginBodyPrefix('&:last-child')} {
+    border-right: 0;
+    padding-right: ${"var(--ds-space-100, 8px)"};
+  }
+`;
 const tableContainerStyles = css({
   borderRadius: 'inherit',
   borderBottomLeftRadius: 0,
@@ -233,16 +252,14 @@ export const getOrderedColumns = (columns, visibleColumnKeys) => {
   const alphabeticallySortedInvisibleColumns = columns.filter(column => !visibleColumnKeys.includes(column.key)).sort(sortColumns);
   return [...visibleColumns, ...alphabeticallySortedInvisibleColumns];
 };
-const BASE_WIDTH = 8;
-const DEFAULT_WIDTH = BASE_WIDTH * 22;
-export const COLUMN_MIN_WIDTH = BASE_WIDTH * 3;
+const DEFAULT_WIDTH = COLUMN_BASE_WIDTH * 22;
 const keyBasedWidthMap = {
-  priority: BASE_WIDTH * 5,
-  status: BASE_WIDTH * 18,
-  summary: BASE_WIDTH * 45,
-  description: BASE_WIDTH * 31.25,
-  type: BASE_WIDTH * 5,
-  key: BASE_WIDTH * 13
+  priority: COLUMN_BASE_WIDTH * 5,
+  status: COLUMN_BASE_WIDTH * 18,
+  summary: COLUMN_BASE_WIDTH * 45,
+  description: COLUMN_BASE_WIDTH * 31,
+  type: COLUMN_BASE_WIDTH * 6,
+  key: COLUMN_BASE_WIDTH * 15
 };
 function getDefaultColumnWidth(key, type) {
   const keyBasedWidth = keyBasedWidthMap[key];
@@ -251,9 +268,9 @@ function getDefaultColumnWidth(key, type) {
   }
   switch (type) {
     case 'date':
-      return BASE_WIDTH * 14;
+      return COLUMN_BASE_WIDTH * 16;
     case 'icon':
-      return BASE_WIDTH * 5;
+      return COLUMN_BASE_WIDTH * 7;
     default:
       return DEFAULT_WIDTH;
   }
@@ -490,7 +507,8 @@ export const IssueLikeDataTableView = ({
       setHasFullSchema(false);
     }
   }, [parentContainerRenderInstanceId, extensionKey, hasFullSchema, onLoadDatasourceDetails]);
-  const shouldUseWidth = onColumnResize || columnCustomSizes;
+  const shouldUseWidth = !!(onColumnResize || columnCustomSizes);
+  const isEditable = onVisibleColumnKeysChange && hasData;
   return jsx("div", {
     /* There is required contentEditable={true} in editor-card-plugin
      * But this brakes how DND works. We set contentEditable={false} to allow DND to work
@@ -510,7 +528,8 @@ export const IssueLikeDataTableView = ({
     } : {}
   }, jsx("thead", {
     "data-testid": testId && `${testId}--head`,
-    css: [noDefaultBorderStyles, tableHeadStyles]
+    css: [noDefaultBorderStyles, tableHeadStyles],
+    className: !!onVisibleColumnKeysChange ? 'has-column-picker' : ''
   }, jsx("tr", {
     ref: tableHeaderRowRef
   }, headerColumns.map(({
@@ -526,7 +545,7 @@ export const IssueLikeDataTableView = ({
       level: "h200",
       as: 'span'
     }, content));
-    if (onVisibleColumnKeysChange && hasData) {
+    if (isEditable) {
       var _containerRef$current3;
       const previewRows = tableRows.map(({
         cells
@@ -555,14 +574,12 @@ export const IssueLikeDataTableView = ({
     } else {
       return jsx(TableHeading, {
         key: key,
-        className: !!onVisibleColumnKeysChange ? 'has-column-picker' : '',
         "data-testid": `${key}-column-heading`,
-        style: shouldUseWidth ? {
+        style: getWidthCss({
+          shouldUseWidth,
           width
-        } : {
-          maxWidth: width
-        }
-      }, heading);
+        })
+      }, jsx(Flex, null, heading));
     }
   }), onVisibleColumnKeysChange && jsx(ColumnPickerHeader, null, jsx(ColumnPicker, {
     columns: hasFullSchema ? orderedColumns : [],
@@ -586,11 +603,11 @@ export const IssueLikeDataTableView = ({
     content,
     width
   }, cellIndex) => {
-    let loadingRowStyle = shouldUseWidth ? {
+    const isLastCell = cellIndex === cells.length - 1;
+    let loadingRowStyle = getWidthCss({
+      shouldUseWidth,
       width
-    } : {
-      maxWidth: width
-    };
+    });
     // extra padding is required around skeleton loader to avoid vertical jumps when data loads
     if (key !== null && key !== void 0 && key.includes('loading')) {
       loadingRowStyle = {
@@ -598,11 +615,10 @@ export const IssueLikeDataTableView = ({
         paddingBlock: "var(--ds-space-100, 8px)"
       };
     }
-    return jsx("td", {
+    return jsx(TableCell, {
       key: cellKey,
       "data-testid": testId && `${testId}--cell-${cellIndex}`,
-      colSpan: cellIndex + 1 === cells.length ? 2 : undefined,
-      css: truncatedCellStyles,
+      colSpan: isEditable && isLastCell ? 2 : undefined,
       style: loadingRowStyle
     }, content);
   }))))));

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

@@ -7,24 +7,54 @@ export const Table = styled.table`
 `;
 const lineHeight = "var(--ds-font-lineHeight-300, 24px)";
 const verticalPadding = "var(--ds-space-025, 2px)";
+
+/**
+ * This is a hack used to override styles that are leaking to our table html element
+ * from editor table plugin.
+ * This css prefix can be used in front of our main css rule to make its weight bigger
+ * and force make browser use it first and editor plugin css second.
+ */
+export const withTablePluginPrefix = (tableSection, mainRule = '&') => `
+  .pm-table-wrapper > table ${tableSection} ${mainRule},
+  .ProseMirror .pm-table-wrapper > table ${tableSection} ${mainRule},
+  ${mainRule}
+`;
+export const withTablePluginHeaderPrefix = withTablePluginPrefix.bind(null, 'thead');
+export const withTablePluginBodyPrefix = withTablePluginPrefix.bind(null, 'tbody');
 export const TableHeading = styled.th`
-  position: relative;
-  line-height: ${lineHeight};
-  padding: ${verticalPadding} ${"var(--ds-space-050, 4px)"};
-  border-right: 0.5px solid ${`var(--ds-border, ${N40})`};
-  border-bottom: 2px solid ${`var(--ds-border, ${N40})`};
-  height: calc(${lineHeight} * 2 + ${verticalPadding} * 2);
-  vertical-align: bottom;
-
-  &.has-column-picker:nth-last-of-type(2) {
+  ${withTablePluginHeaderPrefix()} {
+    border: 0;
+    position: relative;
+
+    /* This makes resizing work with out jumping due to padding + changes overall width for same default values. */
+    box-sizing: border-box;
+
+    line-height: ${lineHeight};
+    padding: ${verticalPadding} ${"var(--ds-space-050, 4px)"};
+    border-right: 0.5px solid ${`var(--ds-border, ${N40})`};
+    border-bottom: 2px solid ${`var(--ds-border, ${N40})`};
+
+    /*
+      lineHeight * 2 -> Max height of two lined header
+      verticalPadding * 2 -> padding for this component itself
+      verticalPadding * 2 -> padding inside span (--container)
+      2px -> Bottom border
+      Last two terms are needed because of border-box box sizing.
+    */
+    height: calc(${lineHeight} * 2 + ${verticalPadding} * 4 + 2px);
+    vertical-align: bottom;
+    background-color: ${"var(--ds-elevation-surface-current, #FFF)"};
+  }
+
+  ${withTablePluginPrefix('', 'thead.has-column-picker &:nth-last-of-type(2)')} {
     border-right: 0;
   }
 
-  &:first-child {
+  ${withTablePluginHeaderPrefix('&:first-child')} {
     padding-left: ${"var(--ds-space-050, 4px)"};
   }
 
-  &:last-child {
+  ${withTablePluginHeaderPrefix('&:last-child')} {
     border-right: 0;
   }
 

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

@@ -0,0 +1,19 @@
+export const COLUMN_BASE_WIDTH = 8;
+export const COLUMN_MIN_WIDTH = COLUMN_BASE_WIDTH * 3;
+/**
+ * Generate width related portion of css for table cell.
+ *
+ * @param shouldUseWidth boolean argument defines if a given width is user defined / baked in value
+ * or rather default width that should be treated as a maximum width. When table inserted initially
+ * and no user custom width defined we set this value to `false`. As soon as user changes any of the
+ * column widths we treat all width as custom hardcoded widths.
+ * @param width
+ */
+export const getWidthCss = ({
+  shouldUseWidth,
+  width
+}) => shouldUseWidth ? {
+  width
+} : {
+  maxWidth: width
+};

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

@@ -16,7 +16,7 @@ import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util
 import { offsetFromPointer } from '@atlaskit/pragmatic-drag-and-drop/util/offset-from-pointer';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview';
 import { TableHeading } from './styled';
-import { COLUMN_MIN_WIDTH } from './index';
+import { COLUMN_MIN_WIDTH, getWidthCss } from './utils';
 var verticallyAlignedStyles = css({
   display: 'flex',
   alignItems: 'center',
@@ -242,9 +242,6 @@ export var DraggableTableHeading = function DraggableTableHeading(_ref) {
 
         // Set the width of our header being resized
         var proposedWidth = initialWidth + relativeDistanceX;
-        if (initialWidth >= COLUMN_MIN_WIDTH && proposedWidth < COLUMN_MIN_WIDTH) {
-          proposedWidth = COLUMN_MIN_WIDTH;
-        }
 
         // We update width css directly live
         mainHeaderCell.style.setProperty('width', "".concat(proposedWidth, "px"));
@@ -253,24 +250,24 @@ export var DraggableTableHeading = function DraggableTableHeading(_ref) {
         cancelUnhandled.stop();
         setState(idleState);
         if (onWidthChange) {
-          // We use element's css value as a source of truth (compare to another Ref)
-          var currentWidthPx = mainHeaderCell.style.getPropertyValue('width');
-          onWidthChange(+currentWidthPx.slice(0, -2));
+          var cssWidth = +mainHeaderCell.style.getPropertyValue('width').slice(0, -2);
+          if (cssWidth < COLUMN_MIN_WIDTH) {
+            cssWidth = COLUMN_MIN_WIDTH;
+          }
+          onWidthChange(cssWidth);
         }
       }
     });
   }, [id, index, onWidthChange, state, tableId, width]);
   return jsx(TableHeading, {
     ref: mainHeaderCellRef,
-    className: "has-column-picker",
     "data-testid": "".concat(id, "-column-heading"),
     style: _objectSpread({
       cursor: 'grab'
-    }, onWidthChange ? {
+    }, getWidthCss({
+      shouldUseWidth: !!onWidthChange,
       width: width
-    } : {
-      maxWidth: width
-    })
+    }))
   }, onWidthChange ? jsx("div", {
     ref: columnResizeHandleRef,
     css: [resizerStyles, state.type === 'resizing' && resizingStyles],

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

@@ -4,7 +4,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
+var _templateObject, _templateObject2;
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -21,6 +21,7 @@ import { reorderWithEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/util/r
 import { autoScroller } from '@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/util/combine';
+import { Flex } from '@atlaskit/primitives';
 import { N40 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
 import { startUfoExperience, succeedUfoExperience } from '../../analytics/ufoExperiences';
@@ -30,8 +31,9 @@ import { DragColumnPreview } from './drag-column-preview';
 import { DraggableTableHeading } from './draggable-table-heading';
 import TableEmptyState from './empty-state';
 import { fallbackRenderType, stringifyType } from './render-type';
-import { Table, TableHeading } from './styled';
+import { Table, TableHeading, withTablePluginBodyPrefix, withTablePluginHeaderPrefix } from './styled';
 import { useIsOnScreen } from './useIsOnScreen';
+import { COLUMN_BASE_WIDTH, getWidthCss } from './utils';
 var tableSidePadding = "var(--ds-space-200, 16px)";
 var tableHeadStyles = css({
   background: "var(--ds-elevation-surface-current, #FFF)",
@@ -44,21 +46,8 @@ var truncateTextStyles = css({
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
-var ColumnPickerHeader = styled.th(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 56px;\n  z-index: 10;\n  position: sticky;\n  right: calc(-1 * ", ");\n  background-color: ", ";\n  border-bottom: 2px solid ", "; /* It is required to have solid (not half-transparent) color because of this gradient business below */\n\n  padding-right: ", ";\n\n  background: linear-gradient(\n    90deg,\n    rgba(255, 255, 255, 0) 0%,\n    ", " 10%\n  );\n  vertical-align: middle; /* Keeps dropdown button in the middle */\n  &:last-of-type {\n    padding-right: ", ";\n  }\n  text-align: right; /* In case when TH itself is bigger we want to keep picker at the right side */\n"])), tableSidePadding, "var(--ds-elevation-surface-current, #FFF)", "var(--ds-border, ".concat(N40, ")"), "var(--ds-space-100, 4px)", "var(--ds-elevation-surface-current, #FFF)", tableSidePadding);
-var truncatedCellStyles = css({
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  borderRight: "0.5px solid ".concat("var(--ds-border, ".concat(N40, ")")),
-  borderBottom: "0.5px solid ".concat("var(--ds-border, ".concat(N40, ")")),
-  '&:first-child': {
-    paddingLeft: "var(--ds-space-100, 8px)"
-  },
-  '&:last-child': {
-    borderRight: 0,
-    paddingRight: "var(--ds-space-100, 8px)"
-  }
-});
+var ColumnPickerHeader = styled.th(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", " {\n    box-sizing: content-box;\n    border: 0;\n\n    width: 56px;\n    z-index: 10;\n    position: sticky;\n    right: calc(-1 * ", ");\n    background-color: ", ";\n    border-bottom: 2px solid ", "; /* It is required to have solid (not half-transparent) color because of this gradient business below */\n\n    padding-right: ", ";\n\n    background: linear-gradient(\n      90deg,\n      rgba(255, 255, 255, 0) 0%,\n      ", " 10%\n    );\n    vertical-align: middle; /* Keeps dropdown button in the middle */\n    text-align: right; /* In case when TH itself is bigger we want to keep picker at the right side */\n  }\n\n  ", " {\n    padding-right: ", ";\n  }\n"])), withTablePluginHeaderPrefix(), tableSidePadding, "var(--ds-elevation-surface-current, #FFF)", "var(--ds-border, ".concat(N40, ")"), "var(--ds-space-100, 4px)", "var(--ds-elevation-surface-current, #FFF)", withTablePluginHeaderPrefix('&:last-of-type'), tableSidePadding);
+var TableCell = styled.td(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", " {\n    /* First section here is to override things editor table plugin css defines */\n    padding: ", " ", ";\n    border: 0;\n    min-width: auto;\n    vertical-align: inherit;\n    box-sizing: border-box;\n\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    border-right: 0.5px solid ", ";\n    border-bottom: 0.5px solid ", ";\n  }\n\n  ", " {\n    padding-left: ", ";\n  }\n\n  ", " {\n    border-right: 0;\n    padding-right: ", ";\n  }\n"])), withTablePluginBodyPrefix(), "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", "var(--ds-border, ".concat(N40, ")"), "var(--ds-border, ".concat(N40, ")"), withTablePluginBodyPrefix('&:first-child'), "var(--ds-space-100, 8px)", withTablePluginBodyPrefix('&:last-child'), "var(--ds-space-100, 8px)");
 var tableContainerStyles = css({
   borderRadius: 'inherit',
   borderBottomLeftRadius: 0,
@@ -188,16 +177,14 @@ export var getOrderedColumns = function getOrderedColumns(columns, visibleColumn
   }).sort(sortColumns);
   return [].concat(_toConsumableArray(visibleColumns), _toConsumableArray(alphabeticallySortedInvisibleColumns));
 };
-var BASE_WIDTH = 8;
-var DEFAULT_WIDTH = BASE_WIDTH * 22;
-export var COLUMN_MIN_WIDTH = BASE_WIDTH * 3;
+var DEFAULT_WIDTH = COLUMN_BASE_WIDTH * 22;
 var keyBasedWidthMap = {
-  priority: BASE_WIDTH * 5,
-  status: BASE_WIDTH * 18,
-  summary: BASE_WIDTH * 45,
-  description: BASE_WIDTH * 31.25,
-  type: BASE_WIDTH * 5,
-  key: BASE_WIDTH * 13
+  priority: COLUMN_BASE_WIDTH * 5,
+  status: COLUMN_BASE_WIDTH * 18,
+  summary: COLUMN_BASE_WIDTH * 45,
+  description: COLUMN_BASE_WIDTH * 31,
+  type: COLUMN_BASE_WIDTH * 6,
+  key: COLUMN_BASE_WIDTH * 15
 };
 function getDefaultColumnWidth(key, type) {
   var keyBasedWidth = keyBasedWidthMap[key];
@@ -206,9 +193,9 @@ function getDefaultColumnWidth(key, type) {
   }
   switch (type) {
     case 'date':
-      return BASE_WIDTH * 14;
+      return COLUMN_BASE_WIDTH * 16;
     case 'icon':
-      return BASE_WIDTH * 5;
+      return COLUMN_BASE_WIDTH * 7;
     default:
       return DEFAULT_WIDTH;
   }
@@ -495,7 +482,8 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
       }
     }, _callee, null, [[3, 9]]);
   })), [parentContainerRenderInstanceId, extensionKey, hasFullSchema, onLoadDatasourceDetails]);
-  var shouldUseWidth = onColumnResize || columnCustomSizes;
+  var shouldUseWidth = !!(onColumnResize || columnCustomSizes);
+  var isEditable = onVisibleColumnKeysChange && hasData;
   return jsx("div", {
     /* There is required contentEditable={true} in editor-card-plugin
      * But this brakes how DND works. We set contentEditable={false} to allow DND to work
@@ -515,7 +503,8 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
     } : {}
   }, jsx("thead", {
     "data-testid": testId && "".concat(testId, "--head"),
-    css: [noDefaultBorderStyles, tableHeadStyles]
+    css: [noDefaultBorderStyles, tableHeadStyles],
+    className: !!onVisibleColumnKeysChange ? 'has-column-picker' : ''
   }, jsx("tr", {
     ref: tableHeaderRowRef
   }, headerColumns.map(function (_ref13, cellIndex) {
@@ -530,7 +519,7 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
       level: "h200",
       as: 'span'
     }, content));
-    if (onVisibleColumnKeysChange && hasData) {
+    if (isEditable) {
       var _containerRef$current3;
       var previewRows = tableRows.map(function (_ref14) {
         var cells = _ref14.cells;
@@ -559,14 +548,12 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
     } else {
       return jsx(TableHeading, {
         key: key,
-        className: !!onVisibleColumnKeysChange ? 'has-column-picker' : '',
         "data-testid": "".concat(key, "-column-heading"),
-        style: shouldUseWidth ? {
+        style: getWidthCss({
+          shouldUseWidth: shouldUseWidth,
           width: width
-        } : {
-          maxWidth: width
-        }
-      }, heading);
+        })
+      }, jsx(Flex, null, heading));
     }
   }), onVisibleColumnKeysChange && jsx(ColumnPickerHeader, null, jsx(ColumnPicker, {
     columns: hasFullSchema ? orderedColumns : [],
@@ -589,22 +576,21 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
       var cellKey = _ref17.key,
         content = _ref17.content,
         width = _ref17.width;
-      var loadingRowStyle = shouldUseWidth ? {
+      var isLastCell = cellIndex === cells.length - 1;
+      var loadingRowStyle = getWidthCss({
+        shouldUseWidth: shouldUseWidth,
         width: width
-      } : {
-        maxWidth: width
-      };
+      });
       // extra padding is required around skeleton loader to avoid vertical jumps when data loads
       if (key !== null && key !== void 0 && key.includes('loading')) {
         loadingRowStyle = _objectSpread(_objectSpread({}, loadingRowStyle), {}, {
           paddingBlock: "var(--ds-space-100, 8px)"
         });
       }
-      return jsx("td", {
+      return jsx(TableCell, {
         key: cellKey,
         "data-testid": testId && "".concat(testId, "--cell-").concat(cellIndex),
-        colSpan: cellIndex + 1 === cells.length ? 2 : undefined,
-        css: truncatedCellStyles,
+        colSpan: isEditable && isLastCell ? 2 : undefined,
         style: loadingRowStyle
       }, content);
     }));

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

@@ -7,4 +7,17 @@ export var FieldTextFontSize = '14px';
 export var Table = styled.table(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n"])));
 var lineHeight = "var(--ds-font-lineHeight-300, 24px)";
 var verticalPadding = "var(--ds-space-025, 2px)";
-export var TableHeading = styled.th(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  line-height: ", ";\n  padding: ", " ", ";\n  border-right: 0.5px solid ", ";\n  border-bottom: 2px solid ", ";\n  height: calc(", " * 2 + ", " * 2);\n  vertical-align: bottom;\n\n  &.has-column-picker:nth-last-of-type(2) {\n    border-right: 0;\n  }\n\n  &:first-child {\n    padding-left: ", ";\n  }\n\n  &:last-child {\n    border-right: 0;\n  }\n\n  & [data-testid='datasource-header-content--container'] {\n    width: 100%;\n    padding: ", " ", ";\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    white-space: normal;\n    overflow: hidden;\n    word-wrap: break-word;\n\n    &:hover {\n      background: ", ";\n      border-radius: 3px;\n    }\n  }\n"])), lineHeight, verticalPadding, "var(--ds-space-050, 4px)", "var(--ds-border, ".concat(N40, ")"), "var(--ds-border, ".concat(N40, ")"), lineHeight, verticalPadding, "var(--ds-space-050, 4px)", verticalPadding, "var(--ds-space-050, 4px)", "var(--ds-background-input-hovered, #F7F8F9)");
+
+/**
+ * This is a hack used to override styles that are leaking to our table html element
+ * from editor table plugin.
+ * This css prefix can be used in front of our main css rule to make its weight bigger
+ * and force make browser use it first and editor plugin css second.
+ */
+export var withTablePluginPrefix = function withTablePluginPrefix(tableSection) {
+  var mainRule = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '&';
+  return "\n  .pm-table-wrapper > table ".concat(tableSection, " ").concat(mainRule, ",\n  .ProseMirror .pm-table-wrapper > table ").concat(tableSection, " ").concat(mainRule, ",\n  ").concat(mainRule, "\n");
+};
+export var withTablePluginHeaderPrefix = withTablePluginPrefix.bind(null, 'thead');
+export var withTablePluginBodyPrefix = withTablePluginPrefix.bind(null, 'tbody');
+export var TableHeading = styled.th(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", " {\n    border: 0;\n    position: relative;\n\n    /* This makes resizing work with out jumping due to padding + changes overall width for same default values. */\n    box-sizing: border-box;\n\n    line-height: ", ";\n    padding: ", " ", ";\n    border-right: 0.5px solid ", ";\n    border-bottom: 2px solid ", ";\n\n    /*\n      lineHeight * 2 -> Max height of two lined header\n      verticalPadding * 2 -> padding for this component itself\n      verticalPadding * 2 -> padding inside span (--container)\n      2px -> Bottom border\n      Last two terms are needed because of border-box box sizing.\n    */\n    height: calc(", " * 2 + ", " * 4 + 2px);\n    vertical-align: bottom;\n    background-color: ", ";\n  }\n\n  ", " {\n    border-right: 0;\n  }\n\n  ", " {\n    padding-left: ", ";\n  }\n\n  ", " {\n    border-right: 0;\n  }\n\n  & [data-testid='datasource-header-content--container'] {\n    width: 100%;\n    padding: ", " ", ";\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    white-space: normal;\n    overflow: hidden;\n    word-wrap: break-word;\n\n    &:hover {\n      background: ", ";\n      border-radius: 3px;\n    }\n  }\n"])), withTablePluginHeaderPrefix(), lineHeight, verticalPadding, "var(--ds-space-050, 4px)", "var(--ds-border, ".concat(N40, ")"), "var(--ds-border, ".concat(N40, ")"), lineHeight, verticalPadding, "var(--ds-elevation-surface-current, #FFF)", withTablePluginPrefix('', 'thead.has-column-picker &:nth-last-of-type(2)'), withTablePluginHeaderPrefix('&:first-child'), "var(--ds-space-050, 4px)", withTablePluginHeaderPrefix('&:last-child'), verticalPadding, "var(--ds-space-050, 4px)", "var(--ds-background-input-hovered, #F7F8F9)");

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

@@ -0,0 +1,20 @@
+export var COLUMN_BASE_WIDTH = 8;
+export var COLUMN_MIN_WIDTH = COLUMN_BASE_WIDTH * 3;
+/**
+ * Generate width related portion of css for table cell.
+ *
+ * @param shouldUseWidth boolean argument defines if a given width is user defined / baked in value
+ * or rather default width that should be treated as a maximum width. When table inserted initially
+ * and no user custom width defined we set this value to `false`. As soon as user changes any of the
+ * column widths we treat all width as custom hardcoded widths.
+ * @param width
+ */
+export var getWidthCss = function getWidthCss(_ref) {
+  var shouldUseWidth = _ref.shouldUseWidth,
+    width = _ref.width;
+  return shouldUseWidth ? {
+    width: width
+  } : {
+    maxWidth: width
+  };
+};

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

@@ -22,6 +22,5 @@ export interface RowCellType {
     content?: React.ReactNode | string;
 }
 export declare const getOrderedColumns: (columns: DatasourceResponseSchemaProperty[], visibleColumnKeys: string[]) => DatasourceResponseSchemaProperty[];
-export declare const COLUMN_MIN_WIDTH: number;
 export declare const IssueLikeDataTableView: ({ testId, onNextPage, onLoadDatasourceDetails, items, columns, renderItem, visibleColumnKeys, onVisibleColumnKeysChange, columnCustomSizes, onColumnResize, status, hasNextPage, scrollableContainerHeight, parentContainerRenderInstanceId, extensionKey, }: IssueLikeDataTableViewProps) => jsx.JSX.Element;
 export declare const EmptyState: ({ isCompact, testId }: import("./empty-state").Props) => jsx.JSX.Element;

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

@@ -5,6 +5,15 @@ export declare const Table: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, {}>;
+/**
+ * This is a hack used to override styles that are leaking to our table html element
+ * from editor table plugin.
+ * This css prefix can be used in front of our main css rule to make its weight bigger
+ * and force make browser use it first and editor plugin css second.
+ */
+export declare const withTablePluginPrefix: (tableSection: 'thead' | 'tbody' | '', mainRule?: string) => string;
+export declare const withTablePluginHeaderPrefix: (mainRule?: string | undefined) => string;
+export declare const withTablePluginBodyPrefix: (mainRule?: string | undefined) => string;
 export declare const TableHeading: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;

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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+export declare const COLUMN_BASE_WIDTH = 8;
+export declare const COLUMN_MIN_WIDTH: number;
+export type GetWidthCss = (arg: {
+    shouldUseWidth: boolean;
+    width: number;
+}) => React.CSSProperties;
+/**
+ * Generate width related portion of css for table cell.
+ *
+ * @param shouldUseWidth boolean argument defines if a given width is user defined / baked in value
+ * or rather default width that should be treated as a maximum width. When table inserted initially
+ * and no user custom width defined we set this value to `false`. As soon as user changes any of the
+ * column widths we treat all width as custom hardcoded widths.
+ * @param width
+ */
+export declare const getWidthCss: GetWidthCss;

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

@@ -22,6 +22,5 @@ export interface RowCellType {
     content?: React.ReactNode | string;
 }
 export declare const getOrderedColumns: (columns: DatasourceResponseSchemaProperty[], visibleColumnKeys: string[]) => DatasourceResponseSchemaProperty[];
-export declare const COLUMN_MIN_WIDTH: number;
 export declare const IssueLikeDataTableView: ({ testId, onNextPage, onLoadDatasourceDetails, items, columns, renderItem, visibleColumnKeys, onVisibleColumnKeysChange, columnCustomSizes, onColumnResize, status, hasNextPage, scrollableContainerHeight, parentContainerRenderInstanceId, extensionKey, }: IssueLikeDataTableViewProps) => jsx.JSX.Element;
 export declare const EmptyState: ({ isCompact, testId }: import("./empty-state").Props) => jsx.JSX.Element;

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

@@ -5,6 +5,15 @@ export declare const Table: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, {}>;
+/**
+ * This is a hack used to override styles that are leaking to our table html element
+ * from editor table plugin.
+ * This css prefix can be used in front of our main css rule to make its weight bigger
+ * and force make browser use it first and editor plugin css second.
+ */
+export declare const withTablePluginPrefix: (tableSection: 'thead' | 'tbody' | '', mainRule?: string) => string;
+export declare const withTablePluginHeaderPrefix: (mainRule?: string | undefined) => string;
+export declare const withTablePluginBodyPrefix: (mainRule?: string | undefined) => string;
 export declare const TableHeading: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;

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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+export declare const COLUMN_BASE_WIDTH = 8;
+export declare const COLUMN_MIN_WIDTH: number;
+export type GetWidthCss = (arg: {
+    shouldUseWidth: boolean;
+    width: number;
+}) => React.CSSProperties;
+/**
+ * Generate width related portion of css for table cell.
+ *
+ * @param shouldUseWidth boolean argument defines if a given width is user defined / baked in value
+ * or rather default width that should be treated as a maximum width. When table inserted initially
+ * and no user custom width defined we set this value to `false`. As soon as user changes any of the
+ * column widths we treat all width as custom hardcoded widths.
+ * @param width
+ */
+export declare const getWidthCss: GetWidthCss;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-datasource",
-  "version": "1.19.40",
+  "version": "1.19.41",
   "description": "UI Components to support linking platform dataset feature",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -48,14 +48,14 @@
     "@atlaskit/link-client-extension": "^1.8.0",
     "@atlaskit/linking-common": "^5.3.0",
     "@atlaskit/linking-types": "^8.5.0",
-    "@atlaskit/lozenge": "^11.5.0",
+    "@atlaskit/lozenge": "^11.6.0",
     "@atlaskit/modal-dialog": "^12.10.0",
     "@atlaskit/platform-feature-flags": "^0.2.4",
     "@atlaskit/pragmatic-drag-and-drop": "^0.25.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^0.12.0",
     "@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll": "^0.6.0",
     "@atlaskit/pragmatic-drag-and-drop-react-indicator": "^0.18.0",
-    "@atlaskit/primitives": "^1.16.0",
+    "@atlaskit/primitives": "^1.17.0",
     "@atlaskit/select": "^17.0.3",
     "@atlaskit/smart-card": "^26.44.0",
     "@atlaskit/spinner": "^16.0.0",