@atlaskit/link-datasource 1.11.0 → 1.12.0

package/dist/esm/ui/assets-modal/modal/index.js

@@ -235,7 +235,7 @@ var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
-            if (schemaId !== searchSchemaId || aql !== searchAql) {
+            if (schemaId !== searchSchemaId || aql !== searchAql || status === 'rejected') {
               searchCount.current++;
               if (schemaId !== searchSchemaId) {
                 userInteractionActions.current.add(DatasourceAction.SCHEMA_UPDATED);
@@ -259,7 +259,7 @@ var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
     return function (_x, _x2) {
       return _ref.apply(this, arguments);
     };
-  }(), [aql, reset, schemaId]);
+  }(), [aql, reset, schemaId, status]);
   var renderModalTitleContent = useCallback(function () {
     if (workspaceError) {
       return undefined;

package/dist/esm/ui/datasource-table-view/datasourceTableView.js

@@ -21,7 +21,9 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
     parameters = _ref.parameters,
     visibleColumnKeys = _ref.visibleColumnKeys,
     onVisibleColumnKeysChange = _ref.onVisibleColumnKeysChange,
-    url = _ref.url;
+    url = _ref.url,
+    columnCustomSizes = _ref.columnCustomSizes,
+    onColumnResize = _ref.onColumnResize;
   var _useDatasourceTableSt = useDatasourceTableState({
       datasourceId: datasourceId,
       parameters: parameters,
@@ -129,6 +131,8 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
       columns: columns,
       visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
       onVisibleColumnKeysChange: onVisibleColumnKeysChange,
+      columnCustomSizes: columnCustomSizes,
+      onColumnResize: onColumnResize,
       scrollableContainerHeight: ScrollableContainerHeight,
       parentContainerRenderInstanceId: tableRenderInstanceId,
       extensionKey: extensionKey

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

@@ -7,10 +7,13 @@ import invariant from 'tiny-invariant';
 import { attachClosestEdge, extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
 import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-indicator/box-without-terminal';
 import { draggable, dropTargetForElements, monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
+import { cancelUnhandled } from '@atlaskit/pragmatic-drag-and-drop/addon/cancel-unhandled';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/util/combine';
+import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util/disable-native-drag-preview';
 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';
 var tableHeadingStatusStyles = {
   idle: css({
     ':hover': {
@@ -36,6 +39,40 @@ var dropTargetStyles = css({
 var noPointerEventsStyles = css({
   pointerEvents: 'none'
 });
+var resizerStyles = css({
+  '--local-hitbox-width': "var(--ds-space-300, 24px)",
+  width: 'var(--local-hitbox-width)',
+  cursor: 'col-resize',
+  flexGrow: '0',
+  position: 'absolute',
+  zIndex: 1,
+  // we want this to sit on top of adjacent column headers
+  right: 'calc(-1 * calc(var(--local-hitbox-width) / 2))',
+  top: 0,
+  '::before': {
+    opacity: 0,
+    '--local-line-width': "var(--ds-border-width, 2px)",
+    content: '""',
+    position: 'absolute',
+    background: "var(--ds-border-brand, #0052CC)",
+    width: 'var(--local-line-width)',
+    inset: 0,
+    left: "calc(50% - calc(var(--local-line-width) / 2))",
+    transition: 'opacity 0.2s ease'
+  },
+  ':hover::before': {
+    opacity: 1
+  }
+});
+var resizingStyles = css({
+  // turning off the resizing cursor as sometimes it can cause the cursor to flicker
+  // while resizing. The browser controls the cursor while dragging, but the browser
+  // can sometimes bug out.
+  cursor: 'unset',
+  '::before': {
+    opacity: 1
+  }
+});
 var idleState = {
   type: 'idle'
 };
@@ -49,8 +86,10 @@ export var DraggableTableHeading = function DraggableTableHeading(_ref) {
     tableId = _ref.tableId,
     dndPreviewHeight = _ref.dndPreviewHeight,
     dragPreview = _ref.dragPreview,
-    maxWidth = _ref.maxWidth;
-  var ref = useRef(null);
+    width = _ref.width,
+    onWidthChange = _ref.onWidthChange;
+  var mainHeaderCellRef = useRef(null);
+  var columnResizeHandleRef = useRef(null);
   var _useState = useState(idleState),
     _useState2 = _slicedToArray(_useState, 2),
     state = _useState2[0],
@@ -65,7 +104,7 @@ export var DraggableTableHeading = function DraggableTableHeading(_ref) {
     setClosestEdge = _useState6[1];
   var dropTargetRef = useRef(null);
   useEffect(function () {
-    var cell = ref.current;
+    var cell = mainHeaderCellRef.current;
     invariant(cell);
     return combine(draggable({
       element: cell,
@@ -168,15 +207,80 @@ export var DraggableTableHeading = function DraggableTableHeading(_ref) {
       }
     });
   }, [tableId]);
+
+  // Handling column resizing
+  useEffect(function () {
+    var resizeHandle = columnResizeHandleRef.current;
+    invariant(resizeHandle);
+    var mainHeaderCell = mainHeaderCellRef.current;
+    invariant(mainHeaderCell);
+    return draggable({
+      element: resizeHandle,
+      getInitialData: function getInitialData() {
+        // metadata related to currently dragging item (can be read by drop events etc)
+        return {
+          type: 'column-resize',
+          id: id,
+          index: index,
+          tableId: tableId
+        };
+      },
+      // Is called when dragging started
+      onGenerateDragPreview: function onGenerateDragPreview(_ref6) {
+        var nativeSetDragImage = _ref6.nativeSetDragImage;
+        // We don't show any preview, since column separator (handle) is moving with the cursor
+        disableNativeDragPreview({
+          nativeSetDragImage: nativeSetDragImage
+        });
+        // Block drag operations outside `@atlaskit/pragmatic-drag-and-drop`
+        cancelUnhandled.start();
+        setState({
+          type: 'resizing',
+          initialWidth: width
+        });
+      },
+      onDrag: function onDrag(_ref7) {
+        var location = _ref7.location;
+        var relativeDistanceX = location.current.input.clientX - location.initial.input.clientX;
+        invariant(state.type === 'resizing');
+        var initialWidth = state.initialWidth;
+
+        // 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"));
+      },
+      onDrop: function onDrop() {
+        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));
+        }
+      }
+    });
+  }, [id, index, onWidthChange, state, tableId, width]);
   return jsx(TableHeading, {
-    ref: ref,
+    ref: mainHeaderCellRef,
     css: [tableHeadingStatusStyles[state.type]],
     "data-testid": "".concat(id, "-column-heading"),
     style: {
-      maxWidth: maxWidth,
+      width: width,
       cursor: 'grab'
     }
   }, jsx("div", {
+    ref: columnResizeHandleRef,
+    css: [resizerStyles, state.type === 'resizing' && resizingStyles],
+    style: {
+      height: "".concat(dndPreviewHeight, "px")
+    },
+    "data-testid": "column-resize-handle"
+  }), jsx("div", {
     ref: dropTargetRef,
     css: [dropTargetStyles, isDraggingAnyColumn ? null : noPointerEventsStyles],
     style: {

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

@@ -37,7 +37,7 @@ var tableHeadStyles = css({
   top: 0,
   zIndex: stickyTableHeadersIndex
 });
-var ColumnPickerHeader = styled.th(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 40px;\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 bellow */\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"])), tableSidePadding, "var(--ds-surface, #FFF)", "var(--ds-background-accent-gray-subtler, ".concat(N40, ")"), "var(--ds-surface, #FFF)", tableSidePadding);
+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 bellow */\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-surface, #FFF)", "var(--ds-background-accent-gray-subtler, ".concat(N40, ")"), "var(--ds-surface, #FFF)", tableSidePadding);
 var truncatedCellStyles = css({
   overflow: 'hidden',
   textOverflow: 'ellipsis',
@@ -50,6 +50,7 @@ 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',
@@ -66,7 +67,7 @@ function extractIndex(data) {
   invariant(typeof index === 'number');
   return index;
 }
-export var orderColumns = function orderColumns(columns, visibleColumnKeys) {
+export var getOrderedColumns = function getOrderedColumns(columns, visibleColumnKeys) {
   var visibleColumns = columns.filter(function (column) {
     return visibleColumnKeys.includes(column.key);
   }).sort(function (a, b) {
@@ -80,25 +81,28 @@ export var orderColumns = function orderColumns(columns, visibleColumnKeys) {
   return [].concat(_toConsumableArray(visibleColumns), _toConsumableArray(invisibleColumns));
 };
 var BASE_WIDTH = 8;
-function getColumnWidth(key, type) {
-  var keyBasedWidth = {
-    assignee: BASE_WIDTH * 22,
-    labels: BASE_WIDTH * 22,
-    priority: BASE_WIDTH * 8,
-    status: BASE_WIDTH * 18,
-    summary: BASE_WIDTH * 45,
-    description: BASE_WIDTH * 31.25
-  };
-  if (keyBasedWidth[key]) {
-    return keyBasedWidth[key];
+var DEFAULT_WIDTH = BASE_WIDTH * 22;
+export var COLUMN_MIN_WIDTH = BASE_WIDTH * 3;
+var keyBasedWidthMap = {
+  priority: BASE_WIDTH * 4,
+  status: BASE_WIDTH * 18,
+  summary: BASE_WIDTH * 45,
+  description: BASE_WIDTH * 31.25,
+  type: BASE_WIDTH * 4,
+  key: BASE_WIDTH * 13
+};
+function getDefaultColumnWidth(key, type) {
+  var keyBasedWidth = keyBasedWidthMap[key];
+  if (keyBasedWidth) {
+    return keyBasedWidth;
   }
   switch (type) {
     case 'date':
       return BASE_WIDTH * 14;
-    case 'string':
-      return BASE_WIDTH * 22;
+    case 'icon':
+      return BASE_WIDTH * 4;
     default:
-      return undefined;
+      return DEFAULT_WIDTH;
   }
 }
 export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref) {
@@ -111,6 +115,8 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref) {
     renderItem = _ref$renderItem === void 0 ? fallbackRenderType : _ref$renderItem,
     visibleColumnKeys = _ref.visibleColumnKeys,
     onVisibleColumnKeysChange = _ref.onVisibleColumnKeysChange,
+    columnCustomSizes = _ref.columnCustomSizes,
+    onColumnResize = _ref.onColumnResize,
     status = _ref.status,
     hasNextPage = _ref.hasNextPage,
     scrollableContainerHeight = _ref.scrollableContainerHeight,
@@ -119,6 +125,7 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref) {
   var tableId = useMemo(function () {
     return Symbol('unique-id');
   }, []);
+  var tableHeaderRowRef = useRef(null);
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     lastRowElement = _useState2[0],
@@ -130,14 +137,14 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref) {
   var isBottomOfTableVisibleRaw = useIsOnScreen(lastRowElement);
   var containerRef = useRef(null);
   var _useState5 = useState(function () {
-      return orderColumns(_toConsumableArray(columns), _toConsumableArray(visibleColumnKeys));
+      return getOrderedColumns(_toConsumableArray(columns), _toConsumableArray(visibleColumnKeys));
     }),
     _useState6 = _slicedToArray(_useState5, 2),
     orderedColumns = _useState6[0],
     setOrderedColumns = _useState6[1];
   useEffect(function () {
     if (!hasFullSchema) {
-      setOrderedColumns(orderColumns(_toConsumableArray(columns), _toConsumableArray(visibleColumnKeys)));
+      setOrderedColumns(getOrderedColumns(_toConsumableArray(columns), _toConsumableArray(visibleColumnKeys)));
     }
   }, [columns, visibleColumnKeys, hasFullSchema]);
   useEffect(function () {
@@ -161,37 +168,37 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref) {
   // or some other combination.
 
   var identityColumnKey = 'id';
-  var loadingRow = useMemo(function () {
-    return {
-      key: 'loading',
-      cells: visibleSortedColumns.map(function (_ref3) {
-        var key = _ref3.key;
-        var content = jsx(Skeleton, {
-          borderRadius: 8,
-          width: "100%",
-          height: 14,
-          testId: "issues-table-row-loading"
-        });
-        return {
-          key: key,
-          content: content
-        };
-      })
-    };
-  }, [visibleSortedColumns]);
-  var headColumns = useMemo(function () {
-    return visibleSortedColumns.map(function (_ref4) {
-      var key = _ref4.key,
-        title = _ref4.title,
-        type = _ref4.type;
+  var getColumnWidth = useCallback(function (key, type) {
+    return (columnCustomSizes === null || columnCustomSizes === void 0 ? void 0 : columnCustomSizes[key]) || getDefaultColumnWidth(key, type);
+  }, [columnCustomSizes]);
+  var headerColumns = useMemo(function () {
+    return visibleSortedColumns.map(function (_ref3) {
+      var key = _ref3.key,
+        title = _ref3.title,
+        type = _ref3.type;
       return {
         key: key,
         content: title,
         shouldTruncate: true,
-        maxWidth: getColumnWidth(key, type)
+        width: getColumnWidth(key, type)
       };
     });
-  }, [visibleSortedColumns]);
+  }, [getColumnWidth, visibleSortedColumns]);
+  var loadingRow = useMemo(function () {
+    return {
+      key: 'loading',
+      cells: headerColumns.map(function (column) {
+        return _objectSpread(_objectSpread({}, column), {}, {
+          content: jsx(Skeleton, {
+            borderRadius: 8,
+            width: "100%",
+            height: 14,
+            testId: "issues-table-row-loading"
+          })
+        });
+      })
+    };
+  }, [headerColumns]);
   useEffect(function () {
     if (isBottomOfTableVisibleRaw && hasNextPage && status === 'resolved') {
       void onNextPage({
@@ -210,33 +217,39 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref) {
       return;
     }
     return combine(monitorForElements({
-      onDragStart: function onDragStart(_ref5) {
-        var _containerRef$current;
-        var location = _ref5.location;
+      onDragStart: function onDragStart(_ref4) {
+        var location = _ref4.location,
+          source = _ref4.source;
         initialAutoScrollerClientY.current = location.current.input.clientY;
-        autoScroller.start({
-          input: _objectSpread(_objectSpread({}, location.current.input), {}, {
-            clientY:
-            // The goal is to have clientY the same and in the middle of the scrollable area
-            // Since clientY is taken from to of the viewport we need to plus that in order to get
-            // middle of the scrollable area in reference to the viewport
-            (initialAutoScrollerClientY.current || 0) + (((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetHeight) || 0) / 2
-          }),
-          behavior: 'container-only'
-        });
+        if (source.data.type === 'table-header') {
+          var _containerRef$current;
+          autoScroller.start({
+            input: _objectSpread(_objectSpread({}, location.current.input), {}, {
+              clientY:
+              // The goal is to have clientY the same and in the middle of the scrollable area
+              // Since clientY is taken from to of the viewport we need to plus that in order to get
+              // middle of the scrollable area in reference to the viewport
+              (initialAutoScrollerClientY.current || 0) + (((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetHeight) || 0) / 2
+            }),
+            behavior: 'container-only'
+          });
+        }
       },
-      onDrag: function onDrag(_ref6) {
-        var _containerRef$current2;
-        var location = _ref6.location;
-        autoScroller.updateInput({
-          input: _objectSpread(_objectSpread({}, location.current.input), {}, {
-            clientY: (initialAutoScrollerClientY.current || 0) + (((_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.offsetHeight) || 0) / 2
-          })
-        });
+      onDrag: function onDrag(_ref5) {
+        var location = _ref5.location,
+          source = _ref5.source;
+        if (source.data.type === 'table-header') {
+          var _containerRef$current2;
+          autoScroller.updateInput({
+            input: _objectSpread(_objectSpread({}, location.current.input), {}, {
+              clientY: (initialAutoScrollerClientY.current || 0) + (((_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.offsetHeight) || 0) / 2
+            })
+          });
+        }
       },
-      onDrop: function onDrop(_ref7) {
-        var source = _ref7.source,
-          location = _ref7.location;
+      onDrop: function onDrop(_ref6) {
+        var source = _ref6.source,
+          location = _ref6.location;
         autoScroller.stop();
         if (location.current.dropTargets.length === 0) {
           return;
@@ -261,7 +274,7 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref) {
 
           // We sort columns (whole objects) according to their key order presented in newColumnKeyOrder
           setOrderedColumns(function (columns) {
-            return orderColumns(_toConsumableArray(columns), _toConsumableArray(newColumnKeyOrder));
+            return getOrderedColumns(_toConsumableArray(columns), _toConsumableArray(newColumnKeyOrder));
           });
         }
       }
@@ -271,10 +284,10 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref) {
     return items.map(function (newRowData, rowIndex) {
       return {
         key: "".concat(identityColumnKey && newRowData[identityColumnKey] && newRowData[identityColumnKey].data || rowIndex),
-        cells: visibleSortedColumns.map(function (_ref8) {
+        cells: visibleSortedColumns.map(function (_ref7) {
           var _newRowData$key;
-          var key = _ref8.key,
-            type = _ref8.type;
+          var key = _ref7.key,
+            type = _ref7.type;
           var value = ((_newRowData$key = newRowData[key]) === null || _newRowData$key === void 0 ? void 0 : _newRowData$key.data) || newRowData[key];
           var values = Array.isArray(value) ? value : [value];
           var content = values.map(function (value) {
@@ -286,7 +299,7 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref) {
           return {
             key: key,
             content: content.length === 1 ? content[0] : content,
-            maxWidth: getColumnWidth(key, type)
+            width: getColumnWidth(key, type)
           };
         }),
         ref: rowIndex === items.length - 1 ? function (el) {
@@ -294,7 +307,7 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref) {
         } : undefined
       };
     });
-  }, [identityColumnKey, renderItem, items, visibleSortedColumns]);
+  }, [items, visibleSortedColumns, getColumnWidth, renderItem]);
   var rows = useMemo(function () {
     if (status !== 'loading') {
       return tableRows;
@@ -364,10 +377,12 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref) {
   }, jsx("thead", {
     "data-testid": testId && "".concat(testId, "--head"),
     css: [noDefaultBorderStyles, tableHeadStyles]
-  }, jsx("tr", null, headColumns.map(function (_ref10, cellIndex) {
-    var key = _ref10.key,
-      content = _ref10.content,
-      maxWidth = _ref10.maxWidth;
+  }, jsx("tr", {
+    ref: tableHeaderRowRef
+  }, headerColumns.map(function (_ref9, cellIndex) {
+    var key = _ref9.key,
+      content = _ref9.content,
+      width = _ref9.width;
     var heading = jsx(Tooltip, {
       content: content,
       tag: "span",
@@ -378,10 +393,10 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref) {
     }, content));
     if (onVisibleColumnKeysChange && hasData) {
       var _containerRef$current3;
-      var previewRows = tableRows.map(function (_ref11) {
-        var cells = _ref11.cells;
-        var cell = cells.find(function (_ref12) {
-          var cellKey = _ref12.key;
+      var previewRows = tableRows.map(function (_ref10) {
+        var cells = _ref10.cells;
+        var cell = cells.find(function (_ref11) {
+          var cellKey = _ref11.key;
           return cellKey === key;
         });
         if (cell) {
@@ -397,7 +412,8 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref) {
         key: key,
         id: key,
         index: cellIndex,
-        maxWidth: maxWidth,
+        width: width,
+        onWidthChange: onColumnResize === null || onColumnResize === void 0 ? void 0 : onColumnResize.bind(null, key),
         dndPreviewHeight: ((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.offsetHeight) || 0,
         dragPreview: dragPreview
       }, heading);
@@ -406,9 +422,7 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref) {
         key: key,
         "data-testid": "".concat(key, "-column-heading"),
         style: {
-          // this keeps the column headers from collapsing horizontally during loading states
-          minWidth: maxWidth,
-          maxWidth: maxWidth
+          width: width
         }
       }, heading);
     }
@@ -421,20 +435,20 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref) {
   })))), jsx("tbody", {
     css: noDefaultBorderStyles,
     "data-testid": testId && "".concat(testId, "--body")
-  }, rows.map(function (_ref13) {
-    var key = _ref13.key,
-      cells = _ref13.cells,
-      ref = _ref13.ref;
+  }, rows.map(function (_ref12) {
+    var key = _ref12.key,
+      cells = _ref12.cells,
+      ref = _ref12.ref;
     return jsx("tr", {
       key: key,
       "data-testid": testId && "".concat(testId, "--row-").concat(key),
       ref: ref
-    }, cells.map(function (_ref14, cellIndex) {
-      var cellKey = _ref14.key,
-        content = _ref14.content,
-        maxWidth = _ref14.maxWidth;
+    }, cells.map(function (_ref13, cellIndex) {
+      var cellKey = _ref13.key,
+        content = _ref13.content,
+        width = _ref13.width;
       var loadingRowStyle = {
-        maxWidth: maxWidth
+        width: 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/ui/jira-issues-modal/basic-filters/mocks/fieldValuesEmptyResponse.js

@@ -0,0 +1,14 @@
+export var fieldValuesEmptyResponse = {
+  data: {
+    jira: {
+      jqlBuilder: {
+        fieldValues: {
+          totalCount: 0,
+          pageInfo: {},
+          edges: []
+        }
+      }
+    }
+  }
+};
+export var fieldValuesEmptyResponseMapped = [];