@atlaskit/link-datasource 5.5.1 → 5.6.0

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

@@ -8,7 +8,8 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["as", "style"],
   _excluded2 = ["as", "style"],
   _excluded3 = ["as", "style"],
-  _excluded4 = ["as", "style"];
+  _excluded4 = ["as", "style"],
+  _excluded5 = ["as", "style"];
 import "./index.compiled.css";
 import { forwardRef } from 'react';
 import * as React from 'react';
@@ -19,9 +20,14 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 /* eslint-disable @atlaskit/design-system/use-tokens-typography */
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useIntl } from 'react-intl';
 import invariant from 'tiny-invariant';
+import Button from '@atlaskit/button/new';
 import { FlagsProvider } from '@atlaskit/flag';
+import SortAscendingIcon from '@atlaskit/icon/core/sort-ascending';
+import SortDescendingIcon from '@atlaskit/icon/core/sort-descending';
 import { Skeleton } from '@atlaskit/linking-common';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 import { reorderWithEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge';
 import { autoScroller } from '@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll';
@@ -33,9 +39,11 @@ import { startUfoExperience, succeedUfoExperience } from '../../analytics/ufoExp
 import { useDatasourceExperienceId } from '../../contexts/datasource-experience-id';
 import { useIsInPDFRender } from '../../hooks/useIsInPDFRender';
 import { ColumnPicker } from './column-picker';
+import { GlyphPlaceholder } from './custom-icons';
 import { DragColumnPreview } from './drag-column-preview';
 import { DraggableTableHeading } from './draggable-table-heading';
 import TableEmptyState from './empty-state';
+import { issueLikeTableMessages } from './messages';
 import { renderType } from './render-type';
 import { TableCellContent } from './table-cell-content';
 import { useIsOnScreen } from './useIsOnScreen';
@@ -127,6 +135,22 @@ var tableStyles = null;
 var noDefaultBorderStyles = null;
 var headerStyles = null;
 var headingHoverEffectStyles = null;
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- Matches DraggableTableHeading button normalization.
+var SortableHeaderParent = forwardRef(function (_ref5, __cmplr) {
+  var _ref5$as = _ref5.as,
+    C = _ref5$as === void 0 ? "div" : _ref5$as,
+    __cmpls = _ref5.style,
+    __cmplp = _objectWithoutProperties(_ref5, _excluded5);
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_1e0c1txw _4cvr1h6o _o5721q9c _1wtnze3t _ficf1e5h _jq8g1wug _11lvze3t _yhjm1b66", __cmplp.className])
+  }));
+});
+if (process.env.NODE_ENV !== 'production') {
+  SortableHeaderParent.displayName = 'SortableHeaderParent';
+}
 function extractIndex(data) {
   var index = data.index;
   invariant(typeof index === 'number');
@@ -173,26 +197,30 @@ function getDefaultColumnWidth(key, type) {
       return DEFAULT_WIDTH;
   }
 }
-export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
+export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref6) {
   var _containerRef$current;
-  var testId = _ref5.testId,
-    onNextPage = _ref5.onNextPage,
-    onLoadDatasourceDetails = _ref5.onLoadDatasourceDetails,
-    items = _ref5.items,
-    itemIds = _ref5.itemIds,
-    columns = _ref5.columns,
-    _ref5$renderItem = _ref5.renderItem,
-    renderItem = _ref5$renderItem === void 0 ? renderType : _ref5$renderItem,
-    visibleColumnKeys = _ref5.visibleColumnKeys,
-    onVisibleColumnKeysChange = _ref5.onVisibleColumnKeysChange,
-    columnCustomSizes = _ref5.columnCustomSizes,
-    onColumnResize = _ref5.onColumnResize,
-    wrappedColumnKeys = _ref5.wrappedColumnKeys,
-    onWrappedColumnChange = _ref5.onWrappedColumnChange,
-    status = _ref5.status,
-    hasNextPage = _ref5.hasNextPage,
-    scrollableContainerHeight = _ref5.scrollableContainerHeight,
-    extensionKey = _ref5.extensionKey;
+  var testId = _ref6.testId,
+    onNextPage = _ref6.onNextPage,
+    onLoadDatasourceDetails = _ref6.onLoadDatasourceDetails,
+    items = _ref6.items,
+    itemIds = _ref6.itemIds,
+    columns = _ref6.columns,
+    _ref6$renderItem = _ref6.renderItem,
+    renderItem = _ref6$renderItem === void 0 ? renderType : _ref6$renderItem,
+    visibleColumnKeys = _ref6.visibleColumnKeys,
+    onVisibleColumnKeysChange = _ref6.onVisibleColumnKeysChange,
+    columnCustomSizes = _ref6.columnCustomSizes,
+    onColumnResize = _ref6.onColumnResize,
+    onColumnSort = _ref6.onColumnSort,
+    wrappedColumnKeys = _ref6.wrappedColumnKeys,
+    onWrappedColumnChange = _ref6.onWrappedColumnChange,
+    sortState = _ref6.sortState,
+    status = _ref6.status,
+    hasNextPage = _ref6.hasNextPage,
+    scrollableContainerHeight = _ref6.scrollableContainerHeight,
+    extensionKey = _ref6.extensionKey;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
   var tableId = useMemo(function () {
     return Symbol('unique-id');
   }, []);
@@ -229,8 +257,8 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
   }, [experienceId, status]);
   var visibleSortedColumns = useMemo(function () {
     return visibleColumnKeys.map(function (visibleKey) {
-      return orderedColumns.find(function (_ref6) {
-        var key = _ref6.key;
+      return orderedColumns.find(function (_ref7) {
+        var key = _ref7.key;
         return visibleKey === key;
       });
     }).filter(Boolean);
@@ -240,9 +268,9 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
   // If data comes first, then columns and then visibleColumnKeys it blows up,
   // or some other combination.
   var columnsWidthsSum = useMemo(function () {
-    return visibleSortedColumns.map(function (_ref7) {
-      var key = _ref7.key,
-        type = _ref7.type;
+    return visibleSortedColumns.map(function (_ref8) {
+      var key = _ref8.key,
+        type = _ref8.type;
       return (columnCustomSizes === null || columnCustomSizes === void 0 ? void 0 : columnCustomSizes[key]) || getDefaultColumnWidth(key, type);
     }).reduce(function (sum, width) {
       return width + sum;
@@ -258,10 +286,10 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
     }
   }, [columnCustomSizes, columnsWidthsSum, shouldUseWidth, tableContainerWidth]);
   var headerColumns = useMemo(function () {
-    return visibleSortedColumns.map(function (_ref8, index) {
-      var key = _ref8.key,
-        title = _ref8.title,
-        type = _ref8.type;
+    return visibleSortedColumns.map(function (_ref9, index) {
+      var key = _ref9.key,
+        title = _ref9.title,
+        type = _ref9.type;
       return {
         key: key,
         content: title,
@@ -316,9 +344,9 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
       return;
     }
     return combine(monitorForElements({
-      onDragStart: function onDragStart(_ref9) {
-        var location = _ref9.location,
-          source = _ref9.source;
+      onDragStart: function onDragStart(_ref0) {
+        var location = _ref0.location,
+          source = _ref0.source;
         initialAutoScrollerClientY.current = location.current.input.clientY;
         if (source.data.type === 'table-header') {
           var _containerRef$current2;
@@ -334,9 +362,9 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
           });
         }
       },
-      onDrag: function onDrag(_ref0) {
-        var location = _ref0.location,
-          source = _ref0.source;
+      onDrag: function onDrag(_ref1) {
+        var location = _ref1.location,
+          source = _ref1.source;
         if (source.data.type === 'table-header') {
           var _containerRef$current3;
           autoScroller.updateInput({
@@ -346,9 +374,9 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
           });
         }
       },
-      onDrop: function onDrop(_ref1) {
-        var source = _ref1.source,
-          location = _ref1.location;
+      onDrop: function onDrop(_ref10) {
+        var source = _ref10.source,
+          location = _ref10.location;
         autoScroller.stop();
         if (location.current.dropTargets.length === 0) {
           return;
@@ -383,10 +411,10 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
     return itemIds.map(function (id, rowIndex) {
       return {
         key: id,
-        cells: visibleSortedColumns.map(function (_ref10, cellIndex) {
-          var key = _ref10.key,
-            type = _ref10.type,
-            title = _ref10.title;
+        cells: visibleSortedColumns.map(function (_ref11, cellIndex) {
+          var key = _ref11.key,
+            type = _ref11.type,
+            title = _ref11.title;
           return {
             key: key,
             columnKey: key,
@@ -466,6 +494,9 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
     }, _callee, null, [[2, 4]]);
   })), [experienceId, extensionKey, hasFullSchema, onLoadDatasourceDetails]);
   var isEditable = onVisibleColumnKeysChange && hasData;
+  // Sorting is enabled only when the table owns the header interaction (read-only mode).
+  // Editable tables reserve header interactions for drag/resize/wrap controls.
+  var shouldEnableColumnSort = !!onColumnSort && !onVisibleColumnKeysChange && !onColumnResize && !onWrappedColumnChange;
   var orderedColumnsAreUpToDate = orderedColumns.length === columns.length;
   var shouldDisplayColumnsInPicker = hasFullSchema && orderedColumnsAreUpToDate;
   var view = /*#__PURE__*/React.createElement("div", {
@@ -495,10 +526,10 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
     className: ax(["_n7zlidpf", "_bfhkchd4 _kqsw1if8 _154iidpf _1pbyzo7u", !!onVisibleColumnKeysChange ? 'has-column-picker' : ''])
   }, /*#__PURE__*/React.createElement("tr", {
     ref: tableHeaderRowRef
-  }, headerColumns.map(function (_ref12, cellIndex) {
-    var key = _ref12.key,
-      content = _ref12.content,
-      width = _ref12.width;
+  }, headerColumns.map(function (_ref13, cellIndex) {
+    var key = _ref13.key,
+      content = _ref13.content,
+      width = _ref13.width;
     var heading = /*#__PURE__*/React.createElement(Tooltip, {
       content: content,
       tag: "span",
@@ -509,17 +540,42 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
       className: ax(["_11c8wadc _k48p1wq8"])
     }, content));
     var isHeadingOutsideButton = !isEditable || !onWrappedColumnChange;
-    if (isHeadingOutsideButton) {
+    if (shouldEnableColumnSort) {
+      var sortedDirection = (sortState === null || sortState === void 0 ? void 0 : sortState.key) === key ? sortState.direction : undefined;
+      // Use directional icon only for the active sort column; keep width stable otherwise.
+      var SortIcon = sortedDirection ? sortedDirection === 'ASC' ? SortAscendingIcon : SortDescendingIcon : GlyphPlaceholder;
+      var sortLabel = typeof content === 'string' ? content : key;
+      var sortButtonAriaLabel = sortedDirection === 'ASC' ? formatMessage(issueLikeTableMessages.sortByColumnDescendingAction, {
+        column: sortLabel
+      }) : formatMessage(issueLikeTableMessages.sortByColumnAscendingAction, {
+        column: sortLabel
+      });
+      heading = /*#__PURE__*/React.createElement(SortableHeaderParent, null, /*#__PURE__*/React.createElement(Button, {
+        appearance: "subtle",
+        spacing: "compact",
+        shouldFitContainer: true,
+        testId: "".concat(key, "-column-sort-button"),
+        "aria-label": sortButtonAriaLabel,
+        iconAfter: function iconAfter(iconProps) {
+          return /*#__PURE__*/React.createElement(SortIcon, _extends({}, iconProps, {
+            size: "small"
+          }));
+        },
+        onClick: function onClick() {
+          return onColumnSort === null || onColumnSort === void 0 ? void 0 : onColumnSort(key);
+        }
+      }, heading));
+    } else if (isHeadingOutsideButton) {
       heading = /*#__PURE__*/React.createElement("div", {
         className: ax(["_1e0c1txw _4cvr1h6o _o5721q9c _8vu418qm _irr3l4ek"])
       }, heading);
     }
     if (isEditable) {
       var _containerRef$current4;
-      var previewRows = tableRows.map(function (_ref13) {
-        var cells = _ref13.cells;
-        var cell = cells.find(function (_ref14) {
-          var cellKey = _ref14.key;
+      var previewRows = tableRows.map(function (_ref14) {
+        var cells = _ref14.cells;
+        var cell = cells.find(function (_ref15) {
+          var cellKey = _ref15.key;
           return cellKey === key;
         });
         if (cell) {
@@ -543,16 +599,18 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
         onIsWrappedChange: onWrappedColumnChange === null || onWrappedColumnChange === void 0 ? void 0 : onWrappedColumnChange.bind(null, key)
       }, heading);
     } else {
-      return /*#__PURE__*/React.createElement(TableHeading, {
+      return /*#__PURE__*/React.createElement(TableHeading, _extends({
         key: key,
         "data-testid": "".concat(key, "-column-heading")
+      }, fg('platform_lp_jira_sllv_renderer_column_sorting') ? {
+        'aria-sort': (sortState === null || sortState === void 0 ? void 0 : sortState.key) === key && sortState.direction === 'ASC' ? 'ascending' : (sortState === null || sortState === void 0 ? void 0 : sortState.key) === key && sortState.direction === 'DESC' ? 'descending' : undefined
+      } : {}, {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-        ,
         style: getWidthCss({
           shouldUseWidth: shouldUseWidth,
           width: width
         })
-      }, heading);
+      }), heading);
     }
   }), onVisibleColumnKeysChange && /*#__PURE__*/React.createElement(ColumnPickerHeader, null, /*#__PURE__*/React.createElement(ColumnPicker, {
     columns: shouldDisplayColumnsInPicker ? orderedColumns : [],
@@ -562,18 +620,18 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
   })))), /*#__PURE__*/React.createElement("tbody", {
     "data-testid": testId && "".concat(testId, "--body"),
     className: ax(["_n7zlidpf"])
-  }, rows.map(function (_ref15) {
-    var key = _ref15.key,
-      cells = _ref15.cells,
-      ref = _ref15.ref;
+  }, rows.map(function (_ref16) {
+    var key = _ref16.key,
+      cells = _ref16.cells,
+      ref = _ref16.ref;
     return /*#__PURE__*/React.createElement("tr", {
       key: key,
       "data-testid": testId && "".concat(testId, "--row-").concat(key),
       ref: ref
-    }, cells.map(function (_ref16, cellIndex) {
-      var cellKey = _ref16.key,
-        content = _ref16.content,
-        width = _ref16.width;
+    }, cells.map(function (_ref17, cellIndex) {
+      var cellKey = _ref17.key,
+        content = _ref17.content,
+        width = _ref17.width;
       var isLastCell = cellIndex === cells.length - 1;
       var loadingRowStyle = getWidthCss({
         shouldUseWidth: shouldUseWidth,

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

@@ -40,6 +40,16 @@ export var issueLikeTableMessages = defineMessages({
     description: 'Table header Dropdown item for making whole column to not wrap text',
     defaultMessage: 'Unwrap text'
   },
+  sortByColumnAscendingAction: {
+    id: 'linkDataSource.issue-line-table.sort-by-column-ascending-action',
+    description: 'Accessible label for sorting a table column in ascending order',
+    defaultMessage: 'Sort by {column} ascending.'
+  },
+  sortByColumnDescendingAction: {
+    id: 'linkDataSource.issue-line-table.sort-by-column-descending-action',
+    description: 'Accessible label for sorting a table column in descending order',
+    defaultMessage: 'Sort by {column} descending.'
+  },
   fetchActionErrorGenericDescriptionGalaxia: {
     id: 'linkDataSource.issue-line-table.fetch-action-error-generic-description-galaxia',
     description: 'Generic error message description shown when fetching inline edit dropdown field fails',

package/dist/types/ui/datasource-table-view/datasource-column-sort.d.ts

@@ -0,0 +1,12 @@
+import type { DatasourceParameters } from '@atlaskit/linking-types';
+import type { DatasourceTableSortState } from '../issue-like-table/types';
+export type { DatasourceTableSortState } from '../issue-like-table/types';
+export type DatasourceColumnSortGetter = ({ parameters, columnKey, currentSort, }: {
+    columnKey: string;
+    currentSort?: DatasourceTableSortState;
+    parameters: DatasourceParameters;
+}) => {
+    parameters: DatasourceParameters;
+    sort: DatasourceTableSortState;
+} | undefined;
+export declare const getDatasourceColumnSortGetter: (datasourceId: string) => DatasourceColumnSortGetter | undefined;

package/dist/types/ui/datasource-table-view/datasourceTableView.d.ts

@@ -10,9 +10,9 @@ export declare const DatasourceTableView: ForwardRefExoticComponent<{
     datasourceId: string;
     parameters: DatasourceParameters;
     url?: string;
-} & Partial<Pick<IssueLikeDataTableViewProps, 'visibleColumnKeys' | 'onVisibleColumnKeysChange' | 'wrappedColumnKeys' | 'onWrappedColumnChange' | 'onColumnResize' | 'columnCustomSizes' | 'scrollableContainerHeight'>> & WithContextProps & RefAttributes<any>>;
+} & Partial<Pick<IssueLikeDataTableViewProps, 'visibleColumnKeys' | 'onVisibleColumnKeysChange' | 'wrappedColumnKeys' | 'onWrappedColumnChange' | 'onColumnResize' | 'onColumnSort' | 'sortState' | 'columnCustomSizes' | 'scrollableContainerHeight'>> & WithContextProps & RefAttributes<any>>;
 export declare const DataSourceTableViewNoSuspense: ForwardRefExoticComponent<{
     datasourceId: string;
     parameters: DatasourceParameters;
     url?: string;
-} & Partial<Pick<IssueLikeDataTableViewProps, 'visibleColumnKeys' | 'onVisibleColumnKeysChange' | 'wrappedColumnKeys' | 'onWrappedColumnChange' | 'onColumnResize' | 'columnCustomSizes' | 'scrollableContainerHeight'>> & WithContextProps & RefAttributes<any>>;
+} & Partial<Pick<IssueLikeDataTableViewProps, 'visibleColumnKeys' | 'onVisibleColumnKeysChange' | 'wrappedColumnKeys' | 'onWrappedColumnChange' | 'onColumnResize' | 'onColumnSort' | 'sortState' | 'columnCustomSizes' | 'scrollableContainerHeight'>> & WithContextProps & RefAttributes<any>>;

package/dist/types/ui/datasource-table-view/types.d.ts

@@ -7,4 +7,4 @@ export type DatasourceTableViewProps = {
     parameters: DatasourceParameters;
     /** Url for an existing datasource, initially used for displaying to a user unauthorized to query that site  */
     url?: string;
-} & Partial<Pick<IssueLikeDataTableViewProps, 'visibleColumnKeys' | 'onVisibleColumnKeysChange' | 'wrappedColumnKeys' | 'onWrappedColumnChange' | 'onColumnResize' | 'columnCustomSizes' | 'scrollableContainerHeight'>>;
+} & Partial<Pick<IssueLikeDataTableViewProps, 'visibleColumnKeys' | 'onVisibleColumnKeysChange' | 'wrappedColumnKeys' | 'onWrappedColumnChange' | 'onColumnResize' | 'onColumnSort' | 'sortState' | 'columnCustomSizes' | 'scrollableContainerHeight'>>;

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

@@ -2,5 +2,5 @@ import { type DatasourceResponseSchemaProperty } from '@atlaskit/linking-types/d
 import { type Props } from './empty-state';
 import { type IssueLikeDataTableViewProps } from './types';
 export declare const getOrderedColumns: (columns: DatasourceResponseSchemaProperty[], visibleColumnKeys: string[]) => DatasourceResponseSchemaProperty[];
-export declare const IssueLikeDataTableView: ({ testId, onNextPage, onLoadDatasourceDetails, items, itemIds, columns, renderItem, visibleColumnKeys, onVisibleColumnKeysChange, columnCustomSizes, onColumnResize, wrappedColumnKeys, onWrappedColumnChange, status, hasNextPage, scrollableContainerHeight, extensionKey, }: IssueLikeDataTableViewProps) => JSX.Element;
+export declare const IssueLikeDataTableView: ({ testId, onNextPage, onLoadDatasourceDetails, items, itemIds, columns, renderItem, visibleColumnKeys, onVisibleColumnKeysChange, columnCustomSizes, onColumnResize, onColumnSort, wrappedColumnKeys, onWrappedColumnChange, sortState, status, hasNextPage, scrollableContainerHeight, extensionKey, }: IssueLikeDataTableViewProps) => JSX.Element;
 export declare const EmptyState: ({ isCompact, testId }: Props) => JSX.Element;

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

@@ -1,47 +1,57 @@
 export declare const issueLikeTableMessages: {
-    updateError403Description: {
-        id: string;
-        description: string;
+    fetchActionErrorGenericDescription: {
         defaultMessage: string;
-    };
-    updateError403Title: {
-        id: string;
         description: string;
-        defaultMessage: string;
-    };
-    updateErrorGenericDescription: {
         id: string;
-        description: string;
-        defaultMessage: string;
     };
-    updateErrorGenericTitle: {
-        id: string;
-        description: string;
+    fetchActionErrorGenericDescriptionGalaxia: {
         defaultMessage: string;
-    };
-    fetchActionErrorGenericDescription: {
-        id: string;
         description: string;
-        defaultMessage: string;
+        id: string;
     };
     fetchActionErrorGenericTitle: {
-        id: string;
-        description: string;
         defaultMessage: string;
-    };
-    wrapText: {
+        description: string;
         id: string;
+    };
+    sortByColumnAscendingAction: {
+        defaultMessage: string;
         description: string;
+        id: string;
+    };
+    sortByColumnDescendingAction: {
         defaultMessage: string;
+        description: string;
+        id: string;
     };
     unwrapText: {
+        defaultMessage: string;
+        description: string;
         id: string;
+    };
+    updateError403Description: {
+        defaultMessage: string;
         description: string;
+        id: string;
+    };
+    updateError403Title: {
         defaultMessage: string;
+        description: string;
+        id: string;
     };
-    fetchActionErrorGenericDescriptionGalaxia: {
+    updateErrorGenericDescription: {
+        defaultMessage: string;
+        description: string;
         id: string;
+    };
+    updateErrorGenericTitle: {
+        defaultMessage: string;
         description: string;
+        id: string;
+    };
+    wrapText: {
         defaultMessage: string;
+        description: string;
+        id: string;
     };
 };

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

@@ -23,6 +23,11 @@ export type TableViewPropsRenderType = (item: DatasourceTypeWithOnlyValues) => R
 export interface ColumnSizesMap {
     [key: string]: number;
 }
+export type DatasourceTableSortDirection = 'ASC' | 'DESC';
+export type DatasourceTableSortState = {
+    direction: DatasourceTableSortDirection;
+    key: string;
+};
 export interface IssueLikeDataTableViewProps {
     /**
      * Map of column key to custom column width
@@ -42,6 +47,10 @@ export interface IssueLikeDataTableViewProps {
     itemIds: string[];
     items: DatasourceDataResponseItem[];
     onColumnResize?: (key: string, width: number) => void;
+    /**
+     * Callback to be invoked whenever a user sorts a datasource table by a column.
+     */
+    onColumnSort?: (key: string) => void;
     onLoadDatasourceDetails: () => Promise<void>;
     onNextPage: NextPageType;
     /**
@@ -76,6 +85,7 @@ export interface IssueLikeDataTableViewProps {
      * It this number is 0 it will not restrict height and not make container scrollable.
      */
     scrollableContainerHeight?: number;
+    sortState?: DatasourceTableSortState;
     status: DatasourceTableStatusType;
     testId?: string;
     /**

package/dist/types-ts4.5/ui/datasource-table-view/datasource-column-sort.d.ts

@@ -0,0 +1,12 @@
+import type { DatasourceParameters } from '@atlaskit/linking-types';
+import type { DatasourceTableSortState } from '../issue-like-table/types';
+export type { DatasourceTableSortState } from '../issue-like-table/types';
+export type DatasourceColumnSortGetter = ({ parameters, columnKey, currentSort, }: {
+    columnKey: string;
+    currentSort?: DatasourceTableSortState;
+    parameters: DatasourceParameters;
+}) => {
+    parameters: DatasourceParameters;
+    sort: DatasourceTableSortState;
+} | undefined;
+export declare const getDatasourceColumnSortGetter: (datasourceId: string) => DatasourceColumnSortGetter | undefined;

package/dist/types-ts4.5/ui/datasource-table-view/datasourceTableView.d.ts

@@ -10,9 +10,9 @@ export declare const DatasourceTableView: ForwardRefExoticComponent<{
     datasourceId: string;
     parameters: DatasourceParameters;
     url?: string;
-} & Partial<Pick<IssueLikeDataTableViewProps, 'visibleColumnKeys' | 'onVisibleColumnKeysChange' | 'wrappedColumnKeys' | 'onWrappedColumnChange' | 'onColumnResize' | 'columnCustomSizes' | 'scrollableContainerHeight'>> & WithContextProps & RefAttributes<any>>;
+} & Partial<Pick<IssueLikeDataTableViewProps, 'visibleColumnKeys' | 'onVisibleColumnKeysChange' | 'wrappedColumnKeys' | 'onWrappedColumnChange' | 'onColumnResize' | 'onColumnSort' | 'sortState' | 'columnCustomSizes' | 'scrollableContainerHeight'>> & WithContextProps & RefAttributes<any>>;
 export declare const DataSourceTableViewNoSuspense: ForwardRefExoticComponent<{
     datasourceId: string;
     parameters: DatasourceParameters;
     url?: string;
-} & Partial<Pick<IssueLikeDataTableViewProps, 'visibleColumnKeys' | 'onVisibleColumnKeysChange' | 'wrappedColumnKeys' | 'onWrappedColumnChange' | 'onColumnResize' | 'columnCustomSizes' | 'scrollableContainerHeight'>> & WithContextProps & RefAttributes<any>>;
+} & Partial<Pick<IssueLikeDataTableViewProps, 'visibleColumnKeys' | 'onVisibleColumnKeysChange' | 'wrappedColumnKeys' | 'onWrappedColumnChange' | 'onColumnResize' | 'onColumnSort' | 'sortState' | 'columnCustomSizes' | 'scrollableContainerHeight'>> & WithContextProps & RefAttributes<any>>;

package/dist/types-ts4.5/ui/datasource-table-view/types.d.ts

@@ -7,4 +7,4 @@ export type DatasourceTableViewProps = {
     parameters: DatasourceParameters;
     /** Url for an existing datasource, initially used for displaying to a user unauthorized to query that site  */
     url?: string;
-} & Partial<Pick<IssueLikeDataTableViewProps, 'visibleColumnKeys' | 'onVisibleColumnKeysChange' | 'wrappedColumnKeys' | 'onWrappedColumnChange' | 'onColumnResize' | 'columnCustomSizes' | 'scrollableContainerHeight'>>;
+} & Partial<Pick<IssueLikeDataTableViewProps, 'visibleColumnKeys' | 'onVisibleColumnKeysChange' | 'wrappedColumnKeys' | 'onWrappedColumnChange' | 'onColumnResize' | 'onColumnSort' | 'sortState' | 'columnCustomSizes' | 'scrollableContainerHeight'>>;

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

@@ -2,5 +2,5 @@ import { type DatasourceResponseSchemaProperty } from '@atlaskit/linking-types/d
 import { type Props } from './empty-state';
 import { type IssueLikeDataTableViewProps } from './types';
 export declare const getOrderedColumns: (columns: DatasourceResponseSchemaProperty[], visibleColumnKeys: string[]) => DatasourceResponseSchemaProperty[];
-export declare const IssueLikeDataTableView: ({ testId, onNextPage, onLoadDatasourceDetails, items, itemIds, columns, renderItem, visibleColumnKeys, onVisibleColumnKeysChange, columnCustomSizes, onColumnResize, wrappedColumnKeys, onWrappedColumnChange, status, hasNextPage, scrollableContainerHeight, extensionKey, }: IssueLikeDataTableViewProps) => JSX.Element;
+export declare const IssueLikeDataTableView: ({ testId, onNextPage, onLoadDatasourceDetails, items, itemIds, columns, renderItem, visibleColumnKeys, onVisibleColumnKeysChange, columnCustomSizes, onColumnResize, onColumnSort, wrappedColumnKeys, onWrappedColumnChange, sortState, status, hasNextPage, scrollableContainerHeight, extensionKey, }: IssueLikeDataTableViewProps) => JSX.Element;
 export declare const EmptyState: ({ isCompact, testId }: Props) => JSX.Element;

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

@@ -1,47 +1,57 @@
 export declare const issueLikeTableMessages: {
-    updateError403Description: {
-        id: string;
-        description: string;
+    fetchActionErrorGenericDescription: {
         defaultMessage: string;
-    };
-    updateError403Title: {
-        id: string;
         description: string;
-        defaultMessage: string;
-    };
-    updateErrorGenericDescription: {
         id: string;
-        description: string;
-        defaultMessage: string;
     };
-    updateErrorGenericTitle: {
-        id: string;
-        description: string;
+    fetchActionErrorGenericDescriptionGalaxia: {
         defaultMessage: string;
-    };
-    fetchActionErrorGenericDescription: {
-        id: string;
         description: string;
-        defaultMessage: string;
+        id: string;
     };
     fetchActionErrorGenericTitle: {
-        id: string;
-        description: string;
         defaultMessage: string;
-    };
-    wrapText: {
+        description: string;
         id: string;
+    };
+    sortByColumnAscendingAction: {
+        defaultMessage: string;
         description: string;
+        id: string;
+    };
+    sortByColumnDescendingAction: {
         defaultMessage: string;
+        description: string;
+        id: string;
     };
     unwrapText: {
+        defaultMessage: string;
+        description: string;
         id: string;
+    };
+    updateError403Description: {
+        defaultMessage: string;
         description: string;
+        id: string;
+    };
+    updateError403Title: {
         defaultMessage: string;
+        description: string;
+        id: string;
     };
-    fetchActionErrorGenericDescriptionGalaxia: {
+    updateErrorGenericDescription: {
+        defaultMessage: string;
+        description: string;
         id: string;
+    };
+    updateErrorGenericTitle: {
+        defaultMessage: string;
         description: string;
+        id: string;
+    };
+    wrapText: {
         defaultMessage: string;
+        description: string;
+        id: string;
     };
 };

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

@@ -23,6 +23,11 @@ export type TableViewPropsRenderType = (item: DatasourceTypeWithOnlyValues) => R
 export interface ColumnSizesMap {
     [key: string]: number;
 }
+export type DatasourceTableSortDirection = 'ASC' | 'DESC';
+export type DatasourceTableSortState = {
+    direction: DatasourceTableSortDirection;
+    key: string;
+};
 export interface IssueLikeDataTableViewProps {
     /**
      * Map of column key to custom column width
@@ -42,6 +47,10 @@ export interface IssueLikeDataTableViewProps {
     itemIds: string[];
     items: DatasourceDataResponseItem[];
     onColumnResize?: (key: string, width: number) => void;
+    /**
+     * Callback to be invoked whenever a user sorts a datasource table by a column.
+     */
+    onColumnSort?: (key: string) => void;
     onLoadDatasourceDetails: () => Promise<void>;
     onNextPage: NextPageType;
     /**
@@ -76,6 +85,7 @@ export interface IssueLikeDataTableViewProps {
      * It this number is 0 it will not restrict height and not make container scrollable.
      */
     scrollableContainerHeight?: number;
+    sortState?: DatasourceTableSortState;
     status: DatasourceTableStatusType;
     testId?: string;
     /**