@atlaskit/link-datasource 1.17.2 → 1.17.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/link-datasource
 
+## 1.17.3
+
+### Patch Changes
+
+- [#43122](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43122) [`5690dd4a0d3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5690dd4a0d3) - When no onColumnResize is defined OR when columnCustomSizes in readonly more use max-width instead of width
+
 ## 1.17.2
 
 ### Patch Changes

package/dist/cjs/analytics/constants.js

@@ -7,5 +7,5 @@ exports.packageMetaData = exports.EVENT_CHANNEL = void 0;
 var EVENT_CHANNEL = exports.EVENT_CHANNEL = 'media';
 var packageMetaData = exports.packageMetaData = {
   packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.17.2"
+  packageVersion: "1.17.3"
 };

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DraggableTableHeading = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
@@ -20,8 +21,8 @@ var _closestEdge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/addon/close
 var _boxWithoutTerminal = require("@atlaskit/pragmatic-drag-and-drop-react-indicator/box-without-terminal");
 var _styled = require("./styled");
 var _index = require("./index");
-/** @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; } /** @jsx jsx */
 var verticallyAlignedStyles = (0, _react2.css)({
   display: 'flex',
   alignItems: 'center',
@@ -207,6 +208,9 @@ var DraggableTableHeading = exports.DraggableTableHeading = function DraggableTa
 
   // Handling column resizing
   (0, _react.useEffect)(function () {
+    if (!onWidthChange) {
+      return;
+    }
     var resizeHandle = columnResizeHandleRef.current;
     (0, _tinyInvariant.default)(resizeHandle);
     var mainHeaderCell = mainHeaderCellRef.current;
@@ -265,18 +269,21 @@ var DraggableTableHeading = exports.DraggableTableHeading = function DraggableTa
   return (0, _react2.jsx)(_styled.TableHeading, {
     ref: mainHeaderCellRef,
     "data-testid": "".concat(id, "-column-heading"),
-    style: {
-      width: width,
+    style: _objectSpread({
       cursor: 'grab'
-    }
-  }, (0, _react2.jsx)("div", {
+    }, onWidthChange ? {
+      width: width
+    } : {
+      maxWidth: width
+    })
+  }, onWidthChange ? (0, _react2.jsx)("div", {
     ref: columnResizeHandleRef,
     css: [resizerStyles, state.type === 'resizing' && resizingStyles],
     style: {
       height: "".concat(dndPreviewHeight, "px")
     },
     "data-testid": "column-resize-handle"
-  }), (0, _react2.jsx)("div", {
+  }) : null, (0, _react2.jsx)("div", {
     ref: dropTargetRef,
     css: [dropTargetStyles, isDraggingAnyColumn ? null : noPointerEventsStyles],
     style: {

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

@@ -57,7 +57,6 @@ var scrollableContainerStyles = (0, _react2.css)({
   borderRadius: "var(--ds-border-radius-100, 3px)"
 });
 var tableStyles = (0, _react2.css)({
-  tableLayout: 'fixed',
   // These styles are needed to prevent thead bottom border from scrolling away.
   // This happens because it is sticky. https://stackoverflow.com/questions/50361698/border-style-do-not-work-with-sticky-position-element
   borderCollapse: 'separate',
@@ -372,6 +371,7 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
       }
     }, _callee, null, [[3, 9]]);
   })), [parentContainerRenderInstanceId, extensionKey, hasFullSchema, onLoadDatasourceDetails]);
+  var shouldUseWidth = onColumnResize || columnCustomSizes;
   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
@@ -385,7 +385,10 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
     } : undefined
   }, (0, _react2.jsx)(_styled2.Table, {
     css: tableStyles,
-    "data-testid": testId
+    "data-testid": testId,
+    style: shouldUseWidth ? {
+      tableLayout: 'fixed'
+    } : {}
   }, (0, _react2.jsx)("thead", {
     "data-testid": testId && "".concat(testId, "--head"),
     css: [noDefaultBorderStyles, tableHeadStyles]
@@ -433,8 +436,10 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
       return (0, _react2.jsx)(_styled2.TableHeading, {
         key: key,
         "data-testid": "".concat(key, "-column-heading"),
-        style: {
+        style: shouldUseWidth ? {
           width: width
+        } : {
+          maxWidth: width
         }
       }, heading);
     }
@@ -459,8 +464,10 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
       var cellKey = _ref13.key,
         content = _ref13.content,
         width = _ref13.width;
-      var loadingRowStyle = {
+      var loadingRowStyle = 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')) {

package/dist/es2019/analytics/constants.js

@@ -1,5 +1,5 @@
 export const EVENT_CHANNEL = 'media';
 export const packageMetaData = {
   packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.17.2"
+  packageVersion: "1.17.3"
 };

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

@@ -192,6 +192,9 @@ export const DraggableTableHeading = ({
 
   // Handling column resizing
   useEffect(() => {
+    if (!onWidthChange) {
+      return;
+    }
     const resizeHandle = columnResizeHandleRef.current;
     invariant(resizeHandle);
     const mainHeaderCell = mainHeaderCellRef.current;
@@ -255,17 +258,21 @@ export const DraggableTableHeading = ({
     ref: mainHeaderCellRef,
     "data-testid": `${id}-column-heading`,
     style: {
-      width,
-      cursor: 'grab'
+      cursor: 'grab',
+      ...(onWidthChange ? {
+        width
+      } : {
+        maxWidth: width
+      })
     }
-  }, jsx("div", {
+  }, onWidthChange ? jsx("div", {
     ref: columnResizeHandleRef,
     css: [resizerStyles, state.type === 'resizing' && resizingStyles],
     style: {
       height: `${dndPreviewHeight}px`
     },
     "data-testid": "column-resize-handle"
-  }), jsx("div", {
+  }) : null, jsx("div", {
     ref: dropTargetRef,
     css: [dropTargetStyles, isDraggingAnyColumn ? null : noPointerEventsStyles],
     style: {

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

@@ -58,7 +58,6 @@ const scrollableContainerStyles = css({
   borderRadius: "var(--ds-border-radius-100, 3px)"
 });
 const tableStyles = css({
-  tableLayout: 'fixed',
   // These styles are needed to prevent thead bottom border from scrolling away.
   // This happens because it is sticky. https://stackoverflow.com/questions/50361698/border-style-do-not-work-with-sticky-position-element
   borderCollapse: 'separate',
@@ -325,6 +324,7 @@ export const IssueLikeDataTableView = ({
       setHasFullSchema(false);
     }
   }, [parentContainerRenderInstanceId, extensionKey, hasFullSchema, onLoadDatasourceDetails]);
+  const shouldUseWidth = onColumnResize || columnCustomSizes;
   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
@@ -338,7 +338,10 @@ export const IssueLikeDataTableView = ({
     } : undefined
   }, jsx(Table, {
     css: tableStyles,
-    "data-testid": testId
+    "data-testid": testId,
+    style: shouldUseWidth ? {
+      tableLayout: 'fixed'
+    } : {}
   }, jsx("thead", {
     "data-testid": testId && `${testId}--head`,
     css: [noDefaultBorderStyles, tableHeadStyles]
@@ -387,8 +390,10 @@ export const IssueLikeDataTableView = ({
       return jsx(TableHeading, {
         key: key,
         "data-testid": `${key}-column-heading`,
-        style: {
+        style: shouldUseWidth ? {
           width
+        } : {
+          maxWidth: width
         }
       }, heading);
     }
@@ -414,8 +419,10 @@ export const IssueLikeDataTableView = ({
     content,
     width
   }, cellIndex) => {
-    let loadingRowStyle = {
+    let loadingRowStyle = 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')) {

package/dist/esm/analytics/constants.js

@@ -1,5 +1,5 @@
 export var EVENT_CHANNEL = 'media';
 export var packageMetaData = {
   packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.17.2"
+  packageVersion: "1.17.3"
 };

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

@@ -1,4 +1,7 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /** @jsx jsx */
 import { useEffect, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -199,6 +202,9 @@ export var DraggableTableHeading = function DraggableTableHeading(_ref) {
 
   // Handling column resizing
   useEffect(function () {
+    if (!onWidthChange) {
+      return;
+    }
     var resizeHandle = columnResizeHandleRef.current;
     invariant(resizeHandle);
     var mainHeaderCell = mainHeaderCellRef.current;
@@ -257,18 +263,21 @@ export var DraggableTableHeading = function DraggableTableHeading(_ref) {
   return jsx(TableHeading, {
     ref: mainHeaderCellRef,
     "data-testid": "".concat(id, "-column-heading"),
-    style: {
-      width: width,
+    style: _objectSpread({
       cursor: 'grab'
-    }
-  }, jsx("div", {
+    }, onWidthChange ? {
+      width: width
+    } : {
+      maxWidth: width
+    })
+  }, onWidthChange ? jsx("div", {
     ref: columnResizeHandleRef,
     css: [resizerStyles, state.type === 'resizing' && resizingStyles],
     style: {
       height: "".concat(dndPreviewHeight, "px")
     },
     "data-testid": "column-resize-handle"
-  }), jsx("div", {
+  }) : null, jsx("div", {
     ref: dropTargetRef,
     css: [dropTargetStyles, isDraggingAnyColumn ? null : noPointerEventsStyles],
     style: {

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

@@ -50,7 +50,6 @@ var scrollableContainerStyles = css({
   borderRadius: "var(--ds-border-radius-100, 3px)"
 });
 var tableStyles = css({
-  tableLayout: 'fixed',
   // These styles are needed to prevent thead bottom border from scrolling away.
   // This happens because it is sticky. https://stackoverflow.com/questions/50361698/border-style-do-not-work-with-sticky-position-element
   borderCollapse: 'separate',
@@ -365,6 +364,7 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref) {
       }
     }, _callee, null, [[3, 9]]);
   })), [parentContainerRenderInstanceId, extensionKey, hasFullSchema, onLoadDatasourceDetails]);
+  var shouldUseWidth = onColumnResize || columnCustomSizes;
   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
@@ -378,7 +378,10 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref) {
     } : undefined
   }, jsx(Table, {
     css: tableStyles,
-    "data-testid": testId
+    "data-testid": testId,
+    style: shouldUseWidth ? {
+      tableLayout: 'fixed'
+    } : {}
   }, jsx("thead", {
     "data-testid": testId && "".concat(testId, "--head"),
     css: [noDefaultBorderStyles, tableHeadStyles]
@@ -426,8 +429,10 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref) {
       return jsx(TableHeading, {
         key: key,
         "data-testid": "".concat(key, "-column-heading"),
-        style: {
+        style: shouldUseWidth ? {
           width: width
+        } : {
+          maxWidth: width
         }
       }, heading);
     }
@@ -452,8 +457,10 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref) {
       var cellKey = _ref13.key,
         content = _ref13.content,
         width = _ref13.width;
-      var loadingRowStyle = {
+      var loadingRowStyle = 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')) {

package/examples-helpers/buildIssueLikeTable.tsx

@@ -22,6 +22,7 @@ mockDatasourceFetchRequests();
 
 interface Props {
   isReadonly?: boolean;
+  canResizeColumns?: boolean;
 }
 
 const TableViewWrapper = styled.div`
@@ -32,7 +33,7 @@ const TableViewWrapper = styled.div`
   height: 100%;
 `;
 
-const ExampleBody = ({ isReadonly }: Props) => {
+const ExampleBody = ({ isReadonly, canResizeColumns = true }: Props) => {
   const parameters = useMemo<JiraIssueDatasourceParameters>(
     () => ({
       cloudId: 'some-cloud-id',
@@ -90,7 +91,9 @@ const ExampleBody = ({ isReadonly }: Props) => {
           onVisibleColumnKeysChange={
             isReadonly ? undefined : setVisibleColumnKeys
           }
-          onColumnResize={isReadonly ? undefined : onColumnResize}
+          onColumnResize={
+            isReadonly || !canResizeColumns ? undefined : onColumnResize
+          }
           columnCustomSizes={columnCustomSizes}
         />
       ) : (
@@ -100,11 +103,17 @@ const ExampleBody = ({ isReadonly }: Props) => {
   );
 };
 
-export const ExampleIssueLikeTable = ({ isReadonly }: Props) => {
+export const ExampleIssueLikeTable = ({
+  isReadonly,
+  canResizeColumns,
+}: Props) => {
   return (
     <IntlProvider locale="en">
       <SmartCardProvider client={new SmartLinkClient()}>
-        <ExampleBody isReadonly={isReadonly} />
+        <ExampleBody
+          isReadonly={isReadonly}
+          canResizeColumns={canResizeColumns}
+        />
       </SmartCardProvider>
     </IntlProvider>
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-datasource",
-  "version": "1.17.2",
+  "version": "1.17.3",
   "description": "UI Components to support linking platform dataset feature",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"