@atlaskit/link-datasource 1.6.2 → 1.6.3

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/link-datasource
 
+## 1.6.3
+
+### Patch Changes
+
+- [#41133](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41133) [`598eb394b7e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/598eb394b7e) - [ux] fix the order of columns is incorrect in column picker problem
+  [ux] Do not reorder columns when the column picker is open
+
 ## 1.6.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.6.2"
+  packageVersion: "1.6.3"
 };

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

@@ -234,7 +234,7 @@ var analyticsContextAttributes = {
 };
 var analyticsContextData = {
   packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.6.2",
+  packageVersion: "1.6.3",
   source: 'datasourceConfigModal'
 };
 var contextData = _objectSpread(_objectSpread({}, analyticsContextData), {}, {

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.IssueLikeDataTableView = exports.EmptyState = void 0;
+exports.orderColumns = 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"));
@@ -72,22 +72,18 @@ function extractIndex(data) {
   (0, _tinyInvariant.default)(typeof index === 'number');
   return index;
 }
-var orderColumns = function orderColumns(columns, visibleColumnKeys) {
-  // newColumnKeyOrder contains keys of selected (visible columns only).
-  // In order to sort all the columns we need to insert unselected ones into this list
-  // We put them into their absolution position as it was in unchanged (before column move) order.
-  columns.forEach(function (_ref, index) {
-    var key = _ref.key;
-    if (!visibleColumnKeys.includes(key)) {
-      visibleColumnKeys.splice(index, 0, key);
-    }
-  });
-  columns.sort(function (a, b) {
+var orderColumns = exports.orderColumns = function orderColumns(columns, visibleColumnKeys) {
+  var visibleColumns = columns.filter(function (column) {
+    return visibleColumnKeys.includes(column.key);
+  }).sort(function (a, b) {
     var indexB = visibleColumnKeys.indexOf(b.key);
     var indexA = visibleColumnKeys.indexOf(a.key);
     return indexA - indexB;
   });
-  return (0, _toConsumableArray2.default)(columns);
+  var invisibleColumns = columns.filter(function (column) {
+    return !visibleColumnKeys.includes(column.key);
+  });
+  return [].concat((0, _toConsumableArray2.default)(visibleColumns), (0, _toConsumableArray2.default)(invisibleColumns));
 };
 var BASE_WIDTH = 8;
 function getColumnWidth(key, type) {
@@ -112,21 +108,21 @@ function getColumnWidth(key, type) {
       return undefined;
   }
 }
-var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
-  var testId = _ref2.testId,
-    onNextPage = _ref2.onNextPage,
-    onLoadDatasourceDetails = _ref2.onLoadDatasourceDetails,
-    items = _ref2.items,
-    columns = _ref2.columns,
-    _ref2$renderItem = _ref2.renderItem,
-    renderItem = _ref2$renderItem === void 0 ? _renderType.fallbackRenderType : _ref2$renderItem,
-    visibleColumnKeys = _ref2.visibleColumnKeys,
-    onVisibleColumnKeysChange = _ref2.onVisibleColumnKeysChange,
-    status = _ref2.status,
-    hasNextPage = _ref2.hasNextPage,
-    scrollableContainerHeight = _ref2.scrollableContainerHeight,
-    parentContainerRenderInstanceId = _ref2.parentContainerRenderInstanceId,
-    extensionKey = _ref2.extensionKey;
+var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLikeDataTableView(_ref) {
+  var testId = _ref.testId,
+    onNextPage = _ref.onNextPage,
+    onLoadDatasourceDetails = _ref.onLoadDatasourceDetails,
+    items = _ref.items,
+    columns = _ref.columns,
+    _ref$renderItem = _ref.renderItem,
+    renderItem = _ref$renderItem === void 0 ? _renderType.fallbackRenderType : _ref$renderItem,
+    visibleColumnKeys = _ref.visibleColumnKeys,
+    onVisibleColumnKeysChange = _ref.onVisibleColumnKeysChange,
+    status = _ref.status,
+    hasNextPage = _ref.hasNextPage,
+    scrollableContainerHeight = _ref.scrollableContainerHeight,
+    parentContainerRenderInstanceId = _ref.parentContainerRenderInstanceId,
+    extensionKey = _ref.extensionKey;
   var tableId = (0, _react.useMemo)(function () {
     return Symbol('unique-id');
   }, []);
@@ -147,8 +143,10 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
     orderedColumns = _useState6[0],
     setOrderedColumns = _useState6[1];
   (0, _react.useEffect)(function () {
-    setOrderedColumns(orderColumns((0, _toConsumableArray2.default)(columns), (0, _toConsumableArray2.default)(visibleColumnKeys)));
-  }, [columns, visibleColumnKeys]);
+    if (!hasFullSchema) {
+      setOrderedColumns(orderColumns((0, _toConsumableArray2.default)(columns), (0, _toConsumableArray2.default)(visibleColumnKeys)));
+    }
+  }, [columns, visibleColumnKeys, hasFullSchema]);
   (0, _react.useEffect)(function () {
     if (parentContainerRenderInstanceId && status === 'resolved') {
       (0, _ufoExperiences.succeedUfoExperience)({
@@ -158,8 +156,8 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
   }, [parentContainerRenderInstanceId, status]);
   var visibleSortedColumns = (0, _react.useMemo)(function () {
     return visibleColumnKeys.map(function (visibleKey) {
-      return orderedColumns.find(function (_ref3) {
-        var key = _ref3.key;
+      return orderedColumns.find(function (_ref2) {
+        var key = _ref2.key;
         return visibleKey === key;
       });
     }).filter(Boolean);
@@ -173,8 +171,8 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
   var loadingRow = (0, _react.useMemo)(function () {
     return {
       key: 'loading',
-      cells: visibleSortedColumns.map(function (_ref4) {
-        var key = _ref4.key;
+      cells: visibleSortedColumns.map(function (_ref3) {
+        var key = _ref3.key;
         var content = (0, _react2.jsx)(_linkingCommon.Skeleton, {
           borderRadius: "var(--ds-border-radius-100, 3px)",
           width: '100%',
@@ -188,10 +186,10 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
     };
   }, [visibleSortedColumns]);
   var headColumns = (0, _react.useMemo)(function () {
-    return visibleSortedColumns.map(function (_ref5) {
-      var key = _ref5.key,
-        title = _ref5.title,
-        type = _ref5.type;
+    return visibleSortedColumns.map(function (_ref4) {
+      var key = _ref4.key,
+        title = _ref4.title,
+        type = _ref4.type;
       return {
         key: key,
         content: title,
@@ -218,9 +216,9 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
       return;
     }
     return (0, _combine.combine)((0, _element.monitorForElements)({
-      onDragStart: function onDragStart(_ref6) {
+      onDragStart: function onDragStart(_ref5) {
         var _containerRef$current;
-        var location = _ref6.location;
+        var location = _ref5.location;
         initialAutoScrollerClientY.current = location.current.input.clientY;
         _pragmaticDragAndDropReactBeautifulDndAutoscroll.autoScroller.start({
           input: _objectSpread(_objectSpread({}, location.current.input), {}, {
@@ -233,18 +231,18 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
           behavior: 'container-only'
         });
       },
-      onDrag: function onDrag(_ref7) {
+      onDrag: function onDrag(_ref6) {
         var _containerRef$current2;
-        var location = _ref7.location;
+        var location = _ref6.location;
         _pragmaticDragAndDropReactBeautifulDndAutoscroll.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(_ref8) {
-        var source = _ref8.source,
-          location = _ref8.location;
+      onDrop: function onDrop(_ref7) {
+        var source = _ref7.source,
+          location = _ref7.location;
         _pragmaticDragAndDropReactBeautifulDndAutoscroll.autoScroller.stop();
         if (location.current.dropTargets.length === 0) {
           return;
@@ -279,10 +277,10 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
     return items.map(function (newRowData, rowIndex) {
       return {
         key: "".concat(identityColumnKey && newRowData[identityColumnKey] && newRowData[identityColumnKey].data || rowIndex),
-        cells: visibleSortedColumns.map(function (_ref9) {
+        cells: visibleSortedColumns.map(function (_ref8) {
           var _newRowData$key;
-          var key = _ref9.key,
-            type = _ref9.type;
+          var key = _ref8.key,
+            type = _ref8.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) {
@@ -356,10 +354,10 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
   }, (0, _react2.jsx)("thead", {
     "data-testid": testId && "".concat(testId, "--head"),
     css: [noDefaultBorderStyles, tableHeadStyles]
-  }, (0, _react2.jsx)("tr", null, headColumns.map(function (_ref11, cellIndex) {
-    var key = _ref11.key,
-      content = _ref11.content,
-      maxWidth = _ref11.maxWidth;
+  }, (0, _react2.jsx)("tr", null, headColumns.map(function (_ref10, cellIndex) {
+    var key = _ref10.key,
+      content = _ref10.content,
+      maxWidth = _ref10.maxWidth;
     var heading = (0, _react2.jsx)(_tooltip.default, {
       content: content,
       tag: "span",
@@ -370,10 +368,10 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
     }, content));
     if (onVisibleColumnKeysChange && hasData) {
       var _containerRef$current3;
-      var previewRows = tableRows.map(function (_ref12) {
-        var cells = _ref12.cells;
-        var cell = cells.find(function (_ref13) {
-          var cellKey = _ref13.key;
+      var previewRows = tableRows.map(function (_ref11) {
+        var cells = _ref11.cells;
+        var cell = cells.find(function (_ref12) {
+          var cellKey = _ref12.key;
           return cellKey === key;
         });
         if (cell) {
@@ -411,18 +409,18 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
   })))), (0, _react2.jsx)("tbody", {
     css: noDefaultBorderStyles,
     "data-testid": testId && "".concat(testId, "--body")
-  }, rows.map(function (_ref14) {
-    var key = _ref14.key,
-      cells = _ref14.cells,
-      ref = _ref14.ref;
+  }, rows.map(function (_ref13) {
+    var key = _ref13.key,
+      cells = _ref13.cells,
+      ref = _ref13.ref;
     return (0, _react2.jsx)("tr", {
       key: key,
       "data-testid": testId && "".concat(testId, "--row-").concat(key),
       ref: ref
-    }, cells.map(function (_ref15, cellIndex) {
-      var cellKey = _ref15.key,
-        content = _ref15.content,
-        maxWidth = _ref15.maxWidth;
+    }, cells.map(function (_ref14, cellIndex) {
+      var cellKey = _ref14.key,
+        content = _ref14.content,
+        maxWidth = _ref14.maxWidth;
       return (0, _react2.jsx)("td", {
         key: cellKey,
         "data-testid": testId && "".concat(testId, "--cell-").concat(cellIndex),

package/dist/es2019/analytics/constants.js

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

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

@@ -194,7 +194,7 @@ const analyticsContextAttributes = {
 };
 const analyticsContextData = {
   packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.6.2",
+  packageVersion: "1.6.3",
   source: 'datasourceConfigModal'
 };
 const contextData = {

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

@@ -73,23 +73,14 @@ function extractIndex(data) {
   invariant(typeof index === 'number');
   return index;
 }
-const orderColumns = (columns, visibleColumnKeys) => {
-  // newColumnKeyOrder contains keys of selected (visible columns only).
-  // In order to sort all the columns we need to insert unselected ones into this list
-  // We put them into their absolution position as it was in unchanged (before column move) order.
-  columns.forEach(({
-    key
-  }, index) => {
-    if (!visibleColumnKeys.includes(key)) {
-      visibleColumnKeys.splice(index, 0, key);
-    }
-  });
-  columns.sort((a, b) => {
+export const orderColumns = (columns, visibleColumnKeys) => {
+  const visibleColumns = columns.filter(column => visibleColumnKeys.includes(column.key)).sort((a, b) => {
     const indexB = visibleColumnKeys.indexOf(b.key);
     const indexA = visibleColumnKeys.indexOf(a.key);
     return indexA - indexB;
   });
-  return [...columns];
+  const invisibleColumns = columns.filter(column => !visibleColumnKeys.includes(column.key));
+  return [...visibleColumns, ...invisibleColumns];
 };
 const BASE_WIDTH = 8;
 function getColumnWidth(key, type) {
@@ -136,8 +127,10 @@ export const IssueLikeDataTableView = ({
   const containerRef = useRef(null);
   const [orderedColumns, setOrderedColumns] = useState(() => orderColumns([...columns], [...visibleColumnKeys]));
   useEffect(() => {
-    setOrderedColumns(orderColumns([...columns], [...visibleColumnKeys]));
-  }, [columns, visibleColumnKeys]);
+    if (!hasFullSchema) {
+      setOrderedColumns(orderColumns([...columns], [...visibleColumnKeys]));
+    }
+  }, [columns, visibleColumnKeys, hasFullSchema]);
   useEffect(() => {
     if (parentContainerRenderInstanceId && status === 'resolved') {
       succeedUfoExperience({

package/dist/esm/analytics/constants.js

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

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

@@ -225,7 +225,7 @@ var analyticsContextAttributes = {
 };
 var analyticsContextData = {
   packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.6.2",
+  packageVersion: "1.6.3",
   source: 'datasourceConfigModal'
 };
 var contextData = _objectSpread(_objectSpread({}, analyticsContextData), {}, {

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

@@ -65,22 +65,18 @@ function extractIndex(data) {
   invariant(typeof index === 'number');
   return index;
 }
-var orderColumns = function orderColumns(columns, visibleColumnKeys) {
-  // newColumnKeyOrder contains keys of selected (visible columns only).
-  // In order to sort all the columns we need to insert unselected ones into this list
-  // We put them into their absolution position as it was in unchanged (before column move) order.
-  columns.forEach(function (_ref, index) {
-    var key = _ref.key;
-    if (!visibleColumnKeys.includes(key)) {
-      visibleColumnKeys.splice(index, 0, key);
-    }
-  });
-  columns.sort(function (a, b) {
+export var orderColumns = function orderColumns(columns, visibleColumnKeys) {
+  var visibleColumns = columns.filter(function (column) {
+    return visibleColumnKeys.includes(column.key);
+  }).sort(function (a, b) {
     var indexB = visibleColumnKeys.indexOf(b.key);
     var indexA = visibleColumnKeys.indexOf(a.key);
     return indexA - indexB;
   });
-  return _toConsumableArray(columns);
+  var invisibleColumns = columns.filter(function (column) {
+    return !visibleColumnKeys.includes(column.key);
+  });
+  return [].concat(_toConsumableArray(visibleColumns), _toConsumableArray(invisibleColumns));
 };
 var BASE_WIDTH = 8;
 function getColumnWidth(key, type) {
@@ -105,21 +101,21 @@ function getColumnWidth(key, type) {
       return undefined;
   }
 }
-export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
-  var testId = _ref2.testId,
-    onNextPage = _ref2.onNextPage,
-    onLoadDatasourceDetails = _ref2.onLoadDatasourceDetails,
-    items = _ref2.items,
-    columns = _ref2.columns,
-    _ref2$renderItem = _ref2.renderItem,
-    renderItem = _ref2$renderItem === void 0 ? fallbackRenderType : _ref2$renderItem,
-    visibleColumnKeys = _ref2.visibleColumnKeys,
-    onVisibleColumnKeysChange = _ref2.onVisibleColumnKeysChange,
-    status = _ref2.status,
-    hasNextPage = _ref2.hasNextPage,
-    scrollableContainerHeight = _ref2.scrollableContainerHeight,
-    parentContainerRenderInstanceId = _ref2.parentContainerRenderInstanceId,
-    extensionKey = _ref2.extensionKey;
+export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref) {
+  var testId = _ref.testId,
+    onNextPage = _ref.onNextPage,
+    onLoadDatasourceDetails = _ref.onLoadDatasourceDetails,
+    items = _ref.items,
+    columns = _ref.columns,
+    _ref$renderItem = _ref.renderItem,
+    renderItem = _ref$renderItem === void 0 ? fallbackRenderType : _ref$renderItem,
+    visibleColumnKeys = _ref.visibleColumnKeys,
+    onVisibleColumnKeysChange = _ref.onVisibleColumnKeysChange,
+    status = _ref.status,
+    hasNextPage = _ref.hasNextPage,
+    scrollableContainerHeight = _ref.scrollableContainerHeight,
+    parentContainerRenderInstanceId = _ref.parentContainerRenderInstanceId,
+    extensionKey = _ref.extensionKey;
   var tableId = useMemo(function () {
     return Symbol('unique-id');
   }, []);
@@ -140,8 +136,10 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
     orderedColumns = _useState6[0],
     setOrderedColumns = _useState6[1];
   useEffect(function () {
-    setOrderedColumns(orderColumns(_toConsumableArray(columns), _toConsumableArray(visibleColumnKeys)));
-  }, [columns, visibleColumnKeys]);
+    if (!hasFullSchema) {
+      setOrderedColumns(orderColumns(_toConsumableArray(columns), _toConsumableArray(visibleColumnKeys)));
+    }
+  }, [columns, visibleColumnKeys, hasFullSchema]);
   useEffect(function () {
     if (parentContainerRenderInstanceId && status === 'resolved') {
       succeedUfoExperience({
@@ -151,8 +149,8 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
   }, [parentContainerRenderInstanceId, status]);
   var visibleSortedColumns = useMemo(function () {
     return visibleColumnKeys.map(function (visibleKey) {
-      return orderedColumns.find(function (_ref3) {
-        var key = _ref3.key;
+      return orderedColumns.find(function (_ref2) {
+        var key = _ref2.key;
         return visibleKey === key;
       });
     }).filter(Boolean);
@@ -166,8 +164,8 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
   var loadingRow = useMemo(function () {
     return {
       key: 'loading',
-      cells: visibleSortedColumns.map(function (_ref4) {
-        var key = _ref4.key;
+      cells: visibleSortedColumns.map(function (_ref3) {
+        var key = _ref3.key;
         var content = jsx(Skeleton, {
           borderRadius: "var(--ds-border-radius-100, 3px)",
           width: '100%',
@@ -181,10 +179,10 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
     };
   }, [visibleSortedColumns]);
   var headColumns = useMemo(function () {
-    return visibleSortedColumns.map(function (_ref5) {
-      var key = _ref5.key,
-        title = _ref5.title,
-        type = _ref5.type;
+    return visibleSortedColumns.map(function (_ref4) {
+      var key = _ref4.key,
+        title = _ref4.title,
+        type = _ref4.type;
       return {
         key: key,
         content: title,
@@ -211,9 +209,9 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
       return;
     }
     return combine(monitorForElements({
-      onDragStart: function onDragStart(_ref6) {
+      onDragStart: function onDragStart(_ref5) {
         var _containerRef$current;
-        var location = _ref6.location;
+        var location = _ref5.location;
         initialAutoScrollerClientY.current = location.current.input.clientY;
         autoScroller.start({
           input: _objectSpread(_objectSpread({}, location.current.input), {}, {
@@ -226,18 +224,18 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
           behavior: 'container-only'
         });
       },
-      onDrag: function onDrag(_ref7) {
+      onDrag: function onDrag(_ref6) {
         var _containerRef$current2;
-        var location = _ref7.location;
+        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
           })
         });
       },
-      onDrop: function onDrop(_ref8) {
-        var source = _ref8.source,
-          location = _ref8.location;
+      onDrop: function onDrop(_ref7) {
+        var source = _ref7.source,
+          location = _ref7.location;
         autoScroller.stop();
         if (location.current.dropTargets.length === 0) {
           return;
@@ -272,10 +270,10 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
     return items.map(function (newRowData, rowIndex) {
       return {
         key: "".concat(identityColumnKey && newRowData[identityColumnKey] && newRowData[identityColumnKey].data || rowIndex),
-        cells: visibleSortedColumns.map(function (_ref9) {
+        cells: visibleSortedColumns.map(function (_ref8) {
           var _newRowData$key;
-          var key = _ref9.key,
-            type = _ref9.type;
+          var key = _ref8.key,
+            type = _ref8.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) {
@@ -349,10 +347,10 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
   }, jsx("thead", {
     "data-testid": testId && "".concat(testId, "--head"),
     css: [noDefaultBorderStyles, tableHeadStyles]
-  }, jsx("tr", null, headColumns.map(function (_ref11, cellIndex) {
-    var key = _ref11.key,
-      content = _ref11.content,
-      maxWidth = _ref11.maxWidth;
+  }, jsx("tr", null, headColumns.map(function (_ref10, cellIndex) {
+    var key = _ref10.key,
+      content = _ref10.content,
+      maxWidth = _ref10.maxWidth;
     var heading = jsx(Tooltip, {
       content: content,
       tag: "span",
@@ -363,10 +361,10 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
     }, content));
     if (onVisibleColumnKeysChange && hasData) {
       var _containerRef$current3;
-      var previewRows = tableRows.map(function (_ref12) {
-        var cells = _ref12.cells;
-        var cell = cells.find(function (_ref13) {
-          var cellKey = _ref13.key;
+      var previewRows = tableRows.map(function (_ref11) {
+        var cells = _ref11.cells;
+        var cell = cells.find(function (_ref12) {
+          var cellKey = _ref12.key;
           return cellKey === key;
         });
         if (cell) {
@@ -404,18 +402,18 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
   })))), jsx("tbody", {
     css: noDefaultBorderStyles,
     "data-testid": testId && "".concat(testId, "--body")
-  }, rows.map(function (_ref14) {
-    var key = _ref14.key,
-      cells = _ref14.cells,
-      ref = _ref14.ref;
+  }, rows.map(function (_ref13) {
+    var key = _ref13.key,
+      cells = _ref13.cells,
+      ref = _ref13.ref;
     return jsx("tr", {
       key: key,
       "data-testid": testId && "".concat(testId, "--row-").concat(key),
       ref: ref
-    }, cells.map(function (_ref15, cellIndex) {
-      var cellKey = _ref15.key,
-        content = _ref15.content,
-        maxWidth = _ref15.maxWidth;
+    }, cells.map(function (_ref14, cellIndex) {
+      var cellKey = _ref14.key,
+        content = _ref14.content,
+        maxWidth = _ref14.maxWidth;
       return jsx("td", {
         key: cellKey,
         "data-testid": testId && "".concat(testId, "--cell-").concat(cellIndex),

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

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { Ref } from 'react';
 import { jsx } from '@emotion/react';
+import { DatasourceResponseSchemaProperty } from '@atlaskit/linking-types/datasource';
 import { IssueLikeDataTableViewProps } from './types';
 export interface RowType {
     cells: Array<RowCellType>;
@@ -12,5 +13,6 @@ export interface RowCellType {
     content?: React.ReactNode | string;
     maxWidth?: number;
 }
+export declare const orderColumns: (columns: DatasourceResponseSchemaProperty[], visibleColumnKeys: string[]) => DatasourceResponseSchemaProperty[];
 export declare const IssueLikeDataTableView: ({ testId, onNextPage, onLoadDatasourceDetails, items, columns, renderItem, visibleColumnKeys, onVisibleColumnKeysChange, status, hasNextPage, scrollableContainerHeight, parentContainerRenderInstanceId, extensionKey, }: IssueLikeDataTableViewProps) => jsx.JSX.Element;
 export declare const EmptyState: ({ isCompact, isLoading, testId }: import("./empty-state").Props) => jsx.JSX.Element;

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

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { Ref } from 'react';
 import { jsx } from '@emotion/react';
+import { DatasourceResponseSchemaProperty } from '@atlaskit/linking-types/datasource';
 import { IssueLikeDataTableViewProps } from './types';
 export interface RowType {
     cells: Array<RowCellType>;
@@ -12,5 +13,6 @@ export interface RowCellType {
     content?: React.ReactNode | string;
     maxWidth?: number;
 }
+export declare const orderColumns: (columns: DatasourceResponseSchemaProperty[], visibleColumnKeys: string[]) => DatasourceResponseSchemaProperty[];
 export declare const IssueLikeDataTableView: ({ testId, onNextPage, onLoadDatasourceDetails, items, columns, renderItem, visibleColumnKeys, onVisibleColumnKeysChange, status, hasNextPage, scrollableContainerHeight, parentContainerRenderInstanceId, extensionKey, }: IssueLikeDataTableViewProps) => jsx.JSX.Element;
 export declare const EmptyState: ({ isCompact, isLoading, testId }: import("./empty-state").Props) => jsx.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-datasource",
-  "version": "1.6.2",
+  "version": "1.6.3",
   "description": "UI Components to support linking platform dataset feature",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -32,7 +32,7 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^32.0.0",
     "@atlaskit/analytics-next": "^9.1.3",
-    "@atlaskit/avatar": "^21.3.0",
+    "@atlaskit/avatar": "^21.4.0",
     "@atlaskit/button": "^16.10.0",
     "@atlaskit/dropdown-menu": "^11.14.0",
     "@atlaskit/editor-prosemirror": "1.1.0",
@@ -55,7 +55,7 @@
     "@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll": "^0.6.0",
     "@atlaskit/pragmatic-drag-and-drop-react-indicator": "^0.16.0",
     "@atlaskit/select": "^16.7.0",
-    "@atlaskit/smart-card": "^26.33.0",
+    "@atlaskit/smart-card": "^26.34.0",
     "@atlaskit/spinner": "^15.6.0",
     "@atlaskit/tag": "^11.6.0",
     "@atlaskit/textfield": "5.6.8",